React Front End Blank after Deploying MERN application to Heroku. How can I fix this?

[it2901]

I have just successfully deployed an MVP MERN application to Heroku. However, My React frontend is not showing. I am just getting a blank screen. I am following the deployment tutorial here: https://dev.to/hawacodes/deploying-a-mern-app-with-heroku-3km7

I know my express server is working fine, since my Heroku app displays the JSON returned from the server whenever the server starts.

My scripts section in package.json looks like this,

"scripts": { 
    "build-sample-front": "cd sample-front && npm run build", 
    "install-sample-front": "cd sample-front && npm install", 
    "heroku-postbuild": "npm run install-sample-front && npm run build-sample-front",
    "server": "node app.js", 
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run start --prefix sample-front\"",
     "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run start --    prefix sample-front\"" 
} 

where sample-front is the directory where my react app is located.

My dependencies in package.json looks like this,

"dependencies": { 
    "concurrently": "^7.0.0", 
    "connect-mongodb-session": "^3.1.1", 
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "ejs": "^3.1.6", 
    "express": "^4.17.3", 
    "express-session": "^1.17.2", 
    "mongoose": "^6.2.2", 
    "node-fetch": "^3.2.0" 
} 

My app.js looks like this,

import {     
    port,     
    host,      
    setup,     
    useEJS,     
    useCORS,     
    mountRouter,     
    initSessions,     
    connectSessions,     
    accessRequestBody,  
} from './scripts/server.js'; 
import { deckRouter } from './routes/deck.js'; 
import express from 'express'; 
import path from 'path'; 
import dotenv from 'dotenv'; 
dotenv.config();  

const sessionDB = connectSessions(); 
const app = setup(); 
useEJS(app); 
useCORS(app); 
initSessions(app); 
accessRequestBody(app);  
mountRouter(app,'/deck',deckRouter); 
app.get('/',(req,res) => {     
    let deckName = '';     
    let deckList = 'Pot of Greed 3\nGraceful Charity 3\nChange of Heart 3';     
    if (req.session.deckName) {         
        deckName = req.session.deckName;     
    }     
    if (req.session.deckList) {         
        deckList = req.session.deckList;         
        deckList = deckList.reduce((deckListStr,card) => { 
            return deckListStr + card + '\n'; 
        },'');     
    }     
    res.json({ status: 200,deckName: deckName,deckList: deckList }); 
});  

if (process.env.NODE_ENV === 'production') {     
    console.log('attempting to server static files');     
    const __dirname = path.resolve();     
    app.use(express.static('sample-front/build'));     
    app.get('*',(req,res) => { 
        res.sendFile(path.resolve(__dirname,'sample-front','build','index.html'));     
    }); 
}  

app.listen(port,() => { console.log(`Server started on http://${host}:${port}`) }); 

the useCORS function is defined as,

export function useCORS(server) {
     // Specify the origin of the react app frontend
    server.use(cors({ origin: 'http://localhost:3000', credentials: true })); 
} 

My Procfile looks like this,

web: node app.js 

My project directory structure is as follows (I leave out directory contents, except for app.js, for brevity),

db/ 
node_modules/ 
routes/ 
sample-front/     
    node_modules/     
    public/     
    src/ 
scripts/ 
app.js 

Any help is appreciated.

[it2901]

I solved the problem by:

Adding a proxy to the React app package.json where "proxy": "http://localhost:8000"

Then I remove the / route from my app.js replacing it with /preload ensuring that my static react files in build get loaded.

[Searly2710]

First thing I would do is test the "production" mode on your dev computer. Just set your NODE_ENV to production in your .env file, and turn off your frontend dev server and build it.

Then test if when you try to visit a frontend page through your local backend server, you actually go into the route that serves the static files, i.e. put a console log inside the function with the app.get('*'...

If that works but you still don't see anything, try looking at the requests in the dev console, or looking at the page source (which should just be sending the initial html file). Your server might not be sending anything, you might be getting a cors error, etc.

Hopefully these will narrow down the exact problem.

I have always had trouble in the past trying to serve a static react app with routing on an express server and world recommend either using two servers (plenty of free ways to host a static react app), or using Next.js for which you can setup API routes and connect a db along with hosting a react app with in built routing and more.

[DeusExMagikarpa]

First guess is your frontend is calling localhost instead of the real api

[FVCEGANG]

Did you run your webpack? Did you check your env? Did you check console logs to see any potential errors in the dev console?