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

Antony Budianto
Jul 11, 2017 · 2 min read

Hi,

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
cd $APP_NAME
git init
heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git
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 environmentUsing `NODE_ENV=development`=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git=====> Detected Framework: Multipack=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git=====> Detected Framework: Node.js-----> Creating runtime environmentNPM_CONFIG_LOGLEVEL=errorNPM_CONFIG_PRODUCTION=falseNODE_VERBOSE=falseNODE_ENV=developmentNODE_MODULES_CACHE=true-----> Installing binariesengines.node (package.json):  unspecifiedengines.npm (package.json):   unspecified (use default)engines.yarn (package.json):  unspecified (use default)Resolving node version 6.x via semver.io...Downloading and installing node 6.11.0...Using default npm version: 3.10.10Resolving yarn version (latest) via semver.io...Downloading and installing yarn (0.27.5)...Installed yarn 0.27.5-----> Restoring cacheSkipping cache restore (new-signature)-----> Building dependenciesInstalling 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 buildClearing previous node cacheSaving 2 cacheDirectories (default):- node_modules- bower_components (nothing to cache)-----> Build succeeded!=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git=====> 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 buildCreating an optimized production build...Compiled successfully.File sizes after gzip:60.11 KB  build/static/js/main.03c59a74.js457 B     build/static/css/main.167ae284.cssThe 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": "http://myname.github.io/myapp",The build folder is ready to be deployed.You may serve it with a static server:yarn global add serveserve -s build=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git=====> Detected Framework: Static HTML% Total    % Received % Xferd  Average Speed   Time    Time     Time  CurrentDload  Upload   Total   Spent    Left  Speed-----> Installed directory to /app/binUsing release configuration from last framework (Static HTML).-----> Discovering process typesProcfile declares types     -> (none)Default types for buildpack -> web-----> Compressing...Done: 30.7M-----> Launching...Released v17https://gitfun-web.herokuapp.com/ 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!

Antony Budianto

Written by

Sr. Software Engineer, Open-source, Writer. Creator at https://youtube.com/antonybudianto