Deploy a React App on Azure with Bitbucket pipelines

I use Bitbucket for its private repos and recently decided to deploy my app to Azure. I was determined to do it with a pipeline, but it took some research to finally get it to work. If you want to follow the same path, here is what you have to do.

Prerequisites

A React app — I created one using npx create-react-app <APP-NAME>.

Create an Azure App Service

We will be deploying the app to an Azure App Service. Create one by going to the Azure Portal, click on Create a resource and choose Web App.

Create an App Service

On the next page give the App Service a name, this will also be the subdomain to access it later, so it has to be unique. Publish should be Code since we will be publishing the built project directly from Bitbucket. For the Runtime stack select Node. Fill out the rest of the settings and hit Review + create and create the App Service.

App Service settings

While the App Service is starting up let’s gather a couple of secrets we need for the Bitbucket pipeline.

Gather Azure secrets

Open the Azure Console

Azure Console button

Type inaz login, and follow the instructions to log in.

Log in to the Azure Console

To publish an app via a Bitbucket pipeline we need an Azure Service Principal. To create one use az ad sp create-for-rbac -n <SERVICE_PRINCIPLE_NAME> .

Azure Service Principal

Save the output somewhere as we will need appId, password, and tenant.

Define the Bitbucket pipeline

Bitbucket pipelines are defined in a bitbucket-pipelines.yml file. In the root folder of your project create the file with the following content:

image defines the Docker image to use while building the app. You can use any image from Docker Hub and here we will use the default image provided by Bitbucket. It comes with NPM, NVM (Node Version Manager) which allows you to manage multiple versions of Node.js on your machine, and zip to archive the built project to deploy to Azure.

The custom pipeline (line 4) allows you to run the pipeline manually. If you want to have a CI/CD pipeline that runs every time you push, you can use the default pipeline.

script is an array of commands to be executed to build and package the app. The first command upgrades the Node version to 12 (the same one defined for the App Service in Azure) then it installs and builds the project. The built files reside under build so we cd into the folder and archive everything.

The second step deploys the archived app to Azure. For this we need the secrets we gathered from Azure:

  • APP_NAME — the name of the App Service
  • RESOURCE_GROUP — the Azure Resource group
  • AZURE_APP_ID — the appId of the Service Principal
  • AZURE_PASSWORD — the password of the Service Principal
  • AZURE_TENANT_ID — the tenant of the Service Principal

These variables are defined in your Bitbucket repository under Repository Settings → Pipelines → Deployments.

Deployment variables

You can have multiple deployments with different variables. The property deployment (line 18) in the pipeline YAML file defines, which deployment will be used.

Once the deployment variables are defined and the bitbucket-pipelines.yml file is pushed you can run the pipeline. In your Bitbucket repository go to Pipelines and hit Run pipelines. Once the pipeline has finished you should be able to see the pushed project in the Deployment Center in the App Service.

The React app deployed to the App Service

If you selected a Windows virtual machine for the App Service the React app should be live. Go to https://<APP_SERVICE_NAME>.azurewebsites.net. If the App Service uses a Linux VM there is one last step. The Linux uses pm2 to run Node apps so you need to tell it to serve the app that you deployed. In the App Service open Configuration and select the General Settings tab. There you have the option to define a start-up command. The extracted app resides under /home/site/wwwroot and you can use pm2 serve /home/site/wwwroot --no-daemonto start the server. Save the configurations and wait for the redeploy.

App Service Startup Command

If everything goes well your app should be running on Azure.

It’s aliiiive!

Cheers!

Run C.M.D. - IT‘s Tricky

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store