How to deploy angular Universal to production?

Spread the love

Step: 1 – Make your existing Angular app to Angular Universal

How to deploy angular Universal to production?
deploy angular Universal to production

You can skip if you already done.

Step: 2 How does angular deploy in production?

To deploy angular Universal to production run the command below. In production mode clone the project/pull from git or use FTP as requirement. deploy angular Universal in live environment is very easy complete this tutorial you will reach out.

npm run build:ssr
folders create after ssr build in angular
folders create after ssr build in angular

After build complete generate 2 folder browser, server under the dist folder

Follow below articles as needed

Step: 3 – Install nginx server

# Refresh the indexes
sudo apt update

# Install nginx
sudo apt install nginx

# Check and enable Nginx - Auto start
sudo systemctl is-enabled nginx
sudo systemctl enable nginx

# Check Nginx Version
nginx -v

# Output
nginx version: nginx/1.17.10 (Ubuntu)

# Check Nginx Status
sudo systemctl status nginx

# Output
● nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Thu 2020-06-18 05:55:53 UTC; 24s ago
       Docs: man:nginx(8)
   Main PID: 2640 (nginx)
      Tasks: 3 (limit: 1119)
     Memory: 5.8M
     CGroup: /system.slice/nginx.service
             ├─2640 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
             ├─2641 nginx: worker process
             └─2642 nginx: worker process

Step:4 – Setup / Configure nginx server

# Disabled default server block
sudo unlink /etc/nginx/sites-enabled/default

# Create Server Block
sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/

# Update Server Block
sudo nano /etc/nginx/sites-available/
server {
    listen 80;
    listen [::]:80;
    return 301;
server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;

  #root /var/www/;
  server_tokens off;
  index index.html index.htm;
  location / {

        # for local server use/ 
        # for live server use your server ip address with nodejs port

        # First attempt to server request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ /index.html =404;

# Save and exit the editor

# Create Symlink
sudo ln -s /etc/nginx/sites-available/ /etc/nginx/sites-enabled/

# Reload Nginx
sudo systemctl reload nginx

Step:5 – Deploy Angular browser bundle

copy the /dist/bowser file in html folder
root /var/www/;

Step:6 – To test restart nginx server u follow the commands below.

nginx -t
# Restart Nginx
sudo systemctl restart nginx
# Reload Nginx
sudo systemctl reload nginx

Step:7 – Install and Run PM2

PM2 is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, to reload them without the downtime and to facilitate common system admin tasks. To deploy angular Universal to production complete step 8.

Just install it using below command

npm install pm2 -g

Step: 8 – Server listen on specific port and IP V4

open server.ts file and server listen on 4000 port with IP v4 127.0,0.1 as mention in nginx configuration file of proxy_pass .

function run(): void {
  const port = process.env.PORT || 4000;

  // Start up the Node server app.listen(3000, "")
  const server = app();
  server.listen(4000, "");
  /* server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  }); */

Step: 9 – Run the node server

Next run PM2 server using command below and keep the server file according you want else you can keep server files in under var/www/ project_name as in angular.js.

Pm2 start server/main.js
#then restart nginx server
Service nginx restart /or
sudo systemctl restart nginx
# Reload Nginx
sudo systemctl reload nginx

Hope you have been solve you requirement as needed. Please give your valuable feedback. If you have any kind of questions or issues about this article, please let me know.


Thank you! Like our Facebook page for more updates.

Spread the love
Tagged , , , , , , , , , , ,

About Chandra

Technology lover. Professionally Software Developer and write some Technical Blog to help newcomer.
View all posts by Chandra →