Angular CLI add express server

Question

I am using Angular CLI and additionally I added a server folder which includes the server.js file.

1) I created the folder server within the src folder

2) npm install express --save added the express dependencies

3) Created within the server folder the server.js file

const express = require('express');

var app = express();  
var staticRoot = __dirname;  

app.set('port', (process.env.PORT || 3000));  

app.use(express.static(staticRoot));

app.get('/', function(req, res) {
   res.sendFile('index.html', { root: path.join(__dirname, '../') });
});

app.listen(app.get('port'), function() {  
    console.log('app running on port', app.get('port'));
});

4) My index.html file is the same path which Angular CLI created

->src->index.html

Well my question is what is the next step to run my application over the server express server?

Can I also add the node server/server.js as script to run the server and client at the same time? After ng build I am not getting a server.js file within the dist folder?

score 2 · Answer 1 · answered Oct 22 '16 at 15:59

The index.html that you are referencing is used in the build process, not locally. As a standalone angular app, ng serve will run angular on localhost:4200 by default. To make it point to your back end server, You can use a proxy to make angular requests going to /api redirect to your server on localhost:3000. Locally, you'll just have to run the server and angular apps separately.

In a production environment, you'll need to serve static files from your /dist directory. Your server has to check that it's running in production, and serve files using path.resolve:

const path = require("path");
const express = require('express');
const app = express();  

app.set('port', (process.env.PORT || 3000));
app.set('env', (process.env.NODE_ENV || "local"));

if (app.get('env') === 'production') {

    // the relative path from src/server/server.js
    const staticRoot = path.resolve(__dirname, '../../dist');

    app.use(express.static(staticRoot));
    app.get('/', function(req, res) {
       res.sendFile('index.html', { root: staticRoot });
    });
}

app.listen(app.get('port'), function() {  
    console.log('app running on port', app.get('port'));
});

Ok, many thanks for the information. But 1) With ng serve I am running now over :4200 port the :3000 server. 2) What do you mean with I need to run the server and angular apps separately? npm start isn't do it with the script automatically? What I don't understand how can I run now productive? — Tony, Oct 22 '16 at 17:58
@Tony I just meant that you have to run two terminal windows. One running the angular app (4200), and one running the express app (3000). It would probably be more helpful to have two top level folders, each with their own `package.json`, so that you can decouple your dependencies. — chrisbajorin, Oct 25 '16 at 00:27

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

You should place the static files inside the public directory and use path.join() from NodeJS path module. You will be able to handle the path properly there.

See the following links:

res.sendFile absolute path

https://scotch.io/tutorials/use-expressjs-to-deliver-html-files

edited May 23 '17 at 12:17

Community

1
1

answered Oct 22 '16 at 14:46

somnathbm

649
1
9
19

Angular CLI add express server

2 Answers2