Vue.js routing with Express

Question

I've created a portfolio here https://temp-portfolio.herokuapp.com . My issue is that when a user refreshes a page other than index.html or goes straight to another link such as https://temp-portfolio.herokuapp.com/projects the routing doesn't render. I've set up everything using Node.js and Express on Heroku following this guide https://medium.com/@sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8 .

I tried rewriting the server to this https://stackoverflow.com/a/44226999/4178637 but the app crashes.

server.js

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

index.js

import Vue from 'vue'
import Router from 'vue-router'

import Nav from '@/components/Nav'
import Home from '@/components/Home'
import Projects from '@/components/Projects'
import Urban from '@/components/Urban'
import Seizure from '@/components/Seizure'
import Explosion from '@/components/Explosion'
import Decadence from '@/components/Decadence'
import Threshold from '@/components/Threshold'

Vue.use(Router)
Vue.component('app-nav', Nav)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/projects',
      name: 'Projects',
      component: Projects
    },
    {
      path: '/projects/urban',
      name: 'Urban',
      component: Urban
    },
    {
      path: '/projects/seizure',
      name: 'Seizure',
      component: Seizure
    },
    {
      path: '/projects/explosion',
      name: 'Explosion',
      component: Explosion
    },
    {
      path: '/projects/decadence',
      name: 'Decadence',
      component: Decadence
    },
    {
      path: '/projects/threshold',
      name: 'Threshold',
      component: Threshold
    }
  ],
  mode: 'history'
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/styles/styles.scss'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Answer 1

I realize this question is old, but I ran into this same issue and wanted to post the solution I came across.

When your users refresh the app from a Vue route, you want Express to always serve your static Vue app files. express.static can do that (see docs ). I'm assuming you're using something like npm run build to build your Vue project into static files. Place those in a directory called /public within your server, then tell Express to serve those contents. For example:

app.use('/index', express.static('public'))

You'll need to use this pattern for each of your Vue routes, so in your case, adding this to server.js should make Express recognize those routes as valid and allow the user to continue using the app when they refresh:

const vueRoutes = [
  "/",
  "/projects",
  "/projects/urban",
  "/projects/seizure",
  "/projects/explosion",
  "/projects/decadence",
  "/projects/threshold",
];

vueRoutes.map((route) => app.use(route, express.static("public")));

Probably a few years too late for this to help OP, but hope others find this helpful down the road.