How to deploy a React app with an Express server on Heroku

How to deploy a React app with an Express server on Heroku
0

by Ashish Nandan Singh

Hello, world! Recently I had to deploy a website to Heroku for one of the pieces of freelance work I was doing. I think this process may be somewhat difficult, and a detailed tutorial or article on how to do this should help. So this one is going to be very simple and hopefully very short.


This is a companion discussion topic for the original entry at https://www.freecodecamp.org/news/how-to-deploy-a-react-app-with-an-express-server-on-heroku-32244fe5a250/
1 Like

Thanks for your tutorial, unfortunately it didn’t work for me.

I am using Create React App and I cannot serve public/index.html when in development, since that is a blank html file that does not include any JS.

A working .html file is only generated when building the project and that takes around 15seconds to complete, which is fine for production but it is way too long for development.

Have you got this working with a Create React App?

Inside of your react directory, run yarn run build to run the build script in its package.json.

thanks for this amaizing post, can you help i am having some error after follow steps in the blog error are below

URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'
    at decodeURIComponent (<anonymous>)
    at decode_param (/Users/koenig/Documents/React Js/node react/node_modules/express/lib/router/layer.js:172:12)
    at Layer.match (/Users/koenig/Documents/React Js/node react/node_modules/express/lib/router/layer.js:123:27)
    at matchLayer (/Users/koenig/Documents/React Js/node react/node_modules/express/lib/router/index.js:574:18)
    at next (/Users/koenig/Documents/React Js/node react/node_modules/express/lib/router/index.js:220:15)
    at SendStream.error (/Users/koenig/Documents/React Js/node react/node_modules/serve-static/index.js:121:7)
    at SendStream.emit (events.js:198:13)
    at SendStream.error (/Users/koenig/Documents/React Js/node react/node_modules/send/index.js:270:17)
    at SendStream.pipe (/Users/koenig/Documents/React Js/node react/node_modules/send/index.js:520:10)
    at serveStatic (/Users/koenig/Documents/React Js/node react/node_modules/serve-static/index.js:125:12)
URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
    at decodeURIComponent (<anonymous>)
    at decode_param (/Users/koenig/Documents/React Js/node react/node_modules/express/lib/router/layer.js:172:12)
    at Layer.match (/Users/koenig/Documents/React Js/node react/node_modules/express/lib/router/layer.js:123:27)
    at matchLayer (/Users/koenig/Documents/React Js/node react/node_modules/express/lib/router/index.js:574:18)
    at next (/Users/koenig/Documents/React Js/node react/node_modules/express/lib/router/index.js:220:15)
    at SendStream.error (/Users/koenig/Documents/React Js/node react/node_modules/serve-static/index.js:121:7)
    at SendStream.emit (events.js:198:13)
    at SendStream.error (/Users/koenig/Documents/React Js/node react/node_modules/send/index.js:270:17)
    at SendStream.pipe (/Users/koenig/Documents/React Js/node react/node_modules/send/index.js:520:10)
    at serveStatic (/Users/koenig/Documents/React Js/node react/node_modules/serve-static/index.js:125:12)

thank you