Setting up the build

Remember that we are building on a modern platform for which browsers still lack support. Therefore, directly referencing script files in HTML is out of the question (while common, it's a dated approach that we should avoid anyway). Browsers do not understand TypeScript; this implies that there has to be a process that converts code written in TypeScript into standard JavaScript (ES5). Hence, having a build set up for any Angular app becomes imperative. And thanks to the growing popularity of Angular, we are never short of options.

If you are a frontend developer working on the web stack, you cannot avoid Node.js. This is the most widely used platform for web/JavaScript development. So, no prizes for guessing that most of the Angular build solutions out there are supported by Node. Packages such as Grunt, Gulp, JSPM, and webpack are the most common building blocks for any build system.

For this book and this sample app, we endorse Angular CLI (http://bit.ly/ng6be-angular-cli). A command line tool, it has a build system and a scaffolding tool that hugely simplifies Angular's development workflow. It is popular, easy to set up, easy to manage, and supports almost everything that a modern build system should have. More about it later.

As with any mature framework, Angular CLI is not the only option out there on the web. Some of the notable starter sites plus build setups created by the community are as follows:

Let's start with installing Angular CLI. On the command line, type the following:

npm i -g @angular/cli

Once installed, Angular CLI adds a new command ng to our execution environment. To create a new Angular project from the command line, run the following command:

ng new PROJECT-NAME

This generates a folder structure with a bunch of files, a boilerplate Angular application, and a preconfigured build system. To run the application from the command line, execute the following:

ng serve --open

And you can see a basic Angular application in action!

For our 7 Minute Workout app, instead of starting from scratch, we are going to start from a version that is based on the project structure generated by ng new with minor modification. Start with the following steps:

1. Download the base version of this app from http://bit.ly/ngbe-base and unzip it to a location on your machine. If you are familiar with how Git works, you can just clone the repository and check out thebase branch:

git checkout base

This code serves as the starting point for our app.

1. Navigate to the trainer folder from the command line and execute the command npm install from the command line to install the package dependencies for our application.

1. Once npm pulls the app dependencies from the npm store, we are ready to build and run the application. From the command line, enter the following command:

    ng serve --open

This compiles and runs the app. If the build process goes fine, the default browser window/tab will open with a rudimentary app page (http://localhost:4200/). We are all set to begin developing our app in Angular!

But before we do that, it would be interesting to know a bit more about Angular CLI and the customization that we have done on the default project template that Angular CLI generates.