Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create a React app & deploy to Heroku
## Global install of the app generator
npm install -g create-react-app
## Setup the app (first-time only)
create-react-app my-app
cd my-app
git init
# Create the Heroku app; requires free account at https://www.heroku.com/
heroku create -b https://github.com/heroku/heroku-buildpack-static.git
# Set the web root to the build/ directory
echo '{ "root": "build/" }' > static.json
# Allow JS bundle to be committed (removes `build` from ignores)
sed '/build/d' .gitignore > .gitignore.new && mv .gitignore.new .gitignore
## Build, commit, & deploy
npm run build
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
## Visit the live React app in your browser
heroku open
# Develop your app locally using `npm start`
# Then build, commit, & deploy ♻️
@mars

This comment has been minimized.

Copy link
Owner Author

mars commented Jul 29, 2016

This flow is now automated with Heroku Buildpack for create-react-app

@philjoseph

This comment has been minimized.

Copy link

philjoseph commented Jan 23, 2017

Hello @mars - We are using Create-React-App within an existing node/express app deployed on Heroku. Not yet clear to me what shall I do to deploy it properly. Would be great to have a guide for that.

@iamtmrobinson

This comment has been minimized.

Copy link

iamtmrobinson commented Apr 12, 2017

@philjoseph there is also create-react-app with a Node server for that situation.

@guanw

This comment has been minimized.

Copy link

guanw commented Jun 18, 2017

Hey, I got this error when I tried the following script:

## Setup the app (first-time only)
create-react-app guanw-test
cd guanw-test
git init

# Create the Heroku app; requires free account at https://www.heroku.com/
heroku create -b https://github.com/guanw/create-react-app-buildpack.git

# Set the web root to the build/ directory
echo '{ "root": "build/" }' > static.json
# Allow JS bundle to be committed (removes `build` from ignores)
sed '/build/d' .gitignore > .gitignore.new && mv .gitignore.new .gitignore

## Build, commit, & deploy
npm run build
git add .
git commit -m "react-create-app on Heroku"
git push heroku master

## Visit the live React app in your browser
heroku open

remote: Compressing source files... done.
remote: Building source:
remote:
remote: ! error fetching custom buildpack
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to arcane-basin-40866.
remote:
To https://git.heroku.com/arcane-basin-40866.git
! [remote rejected] master -> master (pre-receive hook declined)

Do you know why it happened?

@HemaW

This comment has been minimized.

Copy link

HemaW commented Jul 27, 2017

anyone has a reply to this?^^

@kimmiekim

This comment has been minimized.

Copy link

kimmiekim commented Dec 8, 2017

heroku says deployed successfully, but i get 404 error when i open the url

@mars

This comment has been minimized.

Copy link
Owner Author

mars commented Dec 16, 2017

@kimmiekim @HemaW @guanw Use create-react-app-buildpack instead of this script. (This was an early experiment that lead to the creation of that buildpack for Heroku.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.