Skip to main content
Version: 4.5

ReactJS Application Stack

ReactJS Application Stack​

The ReactJS application stack is used to build and deploy Web applications in the ReactJS framework and produce deployment-ready containers for the SCALE environment.

The containers produced in this application stack share common requirements with other application stacks deployed to the SCALE environment. These shared requirements include:

  • Security scanning for any vulnerabilities
  • Code coverage scanning for test quality
  • Staging of the application container in the appropriate Docker container repositories and tagged according to SCALE conventions
  • Completion of Unit Testing and User Acceptance Testing
  • Gated approvals before allowing deployments into pre-production and production environments
  • Audit trail and history of deployment within the SCALE CI/CD Pipeline

Because of the above-listed requirements, the ReactJS application stack is provided in order to support the build and deployment of Java/ReactJS applications in a manner that integrates with SCALE requirements and processes. The flow of deployment includes first a Continuous Integration stage of processing in a pipeline prior to deployment in the Continuous Deployment stages. The Continuous Integration stage focuses on building the application, running scans to check for test coverage and security vulnerabilities, and staging the container in the appropriate Docker repository ready for deployment. Subsequent pipeline stages deploy the application to the appropriate target Kubernetes spaces.

Getting Started in the Azure DevOps environment​

Refer to the following link to learn about getting started in the Azure DevOps environment: Getting Started in Azure DevOps Environment

Source Code Repository Structure​

The structure of the source code repository for the ReactJS application stack will contain a source directory tree with the application source code, and one or two directory trees with details for deployment, as follows:

  • source - this directory will contain a package.json file for configuring and building the application src sub-directory contains the source code of the application itself

  • workspaceName-serviceName - (named as the workspaceName followed by the application or service name) contains the Helm chart deployment materials if Helm v2 charts are used (this is the default)

  • manifests - contains Kustomize manifests if Kustomize overlay files are used as an alternative to Helm charts

Also at the top of the repository is a file called azure-pipelines.yml. This file contains reference to the appropriate version of the CI/CD pipeline logic, some variables unique to the application (e.g. container version) as well as YAML data structures providing key information about the environments into which to deploy the application and the sequence of events to complete the deployment (e.g. dependencies, additional steps to retrieve secrets to be passed to the deployed container, etc).

Additional items in this repository will generally not be modified and should not be changed to avoid risk of breaking the pipeline workflows.

Application Configuration into the SCALE CI/CD Pipeline​

Once navigated to the appropriate repository, it can be cloned to a local development environment (i.e. local workstation) for the actual software development and configuration work for the ReactJS application to be deployed. Configuration of the pipeline would include setting the appropriate container version (reflected in the appVersion variable under the variables: section) and defining the target workspace and hostspaces plus any dependencies between hostspaces or prerequisite deployment objects required. Once it is ready to be deployed into the SCALE workspace and the new application version has been set as well, create a Git pull request for the updates to the code. The creation of this pull request will trigger the Continuous Integration pipeline to start.

Continuous Integration and Continuous Delivery Pipelines​

Please note that the document "SCALE Concepts and Procedures" contains more details about the specific flow of the application through the CI/CD pipelines

Once a pull request has been created against the Git repository, it will trigger the start of the CI/CD pipeline in order to build, scan and prepare the application to deploy into the Workspace. Although the CI/CD pipeline flow is automatically triggered, there are times when it needs to be manually run (or re-run) and the pipeline should be examined for the results of its preparation of the application and deployments. Details for examining the CI/CD pipeline and analyzing its results can be found here: Continuous Integration and Continuous Delivery Pipelines

Upgrading to Pipeline v4.5​

In Pipeline Version 4.5, React has been upgraded to the latest version (V18), and all packages have been updated to their respective compatible versions. It's important to emphasize that Pipeline v4.5 maintains backward compatibility with all current versions of react operating within SCALE. Below, you'll find some of the prominent changes introduced in the application since the release of v4.0 of the pipeline:

  1. DR capability
  2. Changes to the helm charts (config map and Ambassador files) - refer
  3. Variable groups - The introduction of variable groups allows for more flexible and dynamic management of variables within the application.
  4. Kong & WAF Changes - Introduced Kong Gateway and Web Application Firewall (WAF) aimed at improving security and performance.

To transition to v4.5, we recommend using the dxpctl tool. - Access the latest tool here Downloadable Version Docker Build/Run Locally

For instructions on changing the react version in the azure-pipeline.yml file to v1.70 in v4.5, please consult this section of the documentation. Additional insights on react v1.70 can be found in the react blog.

Pipeline Definition: azure-pipelines.yml file​

The logic for the v4.5 reactjs CI/CD pipeline is a common and shared code base for all applications; however the configuration of the pipeline that applies the common logic to the specific application is defined in the top level directory of the source code repository for the application in a file named azure-pipelines.yml.

The structure of the azure-pipelines.yml file is a YAML file using standard YAML syntax. For general information about YAML structures, there are many available resources, including the tutorial at this link: YAML Tutorial.

There are certain required data elements that must be defined within the azure-pipelines.yml file as a prerequisite to the CI/CD pipeline running while other elements are optional and used to modify the standard behavior or the CI/CD pipeline.

More details about the azure-pipelines.yml file can be found here: General Structure of the azure-pipelines.yml File

Configuration which refers the logic in the pipeline for the reactjs application, repo & branch can configure under resources/repositories variable

resources:
  repositories:
    - { repository: templates, type: git, name: devexp-engg/automation, ref: release/v4.5 }
    - { repository: spaces, type: git, name: spaces, ref: devops/v1.0 }

Application-Specific Pipeline Configuration​

