how to run angular 4 app and nodejs api on same port 4200 for both production and development?

Question

I have created angular 4 app and I can run it using ng serve --open and it runs on localhost:4200 , what I want is I have also created api using nodejs in same angular project now I want to run that API at localhost:4200/api so I have tried something like this

my angular 4 and nodejs srtucture look like this

/dist
/server
  /routes
  /server
/src
app.js
package.json

in app.js I used

app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:${port}`));

Once I run using nodemon app.js and go at localhost:3000 it run my angular app and it's fine and than I go at localhost:3000/app/api it's also work fine and good ,

But when I change in angular app it's not auto refresh my app because it's running node app currently for refresh it I need to run ng build and than it will effect my new changes on angular app

So, What I want is to run ng serve --open it will run angular app but not node js api so want to run both and once i change in any from angular app or node js app it must be auto refresh.

Answer 1

You can't have two different applications running on the same port. Angular-cli uses a nodejs server (technically it's webpack-dev-server) behind the scenes when you run ng serve, which means that port is already in use.

There are two possible solutions.

1. Use your node application to serve the static frontend files. Then you can't really use ng serve (this is probably what you'd do when running live).

2. Use nodejs with a different port, and use Angular's proxy config, to have Angular think the api port is actually 4200 (this is probably best during development).

This is primarily a concern during development I reckon, since you most likely wont (and shouldn't) be using ng serve live, so option 2 would be my best recommendation.

To configure a proxy, you create a file in your angular application root directory called proxy.config.json with the following content:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

Then when you run ng serve, you run it with ng serve --proxy-config proxy.config.json instead.

Here's a link to the documentation

---

Here's an alternative when building for production (solution 1 above):

To build in production you use ng build --prod to create a production ready Angular build and then (assuming you use Express on your node server), use something like app.use(express.static('dist/')) as explained in the Express documentation. I'm not using node myself (I'm using .NET Core) so I'm afraid I can't provide much more in terms of details.