React Pipeline Box

This box is a starter template that combines the DevOps Pipeline with Truffle React-Box.

The Pipeline, built using GitHub Action, contains Dev and QA environment. The Dev environment deploys the application to a personal Ethereum blockchain using Ganache running in a container hosted by Azure Container Instances and QA deploys to the Sepolia testnet. The frontend will be hosted in Azure Static Web Apps.

• Installation
• Setup
• Check pipeline results
• Futher reading
• FAQ

Installation

You can install the box with Truffle:

truffle unbox lijie-lee/react-pipeline-box

Setup

The pipeline file and scripts related will be after unboxing. This section will introduces how to setup the project.

• Prepare
• Trigger pipeline

Prepare

Before push the project to GitHub remote to trigger GitHub Action, some configurations and steps need to be done.

1. Create AZURE_CREDENTIALS

Create Azure_CREDENTIALS for deploying Azure Resource. The format is as follow:

{
    "clientId": "xxxxxxxxxxxxxxxxxxxxxxx",
    "clientSecret": "The 'Value' of Client Secrets",
    "subscriptionId":"xxxxxxxxxxxxxxxxxxxxxxx",
    "tenantId":"xxxxxxxxxxxxxxxxxxxxxxx"
}

2. Create Infura Project

Create project on infura for deploying contracts to testnet in the QA job of pipeline. After creating, obtain the API KEY.

3. Request TestNet Ether

As deploying contracts to testnet cost ether, your account should own enough test ether. If not, request some from faucet.

4. Configure settings of repository

Configure variables needed by the pipeline in settings page of GitHub repository.

Create three Actions secrets:

Name	Secret
AZURE_CREDENTIALS	the content of AZURE_CREDENTIALS
API_KEY	API KEY of infura project
MNEMONIC	MNEMONIC of your account owns sepolia ETH

5. Configure validation approvers for pipeline

The Azure resources, created by the pipeline, should be deleted once they are no longer needed. Before deleting, there is an opportunity for the approvers to review the code.

Configure the DEV_VALIDATION_APPROVERS and QA_VALIDATION_APPROVERS in the .github/workflow/pipelines.yaml file.

An issue will be created to block the pipeline and wait for approval. The approvers need to respond the issue and then the pipeline will automatically continue and the issue will be closed.

This interaction job relies on a third-party github action. For more detail, check manual-approval

Trigger pipeline

After preparing all configurations and steps, push the project to remote to trigger pipeline.

By default, The pipieline will be triggered only when events of push and pull_request happen on the main branch.

Check pipeline results

On the summary page of GitHub Action, there are some results generated by the pipeline.

1. Artifacts generated by action, including test results and compiled codes

2. dev summary generated by dev job.

Add the test account to Metamask and check your DApp by navigating to the App URL.

3. qa summary generated by qa job.

Check your DApp by navigating to the App URL.

Remember add your Sepolia account to metamask.

note:

• For only setuping the box locally, check React-Box Setup

Further reading

• Difference from React-Box

• Project Structrue by unboxing

FAQ

• How to use metamask?

1. Getting started with MetaMask
2. How to add a custom network RPC
3. Using MetaMask with Ganache

• Find more Q&A by QA