How to send headers in Express [MEAN]

Question

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 port:4200 and server runs on port:3000. I wanted to run both frontend and backend on same port as part of deployment. I'm getting MIME type errors, someone told me that there is some problem with my server environment. Maybe I'm not sending headers properly. Here is my code: I have mentioned tried solutions in the code itself as <----TRIED THIS

server.js

const express = require('express');
express.static.mime.define({'application/javascript': ['js']}); <----TRIED THIS

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

// express.static.mime.define({'application/javascript': ['js']}); <----TRIED THIS

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

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

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

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

app.get('/', function(req, res) {

  // res.send('Hello from the server'); <----TRIED THIS
  // res.writeHead(200, {'Content-Type': 'text/html'}); <----TRIED THIS
  // res.set('Content-Type', 'text/plain'); <----TRIED THIS
  // res.setHeader("Content-Type","application/json"); <----TRIED THIS

  res.sendFile(path.join(__dirname, 'dist/application/index.html'));
})
app.listen(PORT, function() {
  console.log('Server listening on PORT '+PORT);
});

api.js For instance I'm showing you GET function only

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const db = <my db string>;
const jwt = require('jsonwebtoken');

mongoose.connect(
 ...
)

function verifyToken(req, res, next) {
 ...
}

router.get('/myarticles', (req, res) => {
  var person="Tanzeel Mirza";
  console.log('Get request for tanzeel articles');
  Article.find({contributor: person}, (error, article) => {
    if(error) {
      console.log(error)
    }
    else {
      if(!article) {
        res.status(401).send('Invalid email')
      }
      else if(2>4) {
        console.log("test passed");
      }
      else {
        res.json(article);
      }
    }
  })
})

module.exports = router;

But still I'm getting

Loading module from “http://localhost:3000/runtime-xxx.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “http://localhost:3000/polyfills-xxx.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “http://localhost:3000/main-xxx.js” was blocked because of a disallowed MIME type (“text/html”).

Please correct me.

PS: I asked separate questions for MIME error here. But no answers.

Answer 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 NOT dist/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

Answer 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.