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
– Shadowlauch, Commented Jun 18, 2018 at 13:12
You can't host server-side code on Github Pages. It's for static sites only: help.github.com/articles/what-is-github-pages — Brandon Taylor
– Brandon Taylor, Commented Jun 18, 2018 at 13:14
@Shadowlauch just now only i tried as you said.. am failed again . 404 not found — Mr. Learner
– Mr. Learner, Commented Jun 18, 2018 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
– Brandon Taylor, Commented Jun 18, 2018 at 13:20

Jan Molak · Accepted Answer · 2018-12-19 21:37:23Z

13

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

edited Dec 19, 2018 at 21:37

Jan Molak

4,5542 gold badges38 silver badges33 bronze badges

answered Jun 18, 2018 at 14:03

Marcio Jasinski

1,46716 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mr. Learner Over a year ago

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

YulePale Over a year ago

Is putting angular in the dist folder what makes it run in the same port with express?

Marcio Jasinski Over a year ago

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.

Hemant Over a year ago

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 myserver.com/books/434334 and when the user clicks the browser refresh button, then the page should stay in myserver.com/books/434334 and not myserver.com/books.

Kerwen Over a year ago

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.

user6437920 · Accepted Answer · 2018-06-18 16:29:47Z

1

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

answered Jun 18, 2018 at 16:29

user6437920

2 Comments

exequielc Over a year ago

to late for me, any solution? to run angular front end and node services on the same port

bigZ Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related