A complete, yet simple, component-way starter for Angular using Webpack.
This workflow serves as a starting point for building Angular 1.x applications using Webpack. Should be noted that apart from the pre-installed angular package, this workflow is pretty much generic.
- Heavily commented
Webpack
configuration with reasonable defaults. - Based on component way.
- ES6, and ES7 support with
Babel
. - Source maps included in all builds.
- Development server with live reload.
- Production builds with cache busting.
- Testing environment using karma to run tests and jasmine as the framework.
- Code coverage when tests are run.
- No gulp and no grunt, just
npm
scripts. - Generic components via
plop
.
Inspired/based on the following github projects:
- https://github.com/preboot/angular-webpack
- https://github.com/zombiQWERTY/angular-component-way-webpack-starter-kit
- https://github.com/AngularClass/NG6-starter
Warning: Make sure you're using the latest version of Node.js and NPM
Clone/Download the repo then edit
app.js
inside/src/app/app.js
# clone this repo
$ git clone https://github.com/aaronrosenthal/angular-webpack-starter-kit my-app
# change directory to your app
$ cd my-app
# install global dependencies with npm
$ npm install -g karma karma-cli webpack
# install the dependencies with npm
$ npm install
# start the server
$ npm start
go to http://localhost:8080 in your browser.
What you need to run this app:
node
andnpm
Once you have these, install the following as global dependencies:npm install -g karma karma-cli webpack
- Ensure you're running Node (
v4.1.x
+) and NPM (2.14.x
+)
After you have installed all dependencies you can now run the app with:
npm start
It will start a local server using webpack-dev-server
which will watch, build (in-memory), and reload for you. The port will be displayed to you as http://localhost:8080
.
- single run:
npm run build
- single run:
npm run test
- live mode (TDD style):
npm run test-watch
npm run plop
for generating filesnpm run stats
for code analysing (webpack.github.io/analyse)- Store your content (images, etc.) that loads from html in assets folder folder