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.

CodePudding user response：

it seems like your still using local address (localhost) instead of the actual endpoint. is this might be your problem?

CodePudding user response：

I solved the problem by:

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

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