How to run an Angular app on a Node server?

Question

I would like to run my app with express on a Node server.

My server.js file:

var express = require('express');
var path = require('path');

var app = express();

app.get('/', (req, res) => {
   res.sendFile(path.resolve('dist/my-app/index.html'))
});

app.listen(80, () => {
  console.log('Server started!')
})

But when I'm trying to view my website on localhost nothing appears. Can you help me?

Solution 1

Hope this would help you.

1) Run:

ng build --prod

This will create a dist folder. Used for production.

2) Run:

npm install --save express

To install express and save it as dependency in the project.

3) Create a file in root: ./server.js

4) Copy this code. Don't forget to modify with your name project

const express = require('express');
const http = require('http');
const path = require('path');

const app = express();

const port = process.env.PORT || 3001;

app.use(express.static(__dirname + '/dist/my-app-name'));

app.get('/*', (req, res) => res.sendFile(path.join(__dirname)));

const server = http.createServer(app);

server.listen(port, () => console.log(`App running on: http://localhost:${port}`));

5) To run the server.js file

node server.js

Solution 2

I found a solution !

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

const port = process.env.NODE_PORT || 3000;

const root = path.join(__dirname, 'dist', 'my-app');


app.get('*' ,function(req, res) {
  fs.stat(root + req.path, function(err){
    if(err){
        res.sendFile("index.html", { root });
    }else{
        res.sendFile(req.path, { root });
    }
  })
});

app.listen(port);
console.log('Listening on port '+ port);

Solution 3

You can do this in just very few steps...

1). Run ng build --prod (If you get budgets error than increase the budget in angular.json file according to the error)

2). After above command, a dist folder will be generated containing your project folder, move this project folder which is present inside dist folder from angular project in to your node project say inside public folder (public/your_build_angular_project).

3). Now in your node main file say index.js or app.js, include these lines

const path = require('path');
app.use('/', express.static(path.join(__dirname, 'public/your_build_angular_project')));

4). Now serve your node server then when you hit it, you will get your angular project running

Hope this will help you or somebody else! Thanks.

Comments

[Akber Iqbal]

(1) you get any error at res.sendFile(path.resolve('dist/my-app/index.html'))... (2) also when you do localhost:[80]/ in your browser, what do you see? (3) try changing the port of your app.listen to 8080 instead of 80

[iamcrypticcoder]

Hello I have similar setup. When I hit http://localhost:3000 page loads correctly. But when I try http://localhost:3000/login page loads without CSS. Browser console shows below error - Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).