Create-react-app: Heroku app returns Not Found when going to specific url Route

[muigaiunaka]

Hello !
I was hoping to receive help with an issue I am having after deploying my app to Heroku. I built my front end with Heroku and my server side code uses Express and node. When testing locally, I can access a specific route, for example localhost:3000/post and it loads as expected. When I go to my site at https://treasury-of-weary-souls.herokuapp.com/post , the page returns Not Found.

My basic folder setup is like so:
project/
---- app/
-------- src/
---- backend/
-------- index.js

Here's what I have in my server side code:

// GLOBAL VARIABLES
const express = require('express');
const path = require("path");
const bodyParser = require("body-parser");
const morg = require("morgan");
const States = require('./states.js');
const stringify = require("json-stringify-pretty-compact")

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

// logging for request to the console
app.use(morg("dev"));

// Configure body parser for AJAX requests
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// Serve up static assets (usually on heroku)
if (process.env.NODE_ENV === "production") {
    app.get('/map', (req, res) => {
        res.sendFile(path.join(__dirname + '/app/build/index.html'));
    });
    app.get('/post', (req, res) => {
        res.sendFile(path.join(__dirname + '/app/build/index.html'));
    });
    app.use('/', express.static("app/build"));
    app.use(express.static(path.join(__dirname, 'app/build')));
    // app.get('/*', function (req, res) {
    //     res.sendFile(path.join(__dirname, 'build', 'index.html'));
    // });
}
app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname + '/app/build/index.html'));
});

app.listen(PORT);

console.log(`App listening on ${PORT}`);

[jamesmosier]

If this helps, here is what I have using CRA & Express:

Project structure:

-- build
-- public
-- src
-- ...other CRA files
server
-- app.js

and then inside app.js (my Express server):

app.use(express.static(path.join(__dirname, '/../client/build')));

app.use('/api/some_api_endpoint', oneOfMyRoutes);

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/../client/build/index.html'));
});

so you'll see, I have to go up a directory in order to reach my client/build folder (see: __dirname + '/../client/build/index.html').

[Timer]

Hi there! I'm sorry to say, but we don't have enough time to help with general-purpose questions.

You can find a wealth of information and people willing to help in numerous React Communities.

Thanks!

Visiting your site looks like you have it resolved, though.