How to deploy React build folder to Heroku

Question

I looked around the internet for this and found this medium article using serve. The article directed modifying the packange.json file to this:

"scripts": { 
  "dev": "react-scripts 
  "start", "start": "serve -s build", 
  "build": "react-scripts build", 
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject", 
  "heroku-postbuild": "npm run build" 
},

Now this works in development. I get console logs saying Content is cached for offline use. And google Lighthouse gives me >90% on progessive web apps. The problem is, when I deploy to Heroku, during build it runs the npm run build specified in the package.json scripts. But on opening the app, I get 21% on performance, and 50% on progressive web apps in firehouse. Also, it says service worker not registered. Which means it is not serving from the build folder. As an extra, I ran npm build myself in development machine and deployed the project TOGETHER with the build folder, but still same result. Now I also came around this other articlesuggesting to use node.js server and change scripts in package.json to this:

start: "node server.js"

I no nothing about node.js, so I decided to consult here for better choices.

EDIT: If a server command is needed, like in the node.js in the second medium article, and in Garesh's php code below - if anyone could help with a similar code in python(django), it'd be nice

Cole · Accepted Answer · 2019-02-01 22:40:29Z

6

Found the answer to this in this comment online:

Before deploying the app go to: Heroku dashboard > settings > buildpacks > add buildpacks and then add github.com/mars/create-react-app-b...

Or, in command line you can do

heroku buildpacks:set github.com/mars/create-react-app-b...

If you don't do this step, heroku will deploy the development build (which is slow) of your react app instead of the optimized production build.

answered Feb 1, 2019 at 22:40

Cole

5721 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harish Soni · Accepted Answer · 2019-02-01 08:04:16Z

0

Build you code with:

npm run build

Now Put this code in the index.php file:

<?php header( 'Location: /index.html' ) ;  ?>

Now put this index.php file into your build folder.

Copy this build folder somewhere else.

Now configure your new folder with your heroku app.

then

git push heroku master

answered Feb 1, 2019 at 8:04

Harish Soni

1,89414 silver badges28 bronze badges

1 Comment

Cole Over a year ago

Hey Harish, first, I deploy my heroku app from my connected github account repo, so in essence I should push ONLY the build folder, maybe to a different branch on github, and then deploy heroku from there? Second, do you know how I could replace the php file and lines with that of Python (pref Django).

Collectives™ on Stack Overflow

How to deploy React build folder to Heroku

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related