How to deploy angular Universal to production?

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

Follow this link ADD ANGULAR UNIVERSAL TO EXISTING PROJECT
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

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

Follow below articles as needed

• Add angular universal to existing project
• How To Solve LocalStorage Is Not Defined In Angular?
• How to solve window is not defined in angular universal?
• Angular Universal for your new application
• DYNAMICALLY ADD META TAGS BASED ON ROUTE IN ANGULAR
• ANGULAR UNIVERSAL WITH SEO FRIENDLY PAGE SETUP

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/example.com

# Update Server Block
sudo nano /etc/nginx/sites-available/example.com

server {
    listen 80;
    listen [::]:80;
    return 301 https://your-site-name.com;
}
server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;

  #root /var/www/example.com/html;
  server_name https://your-site-name.com;
  server_tokens off;
  index index.html index.htm;
  location / {

        # for local server use/ 
        proxy_pass http://127.0.0.1:4000;
        # 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/example.com /etc/nginx/sites-enabled/example.com

# Reload Nginx
sudo systemctl reload nginx

Step:5 – Deploy Angular browser bundle

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

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 127.0.0.1

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, "127.0.0.1")
  const server = app();
  server.listen(4000, "127.0.0.1");
  /* server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  }); */
  //require('https').createServer(app).listen(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/example.com/html/dist/project_name/server/server.js. 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.

Related articles

• api request is calling twice in angular universal
• window is not defined in angular universal?
• LocalStorage Is Not Defined In Angular Universal?
• Add angular universal to existing project

References

• Server-side rendering (SSR) with Angular Universal
• NGINX Reverse Proxy

Thank you! Like our Facebook page for more updates.