Vue.js routing with Express

Viewed 942

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 }
})
0 Answers
Related