angular-express-webpack-boilerplate

A comprehensive boilerplate for express+angular application that uses webpack. It works in both production and development modes and provides automatic rebundling and restaring while developing.

This webpack configuration has several predefined loaders:

• babel-loader for *.es6.js files
• less-loader for *.less files
• html-loader for *.html files
• css-loader for *.css files
• file-loader and image-loader for *.jpeg, *.png, *.gif and *.svg files
• postcss-loader for css postprocessing (autoprefixer + csswring)

...and plugins:

• extract-text-webpack-plugin for external css bundle in production mode
• stats-webpack-pluginto for analyse

Default angular app has angular-ui-router module.

Based on the great article: The ultimate webpack setup

installation

Clone the repo:

$ git clone git@github.com:tenphi/webpack-express-boilerplate.git my-project
$ cd my-project

Install dependencies:

$ npm install

Install webpack globally

$ npm install -g webpack

development

Run server with:

$ npm start

It runs express server on localhost on port 3000 and webpack-dev-server on port 3001 with proxing requests from the first one to the second one.

You can specify host of the application:

$ APP_HOST=appdomain.com npm start

Application has two separate directory frontend and backend. The entry point for frontend is frontend/app.es6.js file and for backend it is backend/server.js.

production

Build assets for the application:

$ NODE_ENV=production webpack -p --config webpack.production.config.js

Then run the app:

$ NODE_ENV=production npm start

Do not forget to specify your app domain in server.js for production mode!

Have fun!