Most web apps built with angular are generally deployed individually on the server. Deploying only an angular app is as easy as deploying some static site.

Deploy an individual site on the server.

Prerequisite:

• The angular app is ready with some routes (If you don't have any, clone this).

• The NGINX server is up and running.

Here my registered domain name is jrdeveloper.online .

Let's get started...

1. Let's finish the project first. Build the angular project with the prod flag (for the latest project it's not required). e.g. ng build --prod (Please note that, by default <base href="/"> it's pointing to /).

2. The above command will create dist/projectName.
   In our case it is dist/angular-routing . Transfer all these files to the server location. Here for us, it is under /var/www/jrdeveloper.online/ .

3. On the server side, add the server context as below, in the /etc/nginx/sites-available/jrdeveloper.online .

   

4. After this reload the NGINX server with service nginx reload .

5. Visit the website http://jrdeveloper.online .

6. We can visit all the URLs. Just observe one thing, on navigating to articles and products menu, it's reloading a page. But for others menu links just navigate without reloading the page. (This is because for articles and products we are navigating with anchor href and other menus are with angular 'routerLink' directive which handles routes effectively)

Deploy multiple sites on the server

Now, as we have already added one website at /var/www/jrdeveloper.online/ , which is at the root of the website.

1. To add one more site we need to create a subdirectory, in it
   mkdir /var/www/jrdeveloper.online/docs .

2. We will deploy this app on /docs a path which means http://jrdeveloper.online/docs will launch a new app.

3. Create a new project or clone it from here. For a better understanding of the routing, keep some routes in the project.

4. Now, while building the app, we need to change the base href.
   ng build --prod --base-href="/docs/" .

5. Upload the dist files to the /var/www/jrdeveloper.online/docs/ .

6. Update the conf file /etc/nginx/sites-available/jrdeveloper.online like the below:

   

7. Visit website on http://jrdeveloper.online/docs . Please note, when we click on any link from the webpage, it will redirect from the base path like http://jrdeveloper.online/docs/login .

   

8. Any direct link like <a href="test">Test link</a> this, redirect http://jrdeveloper.online/test which is not available and will give 404 Page not found error.