angular-spa-boilerplate

A boilerplate for writing Angular 1.x single page applications with ES6 and Webpack.

First of all, a big thanks to Jesús Rodríguez, from whom I stole the main Webpack config and the basic structure of this README file. Don't forget to checkout his work. It's awesome.

This is a slightly opinionated boilerplate. It takes care of the basics and comes with one or two dependencies that you may or may not use. Just uninstall them in this case.

I'm going to create another repo with a really heavily opinionated version of this, which should take care of things such as authentication, server communication, internationalization and others...

Table of Contents

• Features included
• Quick start
• Installation
  • Requirements
  • Installing
• Usage
  • Running the development server
  • Building files for production
  • Deploying
  • Testing
• About the demo app
  • Dependencies
  • Pages
• License

Features included

• Heavily commented webpack configuration with reasonable defaults.
• ES6, and ES7 support with Babel.
• ngAnnotate integration for cleaner code and "non-breackable" JavaScript minification.
• SASS automatic compilation and watch with sass-loader for Webpack.
• A pattern for lazy loading resources on demand
• Development server with live reload.
• Production builds with cache busting.
• Source maps included in all builds.
• No gulp and no grunt, just npm scripts.

Quick start

# clone our repo
$ git clone https://github.com/MtDalPizzol/angular-spa-boilerplate.git my-app

# change directory to your app
$ cd my-app

# install the dependencies with npm
$ npm install

# start the development server
$ npm start

After that, go to http://localhost:8080 in your browser.

Installation

Requirements

I wrote this using Node v4.4.5 and NPM v2.15.5. So, just make sure you have those or newer versions.

Installing

• fork this repo
• clone your fork
• Run npm install in the root of the project to install all dependencies

Usage

Running the development server

npm start

It will start a local server using webpack-dev-server which will watch, build (in-memory), and refresh the browser for you. The port will be displayed to you as http://localhost:8080.

Building files for production

npm run build

Webpack will bundle up your code, then, it will put all the code you need to deploy your app into de dist folder, at the project's root.

Deploying

Once you've built the files as described above, you can deploy your app. I included a server.js file with a simple Express implementation. You can run this in any Node environment you wish. To do this, just use the following:

npm run deploy

Testing

This is shipped with a Karma configuration. It will take all the files ending in .spec.js into your app folder and run the tests for you. You can do this a single time:

npm run test

... or you can watch the files for changes to rerun the tests:

npm run test-watch

About the demo app

Dependencies

The demo app comes with the following popular/useful dependencies installed. It is up to you to use them.

• UI Router
• ocLazyLoad
• Angular Material
• Material Design Icons
• Material Design Data Table
• Angular Messages
• Angular Breadcrumb
• Angular UI Notification
• jQuery
• Perfect Scrollbar

It also includes Bourbon, a SASS mixin library.

Pages

The demo app comes with 2 "layouts" and 3 "modules", as described below:

• Auth layout
  • Login module
• Default layout
  • Dashboard module
  • People module
    • People list
    • Add person form

License

This software is provided free of charge and without restriction under the MIT License