Starter Angular with webpack config

A yeoman generator, letting you to create easely an angular (version 5) web application with webpack (version 3) as module bundler

Table of Contents

• Requirements
• Installation
• Struture Angular Project
• Development Mode
• Production Mode
• Configuration style (css/scss)
• Add dependencies to my project
• Docker
• Documentation
• License

Requirements

Starter Angular requires the folowing to run:

• Node.js: 4.x.x+
• NPM: 3.x.x+ (normally comes with node js)
• Yo: 1.x.x+

Installation

To install Node js, go to their Home Page

To install Yo, paste this command line in your favorite term:

npm install -g yo

To install this yoeman's generator, paste this command line:

npm install -g generator-angular2-webpack-full-config

To launch this generator, and create your web-application, paste this command line

yo angular2-webpack-full-config

Finally, you must have all the necessary dependencies. For that, go to your App folder that you just created, and paste this command line

npm install

Structure Angular Project

This starter project respects Angular's best practices. To organize your project with those best practices, refer to Angular Home Page

Development Mode

The development mode is realized by webpack-dev-server (version 1). To launch this server, go to your app folder and paste this command line

npm start

This command launch the development server on port 8000 of your localhost. There is an auto reload system for saving time in your development

Production Mode

In production mode, all the project is minified. To build your application, in your app folder, paste this command line

npm run build:prod

Then to deploy your application, you have two choices:

• a node server, with the framework hapi (documentation here)
• a little server, easy to use: superstatic (documentation here)

To launch server in production mode with the node server, in your app folder, paste this command line

npm run prod

To launch server in production mode with superstatic, in your app folder, paste this command line

npm run serve:prod

Configuration style (css/scss)

Now you can use sass or css to styling your application. Only difference is the method of import.

To import a sass file in a typescript file, here is an example:

import '!style-loader!css-loader!sass-loader!path to your sass file'

In an angular component it's necessary to stringify your sass file, here is the syntax

styles:[require('path to sass file').toString()]

You can also include your sass file in the main sass file like this:

@import 'path to your sass file'

To import a css file in a typescript file, here is an exemple:

import '!style-loader!css-loader!path to your css file '

In an Angular component, just require your css file like this

styles:[require('path to your css file')]

Dependencies

If your projet needs more dependencies you must import them in the vendor file. Some exemples are already present in this file.

Docker

Now your application can be deploy in a Docker container. All scripts are already done. These scripts are in the script folder. You just must change 'name_of_your_image:tag' by your really app name image and the the version of your tag.

To lauch a script, go to the script folder, and in a terminal

sh name_of_your_script_file

Documentation

Create documentation for your application is very easy now with compoDoc. To create doc, in a terminal, paste this command line

npm run compodoc

This command line will create a documentation folder called 'documentation'. To see the documentation, you must serve it on a server. For this, paste this command line

sh npm run servedoc

For more option, you can go the the official webpage of compoDoc

License

generator-angular2-webpack-full-config is licensed under the MIT license.
Copyright © 2016, Nicolas FRIZZARIN