CI/CD is a process to manage the release updates and deliver bug-free code in software development. In which you can initiate code builds, run automated tests, run custom scripts and deploy the code on staging or production environments. In the market, many tools/websites are available to integrate the CI/CD pipeline.

“CI/CD” stands for the Continuous Integration / Continuous Delivery.

Here we are describing the bitbucket CI/CD pipeline. If you are already using the bitbucket and want to apply CI/CD pipeline in your own project then no need to use other 3rd party site tools. Because bitbucket provides this feature. And it’s easy to use. But In starting you need to know how the pipeline works? What is the process to config and where you can find this tool in bitbucket?

On the left column, you can see the “Pipelines” option. Click on it this option then below view will be option on your screen:

Here you can config your CI/CD pipeline and you can see here data and process of all pipelines after config the pipeline.

Let’s start a step by step guide to integrate the bitbucket pipeline with React JS application. Here we assume that you have already set up your React JS application with bitbucket.

 

Step 1: Add bitbucket-pipeplines.yml in React JS application

To run the CI/CD pipeline, you need to add the “.yml” file in your repo. Let’s do it, add the “bitbucket-pipeline.yml” file. Below is the example file:

In this yml file, we have added only steps with two npm scripts. To learn more about how to setup a pipeline yml file please check it out here.

 

Step 2: Enable CI/CD pipeline

You have added a yml file in your repo. But if you check the “Pipeline” page on bitbucket then their still not showing data(pipeline dashboard). Because we have added the file only but you need to enable this file(pipeline) to run the next process. So, in this step we will enable the CI/CD pipeline by clicking on the “Enable” button. Below screen will ask for enable:

 

Step 3: CI/CD pipeline dashboard

Now you can see here all pipelines status and filter as well. Below screen will be appear after enable the pipeline:

Here you can see one pipeline status showing “In progress”. When you do any change in your code and push on bitbucket then the new pipeline process runs automatically. After run successfully with any error then show output same as below screen:

 

Step 4: CI/CD pipeline process screen

After clicking on any one pipeline you can see the process of each pipeline. Below screen will be open when you click on anyone pipeline:

This page runs all the scripts that you defined in the “bitbucket-pipelines.yml” file. On the right hand side(black screen), showing script processing data. And on the left hand, showing the results of the pipeline and number of steps listed with status that define in the yml file. Like here have defined the “Installing & Running Tests” step and you can do this step in the above screen under the Pipeline section.

These are the steps by using which you can integrate bitbucket CI/CD pipeline in your React JS application. I hope now you can easily set it up with your project.

 20,643 total views,  7 views today