DEV Community

loizenai
loizenai

Posted on

How to Deploy Angular on Nginx remote Server Example – Use Vultr VPS Hosting

https://grokonez.com/frontend/angular/angular-deployment/how-to-deploy-angular-on-nginx-remote-server-example-use-vultr-vps-hosting

How to Deploy Angular on Nginx remote Server Example – Use Vultr VPS Hosting

In the tutorial, We show how to deploy Angular Client with Production mode on Nginx Remote Server with Vultr Hosting.

Related post:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Technologies

– Vultr Hosting
– Nginx Server
– Angular

Goal

Video Demo

Objectives

Deploy Angular Client on Nginx remote server:

  • Normal deployment -> deploy-angular-client-on-nginx-server-with-vultr-hosting-result-2-1
  • Sub-folder deployment -> deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-sub-folder-deploy

How to achieve it?

Start with production build ng build --prod.
-> Then copy output folder (dist/ by default) to Nginx server.

deploy-angular-client-on-nginx-server-with-vultr-vps-hosting-copy-production-build-from-local-to-remote-1-2

What are Production --prod optimizations?

  • Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
  • Production mode: deploys the production environment which enables production mode.
  • Bundling: concatenates your many application and library files into a few bundles.
  • Minification: removes excess whitespace, comments, and optional tokens.
  • Uglification: rewrites code to use short, cryptic variable and function names.
  • Dead code elimination: removes unreferenced modules and much unused code.

More at:

https://grokonez.com/frontend/angular/angular-deployment/how-to-deploy-angular-on-nginx-remote-server-example-use-vultr-vps-hosting

How to Deploy Angular on Nginx remote Server Example – Use Vultr VPS Hosting

Top comments (0)