Simple deployment

Now that we have everything ready, let's look at how to build our application.

First, we will look at the application after the changes have been made:

1. Open VS Code, click on view in the top menu bar, and click Integrated Terminal.
2. Type the following command in your Terminal:

npm start

3. Open your default browser and go to http://localhost.com:4200/beers.
4. Congratulations; you should see the following screenshot:

Note that we are running the command for development, using ng serve behind the  npm start command.
Now, let's use the command to build the application, and check the results:

1. Go back to VS Code and type Ctrl + C to stop the server.
2. Type the following command:

npm run build

The preceding command will prepare the application for production; the Angular CLI will do all of the hard work for us. Now, we have a folder at the root of chapter03, as shown in the following screenshot:

As you can see, all of our application is inside of this folder, as optimized as possible; however, to see the contents, we need a web server. In this example, we will use the http-server node package, a very useful Node.js module to make a particular directory on a simple web server. You can find more information about http-server at https://www.npmjs.com/package/http-server:

1. Go back to VS Code and the integrated Terminal, and type the following command:

npm install http-server -g

2. Still in the integrated Terminal, type the following command:

cd dist && http-server -p 8080

3. You will see the following message in your Terminal:

 Starting up http-server, serving ./
 Available on:
 http://127.0.0.1:8080
 http://192.168.25.6:8080
 Hit CTRL-C to stop the server

This means that everything went well, and you can already access the contents of the dist folder in your browser.

4. Open your default browser and go to http://localhost.com:8080/beers.

We're done; now, let's save everything that we did within the chapter03 folder in our local repository, using some Git commands. This step is not required for the next chapters, but it is highly recommended.

5. Open your Terminal in the chapter03 folder and type the following command:

git add .git commit -m "chapter03 initial commit"

6. After the previous command, you will see the following output in your Terminal:

 [master c7d7c18] chapter03 initial commit
 10 files changed, 190 insertions(+), 24 deletions(-) rewrite  
 src/app/app.component.html (97%)
 create mode 100644 src/app/beers/beers.component.css
 create mode 100644 src/app/beers/beers.component.html
 create mode 100644 src/app/beers/beers.component.spec.ts
 create mode 100644 src/app/beers/beers.component.ts
 create mode 100644 src/app/beers/beers.module.ts
 create mode 100644 src/app/beers/beers.service.spec.ts
 create mode 100644 src/app/beers/beers.service.ts