I am building a mern stack website and I can’t seem to get the front end to show up. The heroku logs don’t show any error messages so it’s hard for me to debug the issue. If there is anything I should be looking out for please let me know.
package.json of root
{
"name": "studySpotsReact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"build": "concurrently \"cd client && npm run build\" \"npm build \"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client"
},
"engines": {
"node": "12.10.x",
"npm": "6.x"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"async": "^3.2.0",
"body-parser": "^1.19.0",
"concurrently": "^5.1.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongoose": "^5.9.7",
"morgan": "^1.10.0",
"path": "^0.12.7",
"react-async": "^10.0.1"
}
}
server.js
const mongoose = require("mongoose");
const express = require("express");
var cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");
const Data = require("./backend/data");
const path = require("path");
require("dotenv").config();
const API_PORT = process.env.PORT || 3001;
const app = express();
//app.use(cors());
const router = express.Router();
// connects our back end code with the database
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true });
let db = mongoose.connection;
db.once("open", () => console.log("connected to the database"));
// checks if connection with the database is successful
db.on("error", console.error.bind(console, "MongoDB connection error:"));
// (optional) only made for logging and
// bodyParser, parses the request body to be a readable json format
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger("dev"));
app.use("/", express.static(path.join(__dirname, "client", "build")));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
router.get("/", (req, res) => {
res.send("hello world");
});
// append /api for our http requests
app.use("/api", router);
// launch our backend into a port
app.listen(API_PORT, () => console.log(`LISTENING ON PORT ${API_PORT}`));