While going through online examples to learn a framework is great, it skips one of the more confusing parts of modern web development:

How do we bundle and run our applications? Should we use Gulp? Webpack? SystemJS? How are these all different?

This is a common question not only for Angular but also all other modern JS frameworks. There are a myriad of boilerplate repos on Github for every possible framework, build tool, and library. While these can sometimes help you get up and running faster, they often lack official support from the official team and you're a lot more likely to run into trouble with whatever tooling preferences that repo maintainer decided on.

The common soluton that framework authors have adopted as of late is to create a CLI (command line interface) tool that exposes commands frequently required operations on your codebase. Whether it uses Webpack, SystemJS, etc under the hood is then only a concern of developers looking for more advanced use cases.

Introducing the Angular CLI

The Angular CLI uses Webpack under the hood. We've found that the Angular CLI is the best solution for scaffolding & developing real Angular applications because:

• It's officially supported by the Angular team,
• Has building for production built into it
• A live dev server w/ live reloading
• Environment variables supported out of the box
• Schematics for rapid development

...and more.

Installing the CLI

To install the CLI, simply run the following command (-g installs it globally so you can call it from the command line):

npm install -g @angular/cli

Lets explore the common tasks that the CLI can take care of for us.

Creating new Angular projects

ng new APP_NAME

This command will create a new folder with your project's name (in this case APP_NAME), scaffold a new Angular application inside of it, and then install all required dependencies.

Running projects (with livereload)

Make sure you're in the project's root directory and then run:

ng serve

Building projects for production

ng build

This command will compile a production ready version of your application in the dist/ folder.

Additional reading