Hosting Angular Applications Using nginx

In this article, you will learn how to host Angular applications using nginx.

There are so many ways available to develop web applications. But after developing any web application, the next step is hosting our web application on a web server. There are n number of options available for web servers. In this article we will host an angular application using nginx.
 
nginx is a  lightweight, free and open source option for hosting applications. It will take a couple of minutes to download, install the nginx and also host the application. And nginx is not only used to host applications; we can also use it for load balancing.
 
So let's start now.
 
First, we will create one angular application using
 
ng new sample-angular-application 
 
Hosting Angular Application Using nginx 
 
Hope everyone is very familiar with Angular applications and angular-cli commands. If you are really new to Angular then first visit http:www.angular.io and get a better understanding of angular and go through this article.
 
Open sample-angular-application application using any editor or IDE and start developing the application,
 
I have just modified app.component.html file with the below code. 
  1. <div style="text-align:center">  
  2.  <h1>  
  3.    Welcome to {{ title }}!  
  4.  </h1>  
  5.  <h2>welcome to anngular application</h2>  
  6.  <h3>we will host this application using nginx</h3>  
  7. </div>  
After completing, start the application using ng serve
 
Hosting Angular Application Using nginx 
 
If you open browser and hit http://localhost:4200/, you will get your application up and running,
 
Hosting Angular Application Using nginx 
 
After successfully executing the application we can build application using ng build command.
 
Hosting Angular Application Using nginx 
 
Using command ng build --prod we can create a production ready build. After executing build command open your application in explorer then you will find dist folder,
 
Hosting Angular Application Using nginx
 
You will get many files after building the angular application as shown in the below image,
 
Hosting Angular Application Using nginx
 
After developing and building the Angular application now we will begin the nginx part.
 
Now we can start with the deployment part.
 
First, we will download nginx from here.
 
Hosting Angular Application Using nginx
 
So choose the download as per your operating system. I am using windows operating system so I have downloaded zip file.
 
Now I am unzipping this file and opening the nginx1.16.1 folder.
 
Hosting Angular Application Using nginx
 
Here you find folders and the nginx application.
 
First, open conf folder and open nginx.conf,
 
Hosting Angular Application Using nginx 
  1. server {  
  2.         listen       80;  
  3.         server_name  localhost;  
  4.   
  5.         location / {  
  6.             root   html;  
  7.             index  index.html index.htm;  
  8.         }  
  9. }  
These are some default settings regarding the server_name and the port. I have changed the port from 80 to 8099
 
And one more important configuration is location is default, root is html folder and index means index.html file inside the html folder. If you want you can do the changes as per your requirement and save the nginx.conf file to reflect the changes.
 
Now I will copy all the files and folders from dist\sample-angular-application and paste them inside the html folder.
 
To start nginx use command "start nginx"
 
Hosting Angular Application Using nginx
 
Now open a browser and type http://localhost:8099/
 
Hosting Angular Application Using nginx 
 
These are some more commands you may require related to nginx,
 
nginx -s stop
fast shutdown
nginx -s quit
graceful shutdown
 

Summary

 
This is the simplest way to host your Angular application using nginx.
 
We can also share whole nginx folders with anyone and start nginx command and start our application easily.
 
I have uploaded sample application code for your reference. You can use that code instead of creating a new project. After downloading the sample project only use "npm install" to install npm packages and then use "ng serve" to start the application and "ng build" to build the application.
 
Also, I have uploaded nginx hosted application folder as well. You can download that folder and use command start nginx to start the server and visit localhost:8099