Posted by Arjun on Thursday 21st September 2017

How to Deploy an Angular app in Production with Nginx

How to nginx Angular Deploy Production

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

[caption id="attachment_5437" align="aligncenter"]How to Deploy an Angular app in Production with Nginx[/caption]

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 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 Nginx service by running following command, you should get "active" green color text along with other text.

 sudo systemctl status nginx

How to Deploy angular app

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

For example, If you are using Angular CLI, then you should run 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 it places all compiled files inside it. You have to move those files to web server root folder, ex: /var/www/html. Thant, it now you can access your application with your public IP or domain name.