How to deploy Angular 18 SSR on Nginx manually

I have built project home-aap with Angular 18 and SSR enabled. Now Angular 18 comes with built in SSR, So after executing ng build it has generated below folders: [enter image description here][1]

/var/www/dist/home-app/browser

/var/www/dist/home-app/server

Below is home-config for Nginx:

server {
listen 80;
server_name localhost; # Change to your domain

# Serve static files directly from the browser build
location / {
root /var/www/dist/home-app/browser; # Adjust to your actual path
try_files $uri $uri/ /index.html; # Fallback to index.html for SPA
}

# Serve dynamic SSR content for specific routes
location /ssr {
proxy_pass http://localhost:4000; # Node server
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}


Above is successfully linked in sites-enabled folder: [enter image description here][2]

Also, server.mjs is running at localhost:4000: [enter image description here][3]

So if I visit localhost, Nginx throws 403: [enter image description here][4] But if I visit http://localhost:4000/, app is loading successfully: [enter image description here][5]

But why its not loading at localhost. I have checked Angular official page but there is not much much regarding manual deployment on server or VPS. https://angular.dev/tools/cli/deployment

It would be really helpful if anyone can suggest how to properly deploy angular 18 with SSR activate on Nginx on server/VPS manually.

Thanks in advance. [1]: https://i.sstatic.net/BOF3LDRz.png [2]: https://i.sstatic.net/lQKzVbf9.png [3]: https://i.sstatic.net/jtDJYl5F.png [4]: https://i.sstatic.net/26x62XzM.png [5]: https://i.sstatic.net/CNjjQlrk.png

Continue reading...