Building a React App using Catalyst Pipelines

Building a React App using Catalyst Pipelines

Catalyst Pipelines provides a comprehensive platform for Continuous Integration and Continuous Deployment (CI/CD). It covers everything from building and compiling your code to running automated tests and deploying your applications. In this post, we'll walk through creating a catalyst-pipeline.yaml file to support the following problem statement. 

 

Problem Statement:

A developer has a React app with the code stored in a GitHub repository. Each time a commit is pushed to the master branch, the build process should automatically trigger. Once the build process is completed the build artifact should be available to be downloaded.

Let's see how the above use case can be solved with the Catalyst pipeline.

  1. Let's first connect the GitHub account to Catalyst.

Settings -> General Settings -> Integration -> GitHub Integration


  1. Once the GitHub account is connected, close the settings and click on the "Pipelines" icon from the left bottom on the service icon menu.


  1. Click on Create Pipeline

    1. Give a name for your pipeline

    2. Choose GitHub

    3. Select the GitHub org where your repository is located

    4. Select your repository

 


  1. Click on Continue

  2. Select "Create default YAML template"

 


  1. Click on Create

 


The above is the default template; we need to edit the template so that we can achieve our goal.

 

Before diving into the problem statement, we need to understand Catalyst Pipelines offers a platform to carry out the CI/CD process, which means. To execute the process, we need to define our platform. A platform can be defined with Runners and Images.

Runner:

A runner is a computing agent, similar to a virtual instance. A runner in Catalyst Pipeline can be had with three configurations.

  1. Low : 1 GB RAM, 0.8 vCPU(Virtual), 2 GB Disk Space

  2. Medium : 2 GB RAM, 1.2 vCPU(Virtual), 2 GB Disk Space

  3. High : 4 GB RAM, 2.0 vCPU(Virtual), 2 GB Disk Space

 

Image:

A Docker Image, where you want to execute the build process.

 

From the above context, we can see that a Runner and an Image combine to give us a platform.

Now for our problem statement, we are good to go with a "Medium" runner configuration and "node:18" image.

 

Let's remove the boiler plate code and start to define our Runner.

Create Runner:

  1. From the Assistant, Click on Runner

  2. Give your runner a name and Select a Medium from Runner Configuration


  1. Click on Generate


  1. Click Add To Code

 

Once it is done the catalyst-pipeline.yaml should look like the below picture:


 

Create Image

  1. From the assistant, click on Create Image

  2. Enter the image variable name and image name

  3. Leave the registry input empty, By default, if the registry field is empty, the pipeline while executing fetched the image from Docker Hub.

  4. For user name and password enter the following: <<env.DOCKER_HUB_USERNAME>>, <<env.DOCKER_HUB_PASSWORD>>

  5. Once filled, it should look like the following.


  1. Click on Generate


  1. Click on Add To Code

 

Once it is done the catalyst-pipeline.yaml should look like the below picture:


 

Configuring Global Variable:

We have used Pipeline's Global variable in the username and password field. We need to define that variable with your credentials. To do that,

  1. Click on Save as Draft and then the back button.

 

You should be seeing a screen like the below picture:


  1. Click on Global Variables, and enter the details like shown in the below image


you can refer to this documentation to know more about creating a Docker Hub account.

  1. Click on Save

  2. Click in Configure YAML

 

Creating Jobs:

A Job is a sequence of steps to be executed in the pipeline; A step is the smallest building block of a pipeline. They are a set of commands to be executed to build, deploy, or test the source code.

For the given problem statement, We can have a single Job for building and uploading the build artifact. The build artifacts are stored in within the Catalyst project in a storage service called stratus.  Before uploading to Stratus, we need to create a bucket. Refer to this documentation for creating a bucket. Follow the below steps after creating the bucket.

  1. From the assistant, click on Job

  2. Give a Job name, Select "Create using Steps".

  3. From the drop-down menu, select the Runner and Image which was created previously

  4. If your code has a different working directory, you can choose to change it.

  5. Enter the build scripts.


 

build-job:

    runner: builder

    image: node18

    steps:

      - >-

        apt-get update && apt-get install -y zip unzip && rm -rf

        /var/lib/apt/lists/*

      - npm install

      - npm run build

      - zip -r build.zip build

 

  1. Click on Generate


  1. Click on Add To Code

  2. Once that done the catalyst-pipeline.yaml should look like the following


  1. As mentioned earlier, the build and upload artifact are part of same job we need to upload the ziped build artifact which can be done with the following script.


in the "location" key you can give your bucket name and path where you want to upload the build artifact, for more information check out this doc.

 

Instead of uploading the artifact to stratus, if you want to use the artifact and upload it to a different service, then you can install the respective CLI in the runner using scripts and execute the deploy command.

Once the jobs are created, we need to execute these jobs, A Job will be executed only if the job is added to a stage.

Creating Stage:

A stage is a pivotal component in a pipeline that organizes the execution sequence of jobs within a pipeline. Each stage represents a distinct phase in the software delivery process, such as building, testing, or deploying an application

For our problem statement, we'll be using a single stage.

  1. From the Assistant, Select Stage

  2. Give the stage a name and select the job that was created on the previous step.


  1. Click on Generate


  1. Click in Add To Code

  2. Once that done, the catalyst-pipeline.yaml should look the following


Committing the Changes:

We are now done with the pipeline file part; all we need to do now is to commit this to the GitHub repository.

  1. Click on the commit button


  1. Enter a commit Message and Click on commit


Once the changes are committed, the pipeline will be executed automatically.

Pipeline Execution:




Here's the link to the GitHub repository:

https://github.com/rengarajan-dev/pipeline-app

    • Announcements

    • Important Announcements in Support for Catalyst Features

      Hello Catalyst Users, This announcement is to bring to your notice some of the recent updates in our support for various Catalyst components, to ensure that your existing Catalyst applications function properly. You can continue to build robust applications
    • Introducing Catalyst 2.0, the simplest cloud-based pro-code development platform.

      Dear Catalyst Community, We are beyond thrilled to present you Catalyst 2.0—the new-age, pro-code development platform that redefines the way you build, deploy, and scale apps. Catalyst 2.0 is not a mere upgrade, but a significant leap into the future
    • Set budgets to optionally disable your Catalyst production environment

      Hello all,    We are pleased to inform you that you can now configure the automatic disabling of a project's production environment upon reaching a specified budget's threshold. Budget alerts in Catalyst facilitate setting usage limits in amounts or Catalyst
    • #CatalystServerless Hackathon 2022

      We are pleased to announce #CatalystServerless Hackathon with prizes worth $5000 up for grabs. Create a working prototype aimed to solve a critical business issue using Catalyst and stand a chance to win exciting prizes. The Hackathon will happen in 3
    • Share your interest to participate in the #CatalystServerless Blogathon

      Hi, we are working on announcing the next edition of the #CatalystServerless Blogathon. Please fill up this form to stay posted on all updates related to the Blogathon. https://zfrmz.com/JN9ChxPU9JQpPgB1vRp8

      Catalyst Community