Preparing A Development Stage in Heroku

Heroku is a great platform for quickly deploying apps of all kinds. Many Heroku buildpacks have been introduced for pushing your app to the Internet as seamlessly as possible and in this scenario we will setup a small React app with a pretty straightforward and easy-to-use buildpack in order to create two separate development stages. (https://github.com/mars/create-react-app-buildpack)

In this post, I am assuming you have a basic knowledge of React and the create-react-app project that allows you to quickly deploy a React app without worrying about Webpack or Babel configurations. I am also assuming you know the basics of git and using the command line. This post is about deploying a web application to Heroku and forking an existing repo to use for testing development branches or features before pushing to production. Before you begin, make sure you have the latest installation of:

git

Heroku CLI (https://devcenter.heroku.com/articles/heroku-cli) and free account

Node.js

create-react-app

npm install -g create-react-app

Development of software applications primarily happens in stages. Stages are useful to discern between tested features that have yet to be published and features that have already passed testing and approved by the development team for production. For the sake of this article, we will be preparing a “dev” stage and a production “heroku” stage to distinguish between the two.

To begin, first create a new React app using this command. Call your app whatever you like:

create-react-app my-cool-app
cd my-cool-app

The thing I love about Heroku is the integration with git that allows for quick deployment. Initialize a git respository and specify the buildpack you will be using for your app with the “heroku create” command. You need to name your app something unique (my-cool-app has already been taken):

git init
heroku create my-cool-app --buildpack https://github.com/mars/create-react-app-buildpack.git

You must accurately declare the required buildpack along with the buildpack flag in order for this to work. Now we can stage our files and commit:

git add .
git commit -m "Start with create-react-app"

And deploy our app and view it:

git push heroku master
heroku open

You should now have an app deployed with a Heroku-generated url. If this is your first time deploying an app, then congratulations! You can thank me for forever changing your life for the better. If it’s not, then NBD.

Heroku has a specific policy for only deploying changes pushed to master. But if you have a specific branch that you would like to view in development, there is a way to override this. To do this, let’s fork the existing application using this command:

heroku fork --from my-cool-app --to my-cool-app-dev

DISCLAIMER: The fork command will be deprecated starting December 1st, 2017 and will need to be manually installed as a CLI plugin using this command:

heroku plugins:install heroku-fork

Instead of forking your app, Heroku recommends using Pipelines to create new development and staging environments. Check out this article for more information: https://devcenter.heroku.com/articles/pipelines

This will fork a repo from the “my-cool-app” project into the “my-cool-app-dev” project. Then configure the “my-cool-app-dev” project and specify a new remote with a name like “dev”:

git remote add dev https://git.heroku.com/my-cool-app-dev.git

To avoid confusion, just copy the url of the app you just deployed and add -dev to it (or whatever you want to call it, as long as its not already used in Heroku). If you now take the time to check which remote repositories you currently are configured to:

git remote -v

You will see something like this:

dev     https://git.heroku.com/my-cool-app-dev.git (fetch)
dev     https://git.heroku.com/my-cool-app-dev.git (push)
heroku    https://git.heroku.com/my-cool-app.git (fetch)
heroku    https://git.heroku.com/my-cool-app.git (push)

Fantastic! Let’s create a new branch now to deploy to the dev build so we can compare between the two apps.

git checkout -b feature_1.0

Change something in the boilerplate create-react-app (like the h1 in the App.js file), stage the changes, and commit the new branch:

git add .
git commit -m "Deploy to branch feature_1.0"

Now here is how to override Heroku master branch:

git push dev feature_1.0:master

This will push the changes from the feature_1.0 branch to the app and can be viewed in the browser under the url you specified. You now have to specify which remote you are working with by using the remote flag and open the new application:

heroku open --remote dev

See, that wasn’t so bad. Pretty cool stuff if you ask me. Make sure that you are pushing to the right remote when you decide to test new features. You don’t want to be pushing your development branch over the production master.

Good luck, hope this helps! For more information about the tools used in this post please visit these links:

Create-React-App-Buildpack: https://github.com/mars/create-react-app-buildpack

Fork Heroku Project from existing App: https://devcenter.heroku.com/articles/multiple-environments#starting-from-an-existing-app

Create-React-App Project: https://github.com/facebookincubator/create-react-app

Heroku Fork Plugin: https://github.com/heroku/heroku-fork

Creating Pipelines in Heroku: https://devcenter.heroku.com/articles/pipelines