CODEWITHSUNDEEP
expressherokuvue.js
kshatriiya
kshatriiya

Reputation: 1159

express server for serving Vue.js html file

I wrote a Vue application using the CLI. I’ve run the build command and got the dist folder with html file and the associated js/css file etc. Now I want to host the app on heroku with node/express sever, what I’ve written only half works.

For the record I’m using the vue router to render different components at different routes.

const routes = [
  {path: "/", redirect: "/home"},
  {path: "/home", component: body},
  {path: "/home/new", component: create},
  {path: "/home/entry/:id", component: blog},
  {path: "/register", component: register},
  {path: "/logout", component: logout},
  {path: "/home/user/:userprofile", component: userprofile}

]

My vue application calls a separate backend API for all its data so the express server I’m requesting is only to server the html file across all routes.

This is what I have found from google:

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
var port = process.env.PORT || 5000;

app = express();

app.use(serveStatic(__dirname + "/dist"));

app.listen(port);

It works when I’m going to “/” route but when I go to “/home” or similar it returns an error “cannot GET /home” or similar.

Can someone write me a short and simple express sever app for deploying vue on Heroku please?

Upvotes: 1

Views: 2198

Answers (1)

Lassi Uosukainen
Lassi Uosukainen

Reputation: 1688

Most likely you are missing configuration on your web server to redirect all requests to "/". VueJs router takes responsibility after that but it doesn't receive requests unless you explicitly configure your web server to do so.

Here is a Vue Router documentation page with short code snippets for different web servers that you will need to add to your web server configuration.

Upvotes: 1

Related Questions