Solveduniversal starter How to deploy Angular Universal to production (port 80)

After make the app, how to deploy it? I see that on package.json there is many commands to build, but how to make it right to put on production in port 80?

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "generate:prerender": "cd dist && node prerender",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:ssr": "node dist/server"
  }
17 Answers

✔️Accepted Answer

m98
138

The @kalyan1102 answer is correct.

But here is the summery if you're confused:

  1. npm run build:ssr
  2. Move the dist over to your server
  3. install PM2
    npm install pm2 -g
  4. On your server, use PM2 to run the server bundled app
    pm2 start dist/server.js
  5. If you're using Nginx, or other web servers, make sure to redirect requests to the port that the app started with PM2 is listening on.

Other Answers:

if you run "npm run build:ssr" it will create a dist folder which you will need to place on server. Additionally for some of the module dependencies, you also need to place package.json and run npm install to install node modules.

Once you are done with all these you can then run "npm run serve:ssr" ( better to use pm2 which will take this process and don't exit ) but it will start pointing to your server's 4000 port. You can install nginx which is better to give a proxy to port 4000 of your application. so Nginx port 80 but it will proxy to port 4000 in background. It always better to use a proxy for node app rather than directly exposing the app. You can also load balance between multiple app in this way.

Related Issues:

36
universal starter How to deploy Angular Universal to production (port 80)
The @kalyan1102 answer is correct After make the app how to deploy it? I see that on package.json th...
13
universal starter Can't get current request (or more specifically cookies)
Fixed by adding empty array to deps for the provider: Hi again ! Going deeper and deeper in the use ...
13
universal starter Error: No module factory available for dependency type: ContextElementDependency
You can get this working off a project that has webpack already installed by doing: 1.npm ls webpack...
11
universal starter How add a translate module to universal starter?
So I lost half a day figuring out how to use ngx-translate with universal-starter therefore find out...
6
universal starter not implemented in Parse5DomAdapter: getElementsByTagName
Okay just in case anyone else lands here and needs this Hi I may be running away with things that ar...
3
universal starter How to set meta data in index.html
@nicky-lenaers My solution should work on server-side at leats it works for me Here i have seen angu...