DEV Community

Discussion on: How to deploy React + Node.js application to Heroku

Collapse
 
sajpanchal profile image
Info Comment hidden by post author - thread only visible in this permalink
Saj Panchal

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

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan • 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')
Enter fullscreen mode Exit fullscreen mode

instead of

path.join(__dirname, 'build')
Enter fullscreen mode Exit fullscreen mode
  • Remove the following entry from the package.json file
"engines": {
    "node": "12.x"
},
Enter fullscreen mode Exit fullscreen mode
  • 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=
Enter fullscreen mode Exit fullscreen mode
Collapse
 
letsbsocial1 profile image
Maria Campbell

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!

Thread Thread
 
letsbsocial1 profile image
Maria Campbell

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

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

Glad to hear that @letsbsocial1 . Thank you 🙏

Collapse
 
sajpanchal profile image
Saj Panchal • 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.

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