Deploy a React App to Heroku with Bitbucket pipelines
Hello world!
In preparation of a talk for an Atlassian Community Event in Hamburg I struggled and stumbled upon some documentations and tutorials for using Bitbucket and Heroku together. So I’ve decided to write my own first developer article about
Building a basic CI/CD pipeline for deploying a React App to Heroku using Bitbucket
Getting Started
Step 1 — Create React app
In this tutorial we will focus on deploying a React app to Heroku, so we will just use the React starter app. To run the App in Heroku we’ll add a basic express server setup later on.
Prerequisite for creating and running a React app make sure you have:
- Node.js and npm installed
- Visual Studio Code installed (optional)
Now with that basic setup we are ready to create our React app:
npx create-react-app name-of-your-app
Depending on your development environment grap yourself a coffee, the next 2–5 minutes are not that interessting, except you like watching how all the project dependencies are downloaded and bundled together.
After you are back, type the following lines into your terminal to start the app
cd name-of-your-app
npm start
You can now view the app in a browser by open the URL http://localhost:3000
Step 2 — Create Bitbucket Repository
Now that we have our app up and running on our local machine we should create our git repository. Therefore we head over to https://bitbucket.org. If you don’t have an account yet, get one its for free (important nowadays)!
When creating a new repository you need to at least give it a name and you want to set the access level to private. Most of the settings here can be changed afterwards.
Well done! You’ve created your — maybe first — git repository. Time to explore the menu which you’ll now see on the lefthand side.
If you want to know more about Bitbucket head over to the official documentation.
Step 3 — Create Heroku App
We are pretty close to deploying our app now. Head over to https://heroku.com - again create an account if you don’t have one (IT’S FREE!).
On your dashboard click New and choose Create new app. In the dialog
- Set a App Name - this one is unique world-wide, so it might happen that some else already picked test123 or demoapp - be creative!
- Choose the Region where your app should run
Your app is now created, but before you head back to your code and git repository we need to tell our app which Buildpack we’d like to use.
- Go to Settings in your App
- Under Buildpacks click Add buildback and choose heroku/nodejs
For deploying the app later on we also need an API Key.
- In your Profile go to Account Settings
- In the Section API Key click Reveal
- Safe the key for later configuration
Deploy with Bitbucket pipelines
Now comes the fun part… for you actually, I learned the hard way so you don’t have to.
Step 1 — Setup an express Server
Go to Visual Studio Code and add a new folder called server to the root of the repository. Within that folder create a file called server.js and install express by running this command in your terminal:
npm install express --save
Within the server.js file copy & paste these lines of code:
const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'build');const port = process.env.PORT || 3000;app.use(express.static(publicPath));app.get('*', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
});app.listen(port, () => {
console.log('Hello World I run on PORT ' + port);
});
In your package.json file change the script line for start your app to:
"start": "node server/server.js",
Step 2 — Upload everything to your git repository
Open a terminal windows make sure you are in the root directory of your React app and type the following lines:
git init
git add .
git commit -m "initial commit"
git remote add origin https://username@bitbucket.org/username/name-of-your-repository.git
git push -u origin master
When you refresh the browser page you should see all the files and folders of your app we’ve just commited the the git repository.
Step 3 — Setup and configure Bitbucket pipelines
Now that our code is in our repository we need to enable Pipelines for our repository.
- Go to Repository Settings
- Under the Section Pipelines click Settings
- Enable Pipelines
- Right above Settings, go to Repository variables
- Add a variable with name HEROKU_API_KEY and your key from above
- Add a variable with name HEROKU_APP_NAME and the app name as value
Now we can finally create our Pipeline configuration.
In our case we want (not true, the author wants it!) to build a pipeline with following rules and steps:
- We don’t have branches yet, so everytime someone commits something to the master branch we want to run our pipeline
- We want to test our app first
- We need to create a Zip file for the heroku pipline add-on
- We want to finally push our repository to Heroku
Author’s note: YES, I could push the repository to Heroku using git, but NO that was not my intention for writing this article!
The bitbucket-pipelines.yml file holds all the build configurations for your repository. There is really a lot you can do with this file, so if you want to dig deeper take a look at the official documentation. Here the basics of the YAML file:
pipelines: contains all your pipeline definitions.
default: contains the steps that run on every push if one of the following criteria is not met.
step: each step starts a new Docker container with a clone of your repository, then runs the contents of your script
section.
script: a list of commands that are executed in sequence.
pipe: a pipe is more like an add-on or function, it takes some input and does stuff for you — like uploading your repository to Heroku
Our final bitbucket-pipelines.yml file looks like this:
image: node:10.15.3pipelines:
branches:
master:
- step:
name: Test App
caches:
- node
script:
- rm -rf package-lock.json
- rm -rf node_modules
- npm install
- npm run test
- step:
name: Create artifact
script:
- git archive --format=tar.gz master -o application.tar.gz
artifacts:
- application.tar.gz
- step:
name: Deploy to heroku
deployment: production
caches:
- node
script:
- pipe: atlassian/heroku-deploy:1.1.4
variables:
HEROKU_API_KEY: $HEROKU_API_KEY
HEROKU_APP_NAME: $HEROKU_APP_NAME
ZIP_FILE: "application.tar.gz"
WAIT: 'true'
The END
Hope you liked it, even more I hope it helps you! Please let me know via comment or clap :)