DEV Community

How to deploy React + Node.js application to Heroku

Yogesh Chavan on July 07, 2020

In this article, we will explore, Step by step instructions for deploying React + Node.js app to Heroku which we created in my previous article HER...

Read full post

Comment hidden by post author - thread only accessible via permalink

Saj Panchal • Mar 13 '21

Hello,
can you please look into my code? I just use the approach that you explained. I am able to create an app on localhost:5000 but when I deployed it in Heroku. I can't get the response from the POST request. All it is giving me is 405 error. I have been fixing it for 2 days but not getting any solutions. If you can help me it will be highly appreciated.

Here is the error code:
Uncaught (in promise) Error: Request failed with status code 405

here is my code:
github.com/sajpanchal/portfolio

Yogesh Chavan • Mar 14 '21 • Edited

@sajpanchal There are some changes you need to make.

add .gitignore file to the server folder with node_modules as content of the file so it will not be pushed to GitHub.
add dotenv package inside dependencies section of server/package.json file and remove it from devDependencies.
don't push the build folder to Github. You have added a build folder inside the server folder, please remove that. As build folder will be created outside the server folder, change the reference of the build folder from server/index.js file to this

path.join(__dirname, '..', 'build')

instead of

path.join(__dirname, 'build')

Remove the following entry from the package.json file

"engines": {
    "node": "12.x"
},

remove the un-necessary console.log statements, you're logging password environment variable value to the console in server folder
remove the hardcoded email 'abc@gmail.com' and subject from the contact us form
make sure to add environment variables from UI on heroku in settings -> config vars and then re-deploy the app by clicking the deploy branch button again.

Here's a deployed version of your portfolio. I have not entered the valid email and password in environment variables so the contact us form will not work. Make sure you add correct values for following environment variables:

USER_PASSWORD=
USER_EMAIL=
RECEIVER_EMAIL=

Maria Campbell • Jan 24 '23

Thanks so much for this, I never had a front and back using React. Only ejs and stuff so there had never been this kind of issue. Tested it locally and it worked! And now will deploy to remote (Heroku) and see what happens!

Maria Campbell • Jan 24 '23

Yogesh, it worked like a charm! Again, thanks so much!

Yogesh Chavan • Jan 24 '23

Glad to hear that @letsbsocial1 . Thank you 🙏

Saj Panchal • Mar 14 '21 • Edited

Thank you. Actually, I fixed it earlier by reinstalling node packages and creating a new Heroku app. It started to work after that updates without doing anything in the code. I appreciate your response. The mistakes you pointed out will be useful in the future though.

carlos fabian venegas • Mar 18 '21

Deployed but had some problems... I deleted the heroku app tried again but this time I got a error in the build-> Node version not specified in package.json. So i added this in my package.json and it worked...
"engines": {
"node": "14.15.1",
"npm": "7.6.2"
},

Yogesh Chavan • Mar 18 '21

Awesome 👍

L.E. Nichols • Nov 20 '21

I was able to get my separated frontend and backend wired perfectly for heroku following these instructions. Thanks for this.

Yogesh Chavan • Nov 20 '21

Glad to hear that @lenicholsdev . Thank you 🙂

Kushal Lahoti • Feb 10 '23

Hi @myogeshchavan97, Thanks for this. I have tried your solution to connect my frontend and backend applications to one, and it worked! But, I am facing a problem for all other endpoints instead of "/". I am not able to fetch the any other page. It's only working for home page. Can you please help me with what mistake I might be committing here?

Kushal Lahoti • Feb 10 '23 • Edited

UPDATE: Added the following code in server/index.js to resolve it.

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, '..', 'build', 'index.html'), function(err) {
      if (err) {
        res.status(500).send(err)
      }
    })
  })

Make sure that you add this code after such functions in your index.js file.

app.use("/primary_endpoint1", require("./routers/Router1"));
app.use("/primary_endpoint2", require("./routers/Router2"));

Dylan González • Oct 24 '20

You just save my life with this man, thanks a lot

Yogesh Chavan • Oct 25 '20

glad to hear that 🙏

kane-toomer • Nov 21 '22

Hello Yogesh,

I have followed all of the steps in both articles but when I click search, loading pops up really fast and disappears w/out displaying the jobs. Any suggestions?

Yogesh Chavan • Nov 21 '22 • Edited

@kanetoomer The GitHub Jobs API is deprecated and is no longer available. You can try using the hardcoded JSON data from this file and use it so you will see the list of jobs displayed when clicked on search.

kane-toomer • Nov 22 '22

Thank you, I have figured it out now.

Sami Kalammallah • Sep 18 '21

Will it work if I have .env and add vars manually ? the environtment using REACT_APP_

Yogesh Chavan • Sep 18 '21

we don't push .env file to github for security reasons. So you will need to add environment variables through UI for Heroku.

Some comments have been hidden by the post's author - find out more