16

I've build a simple app using Vue.js and their vue-cli webpack.

I've used vue-router to control navigation around the site with the different views. This works fine when running locally.

I'm now wanting to deploy this onto Heroku, however the urls are no longer working. I've tried implementing middlewares, but have hit a brick wall!

I'm looking for something that might lead me along the right lines to configure node.js/express to run the app correctly.

Many thanks,

James

James Clare
  • 553
  • 1
  • 4
  • 11
  • Did you add `mode: history` in your router and did you configure your server. See here (https://router.vuejs.org/en/essentials/history-mode.html) to configure Node.js(Express) – Vamsi Krishna May 28 '17 at 11:33
  • I did. So when running locally, "npm run dev" on localhost:4444, it works perfectly. When running on Heroku, I get the homepage, but I get "CANNOT GET /login" when loading any other page. – James Clare May 28 '17 at 11:37
  • Even after configuring your server? – Vamsi Krishna May 28 '17 at 11:38
  • 2
    That's what I need help with. I can't quite work out what should be in server.js. The links work as expected when clicking on them as a router-link, but not when directly visiting the path. – James Clare May 28 '17 at 11:40
  • 1
    See this link( https://github.com/bripkens/connect-history-api-fallback ) – Vamsi Krishna May 28 '17 at 11:41
  • Usually you should just render index.html for any request: `const app = express(); app.use(function (req, res, next) { return res.render('index'); });` – Egor Stambakio May 28 '17 at 14:16

1 Answers1

33

For those in a similar situation, now working using:

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

const staticFileMiddleware = express.static(__dirname);
app.use(staticFileMiddleware);
app.use(history({
  disableDotRule: true,
  verbose: true
}));
app.use(staticFileMiddleware);

const port = 5555;
app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`);
});

You can learn more about connect-history-api-fallback

Fusseldieb
  • 1,324
  • 2
  • 19
  • 44
James Clare
  • 553
  • 1
  • 4
  • 11
  • 1
    Well good you provided an answer by referring to the link . This would help any future users with same sort of doubt – Vamsi Krishna May 28 '17 at 11:58
  • 2
    The static middleware _is_ actually needed twice: once to prevent static files from 404ing, and again to resolve `index.html` after `history` redirects there. And note this must all be done after defining other Express routes. – spiffytech Oct 02 '17 at 16:14
  • I was getting same error "CANNOT GET /page" when running with server. This worked for me! – Jhonatas Kleinkauff May 21 '18 at 14:10
  • It worked for me too. In my case I needed to add `express.static(path.join(__dirname, 'dist'))` for the staticFileMiddleware because I was serving at dist folder. – CleitonCardoso May 09 '20 at 13:09
  • @spiffytech Thank you for the explanation. It's insane how something that vital isn't mentioned in the documentation. – m4heshd Sep 16 '21 at 23:40