The extends YAML object is a complex object consisting of additional YAML objects. This object is used to extend the pipeline logic (referenced by the repository defined in the resources object) by (a) referencing the correct appstack pipeline entry point (devops/reactjs.yml for the reactjs pipeline) and (b) passing a set of YAML objects as parameters to influence the behavior of the pipeline to meet an application teams specific needs.

The extends YAML object consists of 2 objects beneath it:

  • template
  • parameters

The template YAML object is a single value set to the initial entry point for the v4.5 pipeline for the reactjs appstack, so it should always be defined as follows:

extends:
  template: devops/reactjs.yml@spaces

Please refer to upgrade document to know more about reactjs.yml@templates which holds required metadata for the pipeline.

The parameters YAML object is defined immediately following the template object and at the same indentation level. This is the object that requires the most attention and definition to be set up. The parameters YAML object includes multiple parameters which can be used to configure CI/CD pipeline. Primarily this object contains parameters used for application builds. A typical setting in here would be to define appVersion used to build the application, looking like the following (including all of the extends object preceding it):

extends:
  template: pipeline/reactjs/init.yml@templates
  parameters:
    appVersion: 4.5.x
    nodejs:
      version: "18"

Horizontal Pod Auto-scaler​

Pipeline v4.5 includes configuration of Horizontal Pod Auto-scaling for any deployment. Please refer to documentation for more details. To configure HPA use below template in values.yaml for the host space required. Below commented example starts the deployment with a single pod which can be scaled up to 3 pods when avarage cpu usage crossed 70%.

# If you are using Horizontal POD Auto Scaler, you must disable ReplicaCount
replicaCount: 2

# hpa:
#   min: 1
#   max: 3
#   cpu: 70

On-demand flag to run any workload on AWS on demand nodes​

By default when the application deployed on SCALE AWS clusters will be scheduled to run on Spot nodes. If the application team decided to move their application to on-demand nodes for stability and it's handled manually. This demand will provide an option for end-user to choose between on-demand vs Spot during the deployment and also this will all handled part of automation and no need of manual work. We have provide an option for end-user to choose to where their application to be deployed. User can opt in by updating the values.yaml ,by default it is set to false and you can inherit this in values.hostspace.yaml as needed as below .

 ## Flag to deploy workload on ondemand nodes
ondemand:
  enabled: true

DR changes​

With the introduction of pipeline v4.5, we have implemented DR capabilities that require changes in the Helm chart. Please refer to the document below for the necessary modifications and kindly update your Helm chart accordingly.

DR Prerequisites (V4.4)

Please refer to the following document to prepare your codebase for disaster recovery.

DR Manual Upgrade (V4.4)

Pod Anti-Affinity​

Pipeline v4.5 enchances pod scheduling on the cluster with addition of Pod Anti-affinity. For multi-pod applications, this ensures pod scheduled scattered across the nodes within a cluster.

Detailed Pipeline Configuration​

The remainder of the configuration work in the azure-pipelines.yml file focuses primarily on defining the target workspace and hostspaces for the ReactJS application and providing details for these spaces, any additional tasks needed to prepare the deployments, and dependencies that will dictate the sequence of deployments in these spaces beyond the established SCALE environment deployment approval processes. Details for configuring these elements of the pipeline can be found here: Pipeline Configuration Details

Kubernetes Deployment Objects​

In order to deploy an application a number of Kubernetes objects must be defined and deployed. The definition of these objects is controlled through a set of files in one of two forms: Either as Helm charts (the default method) or as Kustomize files. Information about the contents and customization of these Kubernetes deployment objects can be found here: Kubernetes Deployment Objects

Defining hostapces for application deployment​

Pipeline 4.5 simplifies the structure of azure-pipelines.yml to define all spaces(workspace,devint,db/hostspaces) as a single list. Older format is still supported but to continue using old format ref and k8s must be removed from spaces. It's strongly recommended to follow newer format. acceptanceSpace must be specified in the file. For example:

parameters:
  acceptanceSpace: devexp-ae103-stg
  spaces:
    workspace:
      helm:
        overrideFiles: |
          devexp-reactjs/values.workspace.yaml
    devexp-ae101-dnt:
      helm:
        overrideFiles: |
          devexp-reactjs/values.hostspace.yaml
    devexp-ae103-stg:
      helm:
        overrideFiles: |
          devexp-reactjs/values.hostspace.yaml
    devexp-npc02-prd:
      helm:
        overrideFiles: |
          devexp-reactjs/values.hostspace.yaml

Skipping deployments​

It's a new handy feature introduced in v4.x pipeline. During initial builds or testing, deployments can be excluded for all spaces (workspace,devint,db/hostspaces) even if configured in azure-pipelines.yaml. Pipeline will only perform application build and scans.

extends:
  template: devops/reactjs.yml@spaces
  parameters:
    system:
      skipDeploy: true

Update nginx configuration file​

As part of SCALE pipeline releases, we keep update base images that we provide for each application stack. Each newer version of base image may have latest configurations supported. Post upgrade, please refer Configuration Details, compare and update newer configurations into your repository.

Troubleshooting​

If something fails to deploy, the information about why the deployment failed (or was not even initiated) will be found in the logs of the CI/CD pipeline and can be tracked down using the methods described earlier in the "Continuous Integration and Continuous Delivery Pipelines" section.

However, additional information may be required either to better troubleshoot a failed deployment or to investigate the runtime behavior of an application that has been successfully deployed. In those cases, much of the information can be found in the Rancher web console. Information about navigating and analyzing information from the Rancher web console can be found here: Navigating the Rancher Web Console