How To Send Headers In Express [mean]

I'm a beginner in Express. So I might've failed to frame the question properly. I have created a MEAN application wherein I've separated my frontend and backened. Frontend runs on

Solution 1:

Since your assets are inside dist/application folder, Use app.use(express.static(path.join(__dirname, 'dist/application')));

To match all web app routes, Use app.get('*', function(req, res) { res.sendFile(path.join(__dirname, 'dist/application/index.html')); }).

This a generic route and will be called into action only if express can't find any other routes and always serve index.html. For example any valid /api route will never reach this handler, as there a specific route that handles it.

Final code for server.js

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


const api = require('./routes/api');

const PORT = 3000;
const app = express();

app.use(express.static(path.join(__dirname, 'dist/application')));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use('/api', api);

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

app.listen(PORT, function() {
  console.log('Server listening on PORT '+PORT);
});

A few points to not.

To serve static files, you need not set any headers manually. Express looks up the files in the folder (dist folder in your case) you set as static directory with the express.static middleware function. Express also sets the response headers based on the file extension.

So you don't need express.static.mime.define in your code anymore.

In your case you have defined app.use(express.static(path.join(__dirname, 'dist'))); which listens for static files at dist folder. In this app.use command, you haven't used a mount path which means that all the requests will go through the static middleware. If the middleware finds an asset with the same name, path and extension in dist folder it returns the file, else the request is passed to the other route handlers.

Also, If you are using static middleware, as long as there is an index.html in dist folder (immediate child of dist folder), your route handler for "/" will never get invoked as the response will be served by the middleware.

If you don't have an index html file in dist folder(immediate child of dist), but it's present somewhere in subfolders of dist, and still you need to access it using root path "/", only then you need a route handler for path "/" as below.

app.get("/", function(req, res) {
  res.sendFile(path.join(__dirname, "dist/application/index.html"));
});

JS files referred using "./" in dist/application/index.html are referred relative to dist folder itself and NOTdist/application folder.

You can refer this REPL for updated code 👉. https://repl.it/repls/SoreFearlessNagware

Try below urls

/api/myarticles - Rendered by "/api" route handler

/api/myarticles.js - Rendered by static asset middleware because the file exists in dist/api folder

/ - rendered using "/" route handler and res.sendFile because index.html doesn't exist in dist folder.

/test.js - Rendered using static middleware because file exists in dist folder

Additional links for reference.

https://expressjs.com/en/api.html#res.sendFile

https://expressjs.com/en/starter/static-files.html

Solution 2:

1.Build your angular project, either inside or outside the server folder using ng build cmd.

2.To build your project inside server, change the dist-folder path in angular-cli.

3.To change path, either use cli cmd or edit the angular-cli.json file's "outDir": "./location/toYour/dist" Or by using this cli cmd ng build --output-path=dist/example/

4.Then In your server root file include the static build/dist folder using express.

5.Like this app.use(express.static(path.join( 'your path to static folder')));

6.Now restart your server.