Skip to content

Instantly share code, notes, and snippets.

@mars
Created July 29, 2016 01:12
Show Gist options
  • Save mars/5e01bb2a074594b44870cb087f54fe2f to your computer and use it in GitHub Desktop.
Save mars/5e01bb2a074594b44870cb087f54fe2f to your computer and use it in GitHub Desktop.
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
Copy link
Author

mars commented Jul 29, 2016

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

@philjoseph
Copy link

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
Copy link

iamtmrobinson commented Apr 12, 2017

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

@guanw
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
Copy link

HemaW commented Jul 27, 2017

anyone has a reply to this?^^

@kimmiekim
Copy link

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

@mars
Copy link
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