React application not loading up after Heroku deployment

Question

So I have created a MERN stack application which works fine locally. After deploying to Heroku, the React page does not load up.

The "heroku logs" gives me an error:

2020-08-01T07:18:59.922864+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2020-08-01T07:19:00.006437+00:00 heroku[web.1]: Process exited with status 143

The process would then try spinning up my application again and it gives me the previous error and this error:

2020-08-01T07:20:20.368320+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=andy-keeper-app.herokuapp.com request_id=138cb3bc-3b1f-4443-88ff-f4348003cfc5 fwd="8.3.88.41" dyno= connect= service= status=503 bytes= protocol=https

It seems like the second error has a problem with my DB, I am more interested in how to get the React page to show up

I have research the first problem, and it seems to be a problem with a free dyno. However users asking about this issue seem to get it after their application in idling after 30 minutes. My application does not boot up at all.

Is there any way to view more error logs in order to find my problem? Or has anyone had a similar experience.

Here is my server.js file, any other files you need please ask and I'll update it right away

Server.jS

require("dotenv").config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// Been defined in .env and Heroku Config Logs
const url = process.env.ATLAS_URL;

app.use(express.static(path.join(__dirname, "client", "public")));

mongoose.connect(url, {
  useNewUrlParser: true,
  useCreateIndex: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
});

const connection = mongoose.connection;
connection.once("open", () => {
  console.log("MongoDB database connection established successfully");
});

// Routes
const userRouter = require("./routes/user");

app.use("/user", userRouter);

if (process.env.NODE_ENV === "production") {
  console.log("Running in production mode");
  app.use(express.static(path.join("client", "public")));
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname + "/client/public/index.html"));
  });
} else {
  console.log("Running in development mode");
}

app.listen(PORT, () => {
  console.log("Server is running on port: " + PORT);
});

Here is my package.json file for the server-side

{
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install && npm run build"
  },
  "engines": {
    "node": "12.18.0"
  }
}

Thank you!

React application not loading up after Heroku deployment

0 Answers