How to Deploy an Angular app in Production with Nginx

Last updated on December 19, 2022

In this tutorial, I will show you Nginx installation and configuration steps to serve the Angular application in production. I am gonna use Ubuntu 16.04 operating system.

Install and Configure Nginx for Angular

First, update the apt-get package lists and then install Nginx using apt-get:

$ sudo apt-get update
$ sudo apt-get install nginx

Then open the default file to configure the server which is located in /etc/nginx/sites-available/ directory.

sudo vi /etc/nginx/sites-available/default

Delete everything in this configuration file and paste the following content:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
} 

To make the changes active, restart the web server Nginx:

sudo systemctl restart nginx 

Now check the status of the Nginx service by running the following command, you should get “active” green color text along with other text.

 sudo systemctl status nginx

How to Deploy the angular app

Copy and move all the compiled files to the webserver root folder, ex: /var/www/html.

For example, If you are using Angular CLI, then you should run the below command to get compiled files for production:

ng build --prod

When you run the ng build --prod command, it creates a /dist folder and places all compiled files inside it. You have to move those files to the web server root folder, ex: /var/www/html. Thant, it now you can access your application with your public IP or domain name.