Hosting 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 

 

 

 

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. 

<div style="text-align:center">
 <h1>
   Welcome to {{ title }}!
 </h1>
 <h2>welcome to anngular application</h2>
 <h3>we will host this application using nginx</h3>
</div>

After completing, start the application using ng serve

 

 

 

If you open browser and hit http://localhost:4200/, you will get your application up and running,

 

 

 

After successfully executing the application we can build application using ng build command.

 

 

 

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,

 

 

You will get many files after building the angular application as shown in the below image,

 

 

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.

 

 

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.

 

 

Here you find folders and the nginx application.

 

First, open conf folder and open nginx.conf,

 

 

server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }
}

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"

 

 

Now open a browser and type http://localhost:8099/

 

 

 

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