Hosting Angular Applications 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.

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,

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

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