[Solved] Deployment Problem - Showing Backend

#1

I’ve been struggling with this issue for at least 2 weeks now, so any insight would be greatly appreciated!

After building a MERN stack application (and working successfully), I wanted to deploy my application onto Heroku. After making the appropriate changes to my Server.js file and package.json files, I was able to push onto Heroku. The issue I face is that the Heroku application only shows my backend database information, and not my client React application.

I’ve opened the heroku bash terminal and see that there indeed is a build folder with index.html in the client folder.

I cannot figure out what is wrong. Any one has run into this issue and/or have a resolution?

Repo: MERN Stack App
Heroku App: https://whispering-falls-45660.herokuapp.com/

#2

You should rename your build to public and put it in your root directory.

#3

the heroku postbuild is creating the build folder with:

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

So are you suggesting that I ask heroku to put this build folder elsewhere?

#4

ok looks like the log says it’s already building it for you.

Here is how I deployed it. https://github.com/shimphillip/meteorite-explorer/blob/master/server.js

I built my client into a public folder, placed it in my root directory. Then in my server.js, I am redirecting all the incoming url requests to index.html in public folder which will take care of client side routing.

Hopefully this helps.

#5

I see, so you essentially created a public folder copied from the client folder that you put in the root folder. Then you ran npm run build to create the build folder which you put into the public folder in the root directory.

You’ll have to run a build every time essentially you want to push to heroku?

#6

Yes I have to build my client everytime. I am sure it’s easy to automate it and I will have to look into that eventually :slight_smile:

#7 
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

But does above really go into client folder and do the build ? Can’t really say I know --prefix should technically switch to the client directory, but this below is what I use and works for me whenever I use CRA for the client set up.

"heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"

Try it and see if it works…

#8

Also , to serve the files

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

In the top of my app, and in the bottom after all other routes but before error catching, I catch all wild card routes using

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

I see you are doing something similar, but I remember dicking with the ordering of the routes for the client folder to be caught before it was working properly. I don’t really test for production because I run 2 servers concurrently for development.

edit: a working example - https://github.com/Dereje1/Multiplayer-Tetris/blob/master/server/app.js

1 Like
#9

after taking your advice, i moved around my app.use code and app.get code to before all APIs, and this solved my issue!

#10

@neilhsieh, glad it worked, got a couple questions for you that could be of benefit to others that may stumble upon this thread in the future and prove to be an alternative solution, did you have to change the "heroku-postbuild" command you used above or did it work as is ? And did you move your entire snippet to serve static assets up top with the other root level middleware being used or did you split them up (like I had) ?

#11

github link not working

#12