How to use vuejs routing with history fallback and expressjs routes

Question

I've been stuck on this for a number of weeks and I can't figure it out. It's driving me crazy... Ive read numerous tutorials and it sounds like it's something that should work!

I have an expressjs server setup and a vuejs app. I want to be able to serve the vuejs routes with history browser mode and I also want to be able to setup server side routes for my api layer.

If I disable the history mode, everything works ok - but I need to enable history mode, so that I can use auth0 library and callbacks. Callbacks do not allow # in the url.

Here is my code:

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const logger = require('morgan');
const history = require('connect-history-api-fallback');

const app = express();

app.use(require('connect-history-api-fallback')())
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(history({
  verbose: true
}));

app.get('/api', (req, res) => res.send('Hello World!'))
app.use('/', express.static(path.join(__dirname, 'dist')));

var port = process.env.PORT || 8080;
app.listen(port);
console.log('server started '+ port);

For the code above, the vuejs app is sitting under /dist and all the routes for that one work. But when I try to hit /api - it is also being redirected to the vuejs app.

Any help would be greatly appreciated! I'm at the point where I'm thinking its just not possible.

Answer 1

I was having the same issue. I fixed it by adding app.use(history()) after my api routes, but before app.use('/', express.static(path.join(__dirname, 'dist')));.

So I think for you it'd be like

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const logger = require('morgan');
const history = require('connect-history-api-fallback');

const app = express();

app.use(logger('dev'));
app.use(bodyParser.json());

app.get('/api', (req, res) => res.send('Hello World!'));
app.use(history({
  verbose: true
}));
app.use('/', express.static(path.join(__dirname, 'dist')));

var port = process.env.PORT || 8080;
app.listen(port);
console.log('server started '+ port);

This answer helped me: https://forum.vuejs.org/t/how-to-handle-vue-routes-with-express-ones/23522/2