How To Deploy a React Application to Heroku

In this video I demonstrate how to deploy a react application with a nodejs server to Heroku.
📞 If you would like to schedule a mock interview with me, you can email me at
[e-mail] for price and details.
Follow me on Twitter: / codingwithchaim
Subscribe to the channel: www.youtube.co...

[@alejandrocastillomolas3710]

I have followed the steps of the video, the application compiles well and deploys in heroku satisfactorily, however, it loads me in blank index.html, and App.js is not running, does not display what should return to index.html .
What could be the problem?
I am running my Proctfile file with the command
:
web: yarn start
And in my package.json that is at the server.js level is the following content:
"start": "PROD = true node server.js",
"postinstall": "cd ./client && yarn"

[@CodingWithChaim]

did you build the client folder?

[@alejandrocastillomolas3710]

@@CodingWithChaim doing "yarn build" inside client folder ? yes.
I put a dummy text on index html of client/public/imdex.html, and I see that text successfuly in deployed app on heroku.
What I dont see is, what should be retrieve by App.js of the client folder

[@CodingWithChaim]

@@alejandrocastillomolas3710 The build folder gets gitignored so you need to make sure that the build process happens on the server and not locally. In my setup I have the build process happening as a post install in the client package json

[@alejandrocastillomolas3710]

@@CodingWithChaim I think that I'm doing that by putting on client/package.json "postinstall": "yarnbuild" as this video show in 10:21

[@CodingWithChaim]

Ok so then it sounds like you’re doing it all correctly. Would need to see the code to see the issue

[@boukman3668]

Can you explain the process for an app that uses react router?

[@CodingWithChaim]

The process would be the same

[@boukman3668]

@@CodingWithChaim thanks

[@yogeshpaghdal]

How proxy will work on heroku server ?

[@CodingWithChaim]

With heroku you don’t need proxy because the node sever will be serving the ui as well as the data

[@sumit07gupta]

Hey Chaim, Thank you for your videos. I tried to deploy group video chat app build using your another video. It is giving error: "Failed to load resource: the server responded with a status of 503 (Service Unavailable)"
I have used server.use & server.get instead of app.use and app.get for webrtc video chat app to serve static files for client.
Let me know if you know how we can fix it.

[@CodingWithChaim]

its hard for me to really have any idea what your issue might be without seeing your code.

[@sumit07gupta]

@@CodingWithChaim Thank you for your quick response. I have used below code and tried to publish using steps in your video.
github.com/sumitgupta07/video-chat-app-v1.
Thanks again for wonderful videos.

[@CodingWithChaim]

@@sumit07gupta Ok so I took a quick glance at your code, and I do think that you should be using app and not server to send the html files in production. The use method is an express method, the server here is a server created using http module not express. Pretty sure that if you make that change you will ok.

[@sumit07gupta]

@@CodingWithChaim No luck :(. Anyways I will check more, it may be problem related to heroku.

[@animecrease4811]

@@sumit07gupta hey...did you fixed that problem? because i am facing the same issue! please help if you have the solution..!