Hello world! In preparation of a talk for an 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 Atlassian Community Event Building a basic CI/CD pipeline for deploying a to using React App Heroku 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: 1. and installed Node.js npm 2. installed (optional) Visual Studio Code Now with that basic setup we are ready to create our React app: npx create-react-app name- -your-app of 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- -your-app
npm start of 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 . If you don’t have an account yet, get one its for free (important nowadays)! https://bitbucket.org 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 - again create an account if you don’t have one (IT’S FREE!). https://heroku.com On your dashboard click and choose . In the dialog: New Create new app 1. Set a - this one is unique world-wide, so it might happen that some else already picked or - be creative! App Name test123 demoapp 2. Choose the where your app should run Region Your app is now created, but before you head back to your code and git repository we need to tell our app which we’d like to use. Buildpack Go to in your AppUnder click and choose Settings Buildpacks Add buildback heroku/nodejs For deploying the app later on we also need an API Key. 1. In your Profile go to Account Settings 2. In the Section click API Key Reveal 3. 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 to the root of the repository. Within that folder create a file called and install express by running this command in your terminal: server server.js npm install express --save Within the file copy & paste these lines of code: server.js path = ( ); express = ( ); app = express(); publicPath = path.join(__dirname, , ); port = process.env.PORT || ;app.use(express.static(publicPath));app.get( , (req, res) => {
    res.sendFile(path.join(publicPath, ));
});app.listen(port, () => { .log( + port);
}); const require 'path' const require 'express' const const '..' 'build' const 3000 '*' 'index.html' console 'Hello World I run on PORT ' In your file change the script line for start your app to: package.json : , "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 git remote add origin https: git push -u origin master "initial commit" //username@bitbucket.org/username/name-of-your-repository.git 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 SettingsUnder the Section click Right above Settings, go to Add a variable with name HEROKU_API_KEY and your key from aboveAdd a variable with name HEROKU_APP_NAME and the app name as value Pipelines SettingsEnable Pipelines Repository variables 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: 1. We don’t have branches yet, so everytime someone commits something to the master branch we want to run our pipeline 2. We want to test our app first 3. We need to create a Zip file for the heroku pipline add-on 4. 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 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 . Here the basics of the file: bitbucket-pipelines.yml official documentation YAML : contains all your pipeline definitions. pipelines : contains the steps that run on every push if one of the following criteria is not met. default : each step starts a new Docker container with a clone of your repository, then runs the contents of your section. step script : a list of commands that are executed in sequence. script :  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 pipe Our final file looks like this: bitbucket-pipelines.yml image: node: pipelines:
  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: variables:
                 HEROKU_API_KEY: $HEROKU_API_KEY
                 HEROKU_APP_NAME: $HEROKU_APP_NAME
                 ZIP_FILE: WAIT: 10.15 .3 1.1 .4 "application.tar.gz" 'true' The END Hope you liked it, even more I hope it helps you! Please let me know via comment or clap :) About Jodocus is a full-service provider for Atlassian Systems based in Hamburg, Düsseldorf and Cologne Germany. Our team combines more than 25 years of experience in building and running the solution you need. We are Atlassian experts and know how to analyze and understand your problems. Innovative and future-proof solutions are our passion and we always meet our customers at eye-level. Jodocus About the Author Jan Szczepanski specializes in project and process management and has been an Atlassian specialist since the beginning of his professional career. He was in charge of technical as well as non-technical teams in different companies and was responsible for the optimization of business processes. Today he uses his specialist knowledge, which he has acquired over many years, in to improve communication and collaboration structures.

ATLASSIAN

Deploy a React App to Heroku with Bitbucket pipelines

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Use BitBucket Pipelines and Xray Test Management to Test Automation of Jira Cloud Workflows

3 ways AI will change project management for the better

Building a JIRA integration with Clojure & Atlassian Connect

Git in 2016

Glitch in the system. Why I’m buying Slack stock.

How a Supply-Chain Breach Put at Risk Atlassian Accounts

How to Use BitBucket Pipelines and Xray Test Management to Test Automation of Jira Cloud Workflows

3 ways AI will change project management for the better

Building a JIRA integration with Clojure & Atlassian Connect

Git in 2016

Glitch in the system. Why I’m buying Slack stock.

How a Supply-Chain Breach Put at Risk Atlassian Accounts

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps