iXora Custom Software Development Blog

Read | Practice | Advance

How to Configure NGINX to deploy angular app in Windows 10

Posted by on in Blog
  • Font size: Larger Smaller
  • Hits: 11085
  • 2 Comments

Prepare the deployable files of Angular application

Run the following command to generate the deployable files:

With Angular CLI
ng build –prod

With NPM
npm build –prod

 For more you can visit https://angular.io/guide/deployment 

NGINX configuration to host the Angular application

You can download (as zip) the latest NGINX version from the site https://nginx.org/en/download.html.
After downloading the zip file, unzip it and keep to a directory. Now you need to update the configuration file to host the angular application.In the unzipped folder you will find the “nginx.conf” under “conf” directory. Open the file using any text editor and add the following lines inside the server section.

NGINX configuration for Angular application:

Consider that the dist location is “C:\angularapp\mayapp\dist” and the starting page is index.html. While defining the root, use forward slashes.

 

Server {
      Listen    80;
      Server_name     localhost;
      ..............
      location / {
                root “C:/angularapp/myapp/dist”;
                try_files $uri $uri/ index.html;
      } 
      ..............
}  

 

 NGINX configuration to add the backend service for Angular application

Considering that you have a service running at port 9000 starting with /api (http://localhost:9000/api/......). We need to configure the reverse proxy for the backend service as below.

Server {
      Listen    80;
      Server_name     localhost;
      ..........
      location /api {
         proxy_pass   http://localhost:9000;
      }
     ..........
}

  

So the final changes would be

Server {
      Listen    80;
      Server_name     localhost;
      ..............
      location / {
                root “C:/angularapp/myapp/dist”;
                try_files $uri $uri/ index.html;
      }                                             
      location /api {
                 proxy_pass   http://localhost:9000;
      }
      ..............
}  

 

That’s it. Now you are ready to browse your angular application in port 80 (as by default). Restart your NIGINX service and make sure that your backend service is up and running.Type http://localhost to browser your application.

Rate this blog entry:
1

Comments

  • Guest
    Williams Friday, 10 January 2020

    What happen if your API and your app are placed in the same location ?

  • Guest
    Jackson Thursday, 16 May 2019

    Great! Should replace "localtion" with "location"

Leave your comment

Guest
Guest Tuesday, 11 August 2020