How to Configure NGINX to deploy angular app in Windows 10

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;
      } 
      ..............
}Code language: PHP (php)

 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;
      }
     ..........
}Code language: JavaScript (javascript)

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;
      }
      ..............
}  <br><br>Code language: JavaScript (javascript)

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. Visit iXora Solution to explore our Angular expertise and developers.