How to run ng serve on port 80

Question

In my package.json file I have:

"scripts": {
  "start": "concurrently \"ng serve --host something.mydomain.com --port 4200 --live-reload false --env=prod\" \"gulp\""
},

When I run npm start then after a few seconds I am able to access my project in my browser at http://something.mydomain.com:4200

I would prefer to access the same system by going directly to https://something.mydomain.com (i.e. without the port number)

I have amended my package.json to:

"scripts": {
  "start": "concurrently \"ng serve --host something.mydomain.com --port 80 --live-reload false --env=prod\" \"gulp\""
},

But when I run package.json I get:

Port 80 is already in use. Use '--port' to specify a different port.

If I run lsof -i :80 then nothing comes up so I am sure that port 80 is not taken. I suspect the issue is that port 80 is a protected port and as I am logged in as ec2-user then I don't have the correct permissions?

How can I run my project over port 80?

Solution 1

Personally I wouldn't serve an Angular application in production using the Angular CLI (the ng serve command). A better option is to build the project (ng build) and serve the dist folder. Doing so you would have a much faster application as it wouldn't be "copiled on the fly" and it would't interact with the Angular CLI.

However if you'd like to stick with your approach, in order to run the application on a standard port (so that it hasn't to be specified; 80 for an HTTP website, 443 for an HTTPS one), you will have to modify a different file based on the Angular version you are using:

• >= Angular 6:

  edit the angular.json file and in the serve object (under <yourProjectName> object), add this piece of code:

  "options": { "port": 80 }

• Angular < 6.0:

  edit the angular-cli.json file and in the defaults object, add this piece of code:

  "serve": { "port": 80 }

Edit: If application is served using the ng serve --prod command, the following warning will be printed:

**************************************************************************************** 
This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************

Solution 2

I will assume that you are running your project in terminal. Try adding sudo before the ng serve, because port 80 needs to be run as root.

Comments

[Michael Tsirulnikov]

Using port 80 isn't safe anyway, i assumed you are using just dev mode. If you are working on prod, then consider using port 443.

[Chris]

Yep, this was actually going to be my next task. I think my original issue still stands whether I want to use port 80 or 443.

[Chris]

This is very helpful. It seems like ng build is definitely the best way to go. Am I right in thinking that I run ng build, this creates all the necessary files in a directory called dist. I then set up Apache to serve this directory and this will work by default on port 80. If I then want to add an SSL cert then I just add this as I would for any regular site that I host, the fact that it's Angular doesn't make any particular difference. Thank you again

[Lorenzo Montanari]

@Chris Yes, exactly. After you have compiled the Angular application, you will have several files in the the dist folder. Those files can be served as any other text file (such as HTML, JS, ...) using any server/ framework (nodejs, .net, ...) on any platform/ provider that allow you to host a website

[Abdul Rehman Khan]

how to do this using putty?

[Abdul Rehman Khan]

It is still giving the error when I run ng serve: Port 80 is already in use. Use '--port' to specify a different port. I have deployed it on ubuntu 16.04 @Chris I have also deployed dist folder but how do I set up my apache to serve my directory? Currently, I am using xx.xxx.xx.xx:4200 Please help I am stuck into this for over a month!