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

 

 

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Mouad EL FakirAstron Recent comment authors

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

  Subscribe  
newest oldest most voted
Notify of
Astron
Guest
Astron

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