CODEWITHSUNDEEP
javascriptnode.jsvue.js
levitas111
levitas111

Reputation: 107

Express Server routing configuration for Vue App

I want to serve my Vue app with an Express server (on production environment). I think there is something wrong (missing?) with my current configuration, since it's not running the App like it should.

This is my configuration:

simple-tasks-organizer-frontend/package.json

{
   "scripts": {
    "start-dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start-prod": "node server.js"
  },
}

simple-tasks-organizer-frontend/server.js


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

var PORT = 8080;
var app = express();
app.use(history());
app.listen(PORT);

simple-tasks-organizer-frontend/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Signin from '@/components/Signin.vue'
import Signup from '@/components/Signup.vue'
import Records from '@/components/tasks/Tasks.vue'
import Automations from '@/components/automations/Automations.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/tasks',
      name: 'Tasks',
      component: Records
    },
    {
      path: '/automations',
      name: 'Automations',
      component: Automations
    },
    {
      path: '/',
      name: 'Signin',
      component: Signin
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup
    }
  ]
})

When I enter http://localhost:8080/ I get the following error message: Cannot GET /.

I hope some one of you can help me out with this issue!

Thanks in advance!

Upvotes: 0

Views: 670

Answers (1)

Ivan Klochkov
Ivan Klochkov

Reputation: 702

In fact you dont have to serve your Vue app with express server.

Vue routing has nothing to do with Express.js routing.

Vue app, once built can be deployed to any static server (apache, nginx, S3, etc.)

If you are looking for all-in-one solution with server-side rendering you shall consider using nuxt.js

If you still need to server your app with express take a look at express-serve-static-core. And keep in mind that express should server your built app version.

Upvotes: 1

Related Questions