How run in same port Angular and Node.JS Express?

Question

This is might be possible to duplicate question but not able to understand how to configure FE and BE together run them both.

I've gone through this and this questions, but couldn't understand.

My Node+Express running on 4300

app.post('/postData', function(req, res) {
//some worst logics here :)
});

And

Angular 5 running on 4200. Below is my FE service that calling post endpoint

postData(feData) {
        console.log(feData);
        this.http.post('/postData', feData, this.httpHeader).subscribe((data) => {
        });
    }

What I tried is opened two cmd Windows: one to run server.js by node server.js and another one with ng serve.

Result:

404 not fount(cannot post)

What am I doing wrong.

Why not just add `'localhost:4300/postData'` to your http call? — Shadowlauch, Jun 18 '18 at 13:12
You can't host server-side code on Github Pages. It's for static sites only: https://help.github.com/articles/what-is-github-pages/ — Brandon Taylor, Jun 18 '18 at 13:14
@Shadowlauch just now only i tried as you said.. am failed again . 404 not found — Mr. Learner, Jun 18 '18 at 13:17
You're welcome. I work a lot with Node and Angular, and host my sites on Heroku. It's inexpensive and couldn't be easier to set up. I keep the Angular and Node apps on separate dynos rather than try to run them in the same process. — Brandon Taylor, Jun 18 '18 at 13:20
at least ll be happy if my app running locally. could you pls tell me how to run them perfecly — Mr. Learner, Jun 18 '18 at 13:23
I always keep the front and back-end code as separate applications. It's simpler and faster. I would recommend using Nest.js: https://nestjs.com/ so you can work with TypeScript on both sides. Nest's design is very similar to Angular's modules, so there's less context switching. — Brandon Taylor, Jun 20 '18 at 00:31
I have deployed two applications built with Nest, both with Angular 5+ front-ends to Heroku with no issues. Why do you feel you need the app(s) running on the same port? — Brandon Taylor, Jun 20 '18 at 00:32

score 13 · Accepted Answer · edited Dec 19 '18 at 21:37

What you need to do on this case is move your Angular 5 application to run under express process. You can achieve this following this tutorial - See item 2

I removed some complications but I really recommend you to take a look on the tutorial.

npm install --save express body-parser

Create a file to run your node app like server.js and add following code:

var app = require('app.js');
var debug = require('debug')('mean-app:server');
var http = require('http');

var port = normalizePort(process.env.PORT || '4300');
app.set('port', port);

var server = http.createServer(app);
server.listen(port);
server.on('listening', onListening);

function onListening() {
  var addr = server.address();
  debug('Listening on ' + port);
}

Edit "package.json" to specify how you app will start:

"scripts": {
  "ng": "ng",
  "start": "ng build && node server.js",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

Now, create app.js which will run express:

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var sample = require('./routes/sample.js');
var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'false'}));

//Put your angular dist folder here
app.use(express.static(path.join(__dirname, 'dist')));
app.use('/samples', express.static(path.join(__dirname, 'dist')));
app.use('/sample', sample);

module.exports = app;

It's a good practice to create routes folder for your elements. Create a file routes/sample.js with following content:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('RESTful API');
});

module.exports = router;

Run the server using node command:

npm start

after following up your above config. now am able reach my api successfully ... the mistake what made is that i have not setup common router. thanks alot — Mr. Learner, Jun 20 '18 at 05:12
Is putting angular in the dist folder what makes it run in the same port with express? — YulePale, May 05 '19 at 04:43
Yes. Express will serve a plain html files on the folder where you apply 'express.static' function. It tells to serve those files as a static content. Once you copy your angular build result on this folder, it will serve them. — Marcio Jasinski, May 07 '19 at 19:03
I was able to successfully run both API and website from the same server. But when the user refreshes any page from the browser, it takes them to the home page. What is want is when the user is on page https://myserver.com/books/434334 and when the user clicks the browser refresh button, then the page should stay in https://myserver.com/books/434334 and not https://myserver.com/books. — Hemant, Nov 24 '22 at 15:14
Is there a way to debug the express server and angular project at same time? I add some break points at angular component files, but always failed to trigger. — Kerwen, Aug 11 '23 at 01:30

score 2 · Answer 2 · answered Jun 18 '18 at 16:29

2

By Experience, Keep the Backend or Microservices separate from your frontend applications.

answered Jun 18 '18 at 16:29

Joel Wembo

814
6
10

to late for me, any solution? to run angular front end and node services on the same port – exequielc Jul 31 '20 at 19:46
1

Please explain why! If your app is isolated, i.e. the API is closed to all domains except itself, then this architecture seems fine to me. – bigZ Jan 25 '22 at 15:09

How run in same port Angular and Node.JS Express?

2 Answers2

Linked