#StackBounty: #node.js #vue.js #express #heroku MEVN stack unable to deploy

Bounty: 50

I have a project where I try to locally and on Heroku run a MEVN application. Both are not working at the moment.

I have my server.js file in the main folder. Then inside the ‘client’ folder is the Vue 3 project. Inside there I have run npm run build which created a dist folder containing the index.html file.

When I run both locally and on Heroku I can go to ‘/api/users’ and the JSON is shown in the browser. But when I navigate to ‘/’

I have tried changing the public in the server.js to dist but this did not fix the problem.

My server.js file looks like this:

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const path = require("path");
const cors = require("cors");

const app = express();

//Bodyparser Middleware

app.enable("trust proxy");

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Credentials", true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');

//DB Config
const db = require("./config/keys").mongoURI;

//Connect to Mongo
  .connect(db, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  .then(() => console.log("MongoDB Connected"))
  .catch((error) => console.log(error));

app.get('/api/users', (req, res) => {
  res.json({ user: 'test' })

const port = process.env.PORT || 3000;

if (process.env.NODE_ENV === "production") {

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));

app.listen(port, () => console.log("Server starter on port " + port));

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.