"Cannot GET /" after deploying my MERN project to heroku

Question

When running on local, the app works.. but when I try to deploy it to heroku I receive "Cannot GET /"

I might not run the right scripts, as I understand, npm start script should be "node server.js", but what should the other scripts be?

package.json

{
  "homepage": "changed",
  "name": "changed",
  "private": true,
  "version": "1.0.0",
  "description": "changed",
  "main": "",
  "engines": {
    "node": "12.x"
  },
  "scripts": {
    "heroku-prebuild": "npm install --dev",
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.dev.js --open",
    "start": "node src/server/server.js"
  },

Perhaps the problem is at the server configuration

server.js

const bodyParser = require('body-parser');
const express = require('express');
const mongoose = require('mongoose');
const Country = require('./model/country');
const Restaurant = require('./model/restaurant');


const {resolve} = require('path');
const fs = require('fs');
const path = require('path');
const cookieParser = require('cookie-parser');

const config = {
  mongoURL: process.env.MONGODB_URI || 'mongodb://localhost:27017/reviews',
  port: process.env.PORT || 8000
};

//setup database
mongoose.Promise = global.Promise;
// MongoDB Connection
if (process.env.NODE_ENV !== 'test') {
  mongoose.connect(config.mongoURL, {useNewUrlParser: true}, (error) => {

    if (error) {
      console.error('Please make sure Mongodb is installed and running!');
      throw error;
    } else {
      console.log('connected to database!');
    }
  });
}

const app = express();

//body parser for json. must be done before API routes
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false})); //handle body requests
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// Add backend api routes
fs.readdirSync(__dirname + '/api').forEach((file) => {
  require(`./api/${file.substr(0, file.indexOf('.'))}`)(app);
});

app.use(function (err, msg, req, res, next) {
  console.error(err.stack);
  res.status(500).json({error: err});
});

app.listen(config.port,
  () => console.log(`Listening on port ${config.port}!`));

Webpack configuration as I saw in freecodecamp youtube video

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
  entry: ['babel-polyfill', './src/client/main.js'],
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(gif|png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      },
        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    })
  ]
};

webpack.prod.js

const path = require('path');
const common = require("./webpack.common");
const { merge } = require("webpack-merge");

const outputDirectory = 'dist';

module.exports = merge(common, {
  mode: "production",
  output: {
    path: path.join(__dirname, outputDirectory),
    filename: 'bundle.js',
    publicPath: '/'
  }
});

Can someone explain/find me a source, that explains what happens with the client side on the production server?

Answer 1

you do not have any app.get(path) anywhere in your code.

you can read more here https://expressjs.com/en/guide/routing.html