This repo serves as a minimal starter for those looking to get up-and-running with Angular and ES6, using Gulp, Webpack, Mobx, and Material Design.

This seed is not a Yeoman generator. It's a minimal starter with a todo app boilerplate. These are its features:

The best practice in directory/file organization for Angular (allowing for infinite horizontal app scaling)
A ready-to-go build system for working with ES6
Tasks for generating additional boilerplate Angular components
Stylus support

Walkthrough
- Build System
Getting Started
Starter Kit Support and Questions

Walkthrough

Build System

NG6 uses Gulp and Webpack together for its build system. Yes, you don't need Gulp if you're using Webpack. This is true if your build system is only responsible for file manipulation. However, ours is not.

Webpack handles all file-related concerns:

Transpiling from ES6 to ES5 with Babel
Loading HTML files as modules
Transpiling stylesheets and appending them to the DOM
Refreshing the browser and rebuilding on file changes
Hot module replacement for transpiled stylesheets
Bundling the app
Loading all modules
Doing all of the above for *.spec.js files as well

Gulp is the orchestrator:

Starting and calling Webpack
Starting a development server (yes, Webpack can do this too)
Generating boilerplate for the Angular app

Getting Started

Dependencies

Tools needed to run this app:

node and npm Once you have these, install the following as globals:
npm install -g gulp karma karma-cli webpack

Installing

fork this repo
clone your fork
npm install -g gulp karma karma-cli webpack install global cli dependencies
npm install to install dependencies

Running the App

NG6 uses Gulp to build and launch the development environment. After you have installed all dependencies, you may run the app. Running gulp will bundle the app with webpack, launch a development server, and watch all files. The port will be displayed in the terminal.

Gulp Tasks

Here's a list of available tasks:

webpack
- runs Webpack, which will transpile, concatenate, and compress (collectively, "bundle") all assets and modules into dist/bundle.js. It also prepares index.html to be used as application entry point, links assets and created dist version of our application.
serve
- starts a dev server via webpack-dev-server, serving the client folder.
watch
- alias of serve
default (which is the default task that runs when typing gulp without providing an argument)
- runs serve.
component
- scaffolds a new Angular component. Read below for usage details.

Generating Components

Following a consistent directory structure between components offers us the certainty of predictability. We can take advantage of this certainty by creating a gulp task to automate the "instantiation" of our components. The component boilerplate task generates this:

⋅⋅⋅⋅⋅⋅componentName/
⋅⋅⋅⋅⋅⋅⋅⋅componentName.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.controller.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.html
⋅⋅⋅⋅⋅⋅⋅⋅componentName.styl // scoped to affect only its own template
⋅⋅⋅⋅⋅⋅⋅⋅componentName.spec.js // contains passing demonstration tests

You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious. To generate a component, run gulp component --name componentName.

The parameter following the --name flag is the name of the component to be created. Ensure that it is unique or it will overwrite the preexisting identically-named component.

The component will be created, by default, inside client/app/components. To change this, apply the --parent flag, followed by a path relative to client/app/components/.

For example, running gulp component --name signup --parent auth will create a signup component at client/app/components/auth/signup.

Running gulp component --name footer --parent ../common creates a footer component at client/app/common/footer.

Because the argument to --name applies to the folder name and the actual component name, make sure to camelcase the component names.

lube/angularjs-webpack-mobx-material-TodoMVC

Table of Contents