CODEWITHSUNDEEP
vue.jsherokuvuejs3
erlango3
erlango3

Reputation: 339

VueJS 3 project: "Cannot get" message with all paths but root

I have been trying for the past hour and a half to debug a project of mine.

The project works fine locally. Routes are systematically not working remotely except for one, the root of the project. I get a Cannot GET message in the browser elsewhere (all other paths).

From what I understand from my readings, this might have something to do with vue-router and might be caused by the server.js file I created in the root folder. The problem might have to do with the fact that my routes are dynamic.

const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 3000;
app.listen(port);

This might also be caused by the fact I did not create the project with the history mode (although I'm pretty sure I did). I understand that I might have to go to my webpack config file to solve this, but I don't think I have one.

EDIT: By the way, my VueJS application is just a front-end to the PokéAPI back-end. I didn't build the back-end myself.

Upvotes: 1

Views: 1506

Answers (1)

Mythos
Mythos

Reputation: 1482

Simply creating the project with history mode is not enough. Your browser is trying sending text/html GET requests to the path you navigate to. But your app is a single page application which only has one index.html in /public, so you get 404 errors. Its in the vue-router docs:

To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in.

For Node.js+express setup, you can use connect-history-api-fallback package.

npm install --save connect-history-api-fallback

Then change your server.js file to this:

const express = require('express');
var history = require('connect-history-api-fallback');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(history());
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 3000;
app.listen(port);

In case you don't want to use third-party package you might be able to simply do this:

const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
app.get(/.*/, function (req, res) {
    res.sendFile(__dirname + "/dist/index.html");
});

const port = process.env.PORT || 3000;
app.listen(port);

But I'd recommend using the package as it handles some edge-cases

Upvotes: 2

Related Questions