Automate your create-react-app build on Heroku using Buildpack


Today I’d like to share how easy it’s to automate your create-react-app build and deploy on Heroku.

You may ever use Heroku CLI to do the build script, but now you can use create-react-app buildpack to automate your build process on Heroku. So you don’t need to script at all. Just follow its simple quickstart:

create-react-app $APP_NAME
git init
heroku create $APP_NAME --buildpack
git add .
git commit -m "Start with create-react-app"
git push heroku master
heroku open

and that’s it! The next deploy will use the buildpack and the app is ready.

If you want to look how it works behind the scene:

-----> React.js (create-react-app) multi app detected
-----> Configure create-react-app build environment
Using `NODE_ENV=development`
=====> Downloading Buildpack:
=====> Detected Framework: Multipack
=====> Downloading Buildpack:
=====> Detected Framework: Node.js
-----> Creating runtime environment
-----> Installing binaries
engines.node (package.json):  unspecified
engines.npm (package.json):   unspecified (use default)
engines.yarn (package.json):  unspecified (use default)
Resolving node version 6.x via
Downloading and installing node 6.11.0...
Using default npm version: 3.10.10
Resolving yarn version (latest) via
Downloading and installing yarn (0.27.5)...
Installed yarn 0.27.5
-----> Restoring cache
Skipping cache restore (new-signature)
-----> Building dependencies
Installing node modules (yarn.lock)
yarn install v0.27.5
[1/4] Resolving packages...
[2/4] Fetching packages...
warning fsevents@1.0.17: The platform "linux" is incompatible with this module.
info "fsevents@1.0.17" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 24.62s.
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
=====> Downloading Buildpack:
=====> Detected Framework: React.js (create-react-app)
Using existing `static.json`
Enabling runtime environment variables
> gitfun-web@0.1.0 build /tmp/build_68262707387f88c5d8887155e7154921/antonybudianto-gitfun-web-b656dc6
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
60.11 KB  build/static/js/main.03c59a74.js
457 B     build/static/css/main.167ae284.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage": "",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
=====> Downloading Buildpack:
=====> Detected Framework: Static HTML
% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
Dload  Upload   Total   Spent    Left  Speed
-----> Installed directory to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
Procfile declares types     -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 30.7M
-----> Launching...
Released v17 deployed to Heroku
This works for super simple app. If you have custom/complicated build script, you may better still use Heroku CLI.

Thanks for reading!