Skip to content

tenphi/angular-express-webpack-boilerplate

Repository files navigation

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:

...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 [email protected]: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!

About

Boilerplate for express+angular app with webpack builder

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published