Submodule 23.4: Building and Deploying the Angular Application

Introduction

In this submodule, you will learn to use the Angular CLI to build a distribution folder with the set of application files that can be copied to a server to deploy your Angular application. You will:

• Build your Angular application using the Angular CLI to create a distribution folder
• Deploy your application to a server by copying the built files to your server

Building the Distribution Folder

To build the distribution folder containing your angular application, type the following at the prompt:

ng build --prod

The dist folder has been created for you by the Angular-cli.

Save the changes and do a Git commit with the message "Build".

Deploying your Angular Application

To deploy your Angular application you need a server. Fortunately, we already have the json-server available on our computer. Copy the contents of the dist folder to the public folder of your json-server.

In your Terminal, go to your json folder and run:

json-server --watch db.json -d 2000

Access your Angular site by running localhost:3000 in your browser.  The browser will be redirected to the home page.

If you want go to the localhost:3000/contact page and leave a feedback.

You can see this feedback in your db.json file!

• See more about Deployment