Deploy angular app on nginx from scratch | Deploying angular in nginx server on Windows

in this video I will guide you through the process of installing nginx and configuring it to run an angular application by the end of this tutorial you will learn about nginx how to run nginx server on Windows deploy and run angular app using nginx as a web server nginx is a powerful and lightweight web server that is known for its high performance and scalability it's commonly used to solve static files act as a reverse proxy and handle load balancing now let's dive into the installation process to download nginx go to its website nginx.org and click on download link download the latest version for Windows by clicking this link if you want it for Linux then scroll down and click here once you click the download link it will download a zip file extract it at a location on your system this is the extracted folder structure nginx has a configuration file called nginx.com which is located under con folder this file contains server configuration where you can Define the count of worker processes the number of connections for worker process these are high level details and for now you don't need to understand these it also lets you define the name of server the port at which it will be listening this is the most important block that lets you define the URL mapping for your application that is how should engine behave when particular URLs are accessed it begins with location statement the slash signifies the root URL path root statement sets a location where it should find your application files index defines the main file that should be rendered when application URL is accessed for the first time so this block basically tells nginx that for localhost colon 8080 it will look inside HTML folder and load index.html file if you look into the HTML folder there is an HTML file named index.html this block defines that in case an error with this code occurs then it should redirect to this path and this Block matches this URL and sets the folder as HTML yeah 500 stands for server error 502 is for bad gateway and so on so this means that whenever these error codes are encountered nginx will look for 50x.html file inside root folder if we again look into HTML folder we have 50x.html file now to start the server open command prompt in administrator mode navigate to the location of nginx folder and run nginx.exe open a web browser and access URL localhost colon 8080 this is the index HTML page that is present inside HTML folder nginx is working to stop nginx open another command prompt and administrator mode navigate to the location of nginx folder and type command nginx hyphen s stop where s flag stands for signals refresh this page engine system now let's deploy an angular application in nginx here is an angular application which is started at Port 4200 let's verify by going to a browser and accessing it the application is up and running to learn how to create this new angular application from scratch watch the earlier video whose link is given at the top right corner for deploying an angular application inside nginx first we have to compile and build it open command prompt and type NG space build enter this will compile the application and generate a disk folder if you open the disk folder it contains another folder with application name go into this folder it contains compiled HTML JavaScript NCS files copy this folder to deploy an application in nginx we need to copy its contents to HTML folder now since the application files such as JS and CSS are in this folder they will be accessible only when the folder name is present in the URL path and for this we need to change the base path in index HTML open it change this base hrf path to the folder name second change that we need to do is to add mappings for our application in engineers.com file in fact we'll make a new confile from scratch containing only the information that we require for running a angular application so that it becomes easy for you to understand create a new file copy worker processes and worker connections from the original file since we need them as it is now create a new HTTP blog and inside this copy the mime dot types we don't need default type Define a server block make it listen at Port 8440 server name will be localhost only now let's add URL mapping Handler blocks first we need a block that handles root URL that is localhost colon 8440 its location will be slash the root folder for this mapping will be HTML slash demo app since our application files are present at this path index.html is present at this path so index instruction will be followed by index.html we don't need anything in this block so this block will load index.html file from demo app folder when we access localhost colon 8440 index.html will in turn request for CSS and JS files and their path will contain slash demo app this is because we change the base HR path to demo app in index.html earlier so to handle that we need to add another location mapping which will be location slash demo app and we want that the requested files should be fetched from demoip folder nginx has a try underscore file statement which is used to map URLs to resource files this is followed by Dollar URI which is nginx defined variable representing the requested URL and Maps it to a resource such as CSS or Js at Dollar URI slash to handle URLs with drilling slash with index.html at last this block tells nginx that when a URL containing demo app is accessed it should match the URL and find the requested resource inside demo folder if the requested file is not found then return index.html change the name of original nginx.com file and save this file as nginx.com or we need to close the already open file restart the server access URL localhost colon 8440 look our app is running which means that we have successfully deployed an angular application inside nginx if you look at Network calls of this application go to network tab reload the application look all the JS and CSS files are being loaded from application folder only which is demo app in the next video we will deploy an angular application inside nginx in a Docker container so stay tuned And subscribe to get notified thanks for watching

Channel: codippa

Views: 5,806

Keywords: nginx, angular app on nginx, angular build app, install nginx windows, download nginx, nginx for windows, angular app in nginx, angular app deployment

Id: Wf-6idVVis4

Length: 7min 28sec (448 seconds)

Published: Sun Jul 16 2023