Azure Pipelines Automated Deployment (Git + React + TypeScript)
Table of Contents
Introduction
This memo is the React + TypeScript version of Azure Pipelines Automated Deployment (Git + ASP.NET Core).
It introduces the steps to automatically deploy a React application triggered by a push to a Git repository.
Prerequisites and Notes
- The Git repository used is within Azure DevOps (GitHub is also possible, but the YAML description will change).
- Please create your Azure DevOps project and Git repository in advance.
- If you want to use Azure Pipelines for free, you will need to apply.
- The React application is generated from the Visual Studio React + TypeScript template.
- It is assumed that SSR is not used. Regular React applications without SSR are built before deployment, resulting in a static website with only HTML, JavaScript, and image resources. Therefore, the deployment target will be Azure's 'Static Web App'.1
Steps
1Create a Static Web App
From the Azure portal, select Create a resource > Web > Static Web App (Figure 1).
Select 'Azure DevOps' as the source and choose your repository information (Figure 2).
Figure 2. Create Static Web App
Enter the build details (Figure 3).
Figure 3. Create Static Web App Build Details
- Build Presets: Select 'React'
- App location: Relative path to your React project, relative to the solution folder (Important)
- Output location: Specify 'dist' (Important)
Click 'Review + create' to create the Static Web App.
2Execute Deployment
Navigate to the created Static Web App and click Run Azure DevOps Pipeline (Figure 4).
Figure 4. Run Azure DevOps Pipeline
After a while, the deployment will fail as shown below (Figure 5).
*If the deployment succeeds, proceed to step 4.
Click the red 'x' mark to check the detailed error message (Figure 6).
Could not load /vite.svg (imported by src/App.tsx): crypto.hash is not a function
When Vite tried to load vite.svg, the build failed because crypto.hash does not exist in Node.js 18.
3Modify YAML
The cause of the error is that the Node.js version in Azure Static Web Apps' internal build environment (Oryx) is 18.20.8. (The pre-installed Node.js version may change in the future.)
Let's specify to use a newer version of Node.js in the build environment.
Click the 'Edit' button (Figure 7) to transition to the YAML file editing screen.
env:
NODE_VERSION: '22.9.0'
Add this to specify the Node.js version.
name: Azure Static Web Apps CI/CD
pr:
branches:
include:
- master
trigger:
branches:
include:
- master
jobs:
- job: build_and_deploy_job
displayName: Build and Deploy Job
condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
pool:
vmImage: ubuntu-latest
variables:
- group: Azure-Static-Web-Apps-nice-desert-0bb7b8e1e-variable-group
steps:
- checkout: self
submodules: true
- task: AzureStaticWebApp@0
env:
NODE_VERSION: '22.9.0'
inputs:
azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_DESERT_0BB7B8E1E)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "reactproject1" # App source code path
api_location: "" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######
Click Validate and save to save (Figure 8).
Deployment completed successfully (Figure 9).
Figure 9. Deployment successful
4Verify Operation
Let's access the website and verify its operation.
Click the Static Web App URL (Figure 10).
The website is displayed (Figure 11).
This completes the setup of the automated deployment environment.
Issues and Improvements
Automated deployment is now working, but there is one issue.
If there is an error in the React source code, the deployment process will continue even if compilation fails, resulting in a blank screen when viewed in a browser. To avoid this, we will modify the YAML file.
Insert the following code (reactproject1 should be changed to match your project).
# Build Vite + React
- script: |
cd reactproject1
npm ci
npm run build
displayName: Build Vite + React
Build is performed with npm run build.
If the build fails, the exit code will be a non-zero value, which will stop the Pipeline execution here.
The entire YAML code after insertion is as follows.
name: Azure Static Web Apps CI/CD
trigger:
branches:
include:
- master
jobs:
- job: build_and_deploy_job
displayName: Build and Deploy Job
condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
pool:
vmImage: ubuntu-latest
variables:
- group: Azure-Static-Web-Apps-nice-desert-0bb7b8e1e-variable-group
steps:
- checkout: self
submodules: true
# Build Vite + React
- script: |
cd reactproject1
npm ci
npm run build
displayName: Build Vite + React
- task: AzureStaticWebApp@0
inputs:
azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_DESERT_0BB7B8E1E)
app_location: "reactproject1"
output_location: "dist"
skip_app_build: true
We also made the following modifications:
Removed
prsection
Theprsection specifies triggering on Pull Request creation/update. It is not needed in this case, so it was removed.Added
skip_app_build: true
This skips the build usingAzureStaticWebApp@0.
Since we are building withnpm run build, there is no need to build withAzureStaticWebApp@0.Removed
NODE_VERSIONspecification
Since there is no need to build withAzureStaticWebApp@0, there is no need to specify the Node.js version. When building withnpm run build, the Node.js on the virtual machine (ubuntu-latest) that executes the deployment will be used. 2
- Removed unnecessary comments
If a compilation error occurs, it will look like this (Figure 12).
