Deploy Angular App using Nginx

Angular featured image

1. Overview

Deploy Angular app with Nginx

Assuming that you have finished developing your Angular app, and it’s time to deploy it in a real web server (production server for example).

In this article, I will show you how to build and deploy your Angular app in a production server using Nginx web server.

Nginx is a lightweight web server (1.38MB), it’s easy to install and to configure.

2. Implementation

2.1. Build Angular app

1. First of all, build your Angular app for production, using ng build command.

ng build --prod --base-href="/"
  • –prod : To optimize the generated bundles (minification, uglification,…).
  • –base-href : To designate context path a for your application.

2. If everything goes well, a app/dist folder contains the generated resources will be created.

ng build prod generated dist folder

2.2. Install Nginx

Download and unzip Nginx somewhere in your production server.

Install nginx for Angular app deployment

2.3. Config Nginx

1. Open the ../nginx-1.13.8/conf/nginx.conf, and add the following script inside the http { … } section.

server {
        listen       9090;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html; 
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

try_files is not necessary if you are using hash location strategy.

2. Navigate to ../nginx-1.13.8/html, and copy inside it all the generated files from app/dist folder.

Copy files from dist folder to nginx html

3. Run Nginx server by double click on ../nginx-1.13.8/nginx.exe.

4. Open the localhost:9090 with a browser to see your Angular app up and running.

Angular app up and running using Nginx

 

 

4 2 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Astron
Astron
5 years ago

how to configure it so that it could be access via the internet from another machine?

john smith
5 years ago

thanks for such a nice explanation.

Alex
5 years ago

Finally I’ve found something that helped me. Thank you!

N d
N d
4 years ago

how to configure SSL?

Saurabh
Saurabh
4 years ago

How to solve Cross origin error while calling to another server api?

Saurabh
Saurabh
Reply to  Mouad EL Fakir
4 years ago

But this is for the development time work. I am currently wants to deploy my Angular app using Nginx server.
Please dont mind i am new to angular.

10
0
Would love your thoughts, please comment.x
()
x