Skip to content

Commit 0319fd5

Browse files
craigshoemakercraigshoemaker
committed
Add GitHub Actions workflow article
1 parent 688c143 commit 0319fd5

File tree

1 file changed

+161
-0
lines changed

1 file changed

+161
-0
lines changed

‎articles/static-apps/github-actions-workflow.md

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
title: Setup GitHub Actions workflows for Azure Static Web Apps
3+
description: Learn how to use GitHub repositories to set up continuous deployment to Azure Static Web Apps.
4+
services: static-web-apps
5+
author: christiannwamba
6+
ms.service: static-web-apps
7+
ms.topic: conceptual
8+
ms.date: 05/08/2020
9+
ms.author: chnwamba
10+
---
11+
# Setup GitHub Actions workflows for Azure Static Web Apps
12+
13+
When you create a new Azure Static Web App resource, Azure generates a GitHub Actions workflow to control the app's continuous deployment. The workflow is driven by YAML file. This article details the structure and options of the workflow file.
14+
15+
Deployments are initiated by [triggers](#triggers), which run [jobs](#jobs) that are defined by individual [steps](#steps).
16+
17+
## File location
18+
19+
When you link your GitHub repository to Azure Static Web Apps, a workflow file is added to the repository.
20+
21+
Follow these steps to view the generated workflow file.
22+
23+
1. Open an the app's repository on GitHub.
24+
1. From the _Code_ tab, click on the `.github/workflows` folder.
25+
1. Click on the file with a name that looks like `azure-static-web-apps-<RANDOM_NAME>.yml`.
26+
27+
The YAML file in your repository will be similar to the following example:
28+
29+
```yml
30+
name: Azure Static Web Apps CI/CD
31+
32+
on:
33+
push:
34+
branches:
35+
- master
36+
pull_request:
37+
types: [opened, synchronize, reopened, closed]
38+
branches:
39+
- master
40+
41+
jobs:
42+
build_and_deploy_job:
43+
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
44+
runs-on: ubuntu-latest
45+
name: Build and Deploy Job
46+
steps:
47+
- uses: actions/checkout@v1
48+
- name: Build And Deploy
49+
id: builddeploy
50+
uses: Azure/static-web-apps-deploy@master
51+
with:
52+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_RIVER_0AFDB141E }}
53+
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
54+
action: 'upload'
55+
###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
56+
app_location: '/' # App source code path
57+
api_location: 'api' # Api source code path - optional
58+
app_artifact_location: 'dist' # Built app content directory - optional
59+
###### End of Repository/Build Configurations ######
60+
61+
close_pull_request_job:
62+
if: github.event_name == 'pull_request' && github.event.action == 'closed'
63+
runs-on: ubuntu-latest
64+
name: Close Pull Request Job
65+
steps:
66+
- name: Close Pull Request
67+
id: closepullrequest
68+
uses: Azure/static-web-apps-deploy@master
69+
with:
70+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_RIVER_0AFDB141E }}
71+
action: 'close'
72+
```
73+
74+
## Triggers
75+
76+
A GitHub Actions [trigger](https://help.github.com/actions/reference/events-that-trigger-workflows) notifies a Github Actions workflow to run a job based off event triggers. Triggers are listed using the `on` property in the workflow file.
77+
78+
```yml
79+
on:
80+
push:
81+
branches:
82+
- master
83+
pull_request:
84+
types: [opened, synchronize, reopened, closed]
85+
branches:
86+
- master
87+
```
88+
89+
Through settings associated with the `on` property, you can define which branches trigger a job, and set triggers to fire for different pull request states.
90+
91+
In this example, a workflow is started as the _master_ branch changes. Changes that start the workflow include pushing commits and opening pull requests against the chosen branch.
92+
93+
## Jobs
94+
95+
Each event trigger requires an event handler. [Jobs](https://help.github.com/actions/reference/workflow-syntax-for-github-actions#jobs) define what happens when an event is triggered.
96+
97+
In the Static Web Apps workflow file, there are two available jobs.
98+
99+
| Name | Description |
100+
|---------|---------|
101+
|`build_and_deploy_job` | Executes when you push commits or open a pull request against the branch listed in the `on` property. |
102+
|`close_pull_request_job` | Executes ONLY when you close a pull request. |
103+
104+
## Steps
105+
106+
Steps are sequential tasks for a job. A step carries out actions like installing dependencies, running tests, and deploying your application to production.
107+
108+
A workflow file defines the following steps.
109+
110+
| Job | Steps |
111+
|---------|---------|
112+
| `build_and_deploy_job` |<ol><li>Checks out the repository in the Action's environment.<li>Builds and deploys the repository to Azure Static Web Apps.</ol>|
113+
| `close_pull_request_job` | <ol><li>Notifies Azure Static Web Apps that a pull request has closed.</ol>|
114+
115+
## Build and deploy
116+
117+
The step named `Build and Deploy` builds and deploys to your Azure Static Web Apps instance. Under the `with` section, you can customize the following values for your deployment.
118+
119+
```yml
120+
with:
121+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_RIVER_0AFDB141E }}
122+
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
123+
action: 'upload'
124+
###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
125+
app_location: '/' # App source code path
126+
api_location: 'api' # Api source code path - optional
127+
app_artifact_location: 'dist' # Built app content directory - optional
128+
###### End of Repository/Build Configurations ######
129+
```
130+
131+
| Property | Description | Required |
132+
|---|---|---|
133+
| `app_location` | Location of your application code.<br><br>For example, enter `/` if your application source code is at the root of the repository, or `/app` if you application code is in a directory called `app`. | Yes |
134+
| `api_location` | Location of your Azure Functions code.<br><br>For example, enter `/api` if your app code is in a folder called `api`. | No |
135+
| `app_artifact_location` | Location of the build output directory relative to the `app_location`.<br><br>For example, if your application source code is located at `/app`, and the build script outputs files to the `/app/build` folder, then set `build` as the `app_artifact_location` value. | No |
136+
137+
The `repo_token`, `action`, and `azure_static_web_apps_api_token` values are set for you by Azure Static Web Apps shouldn't be manually changed.
138+
139+
## Customizations
140+
141+
There are few additional configuration settings available that are not generated in the workflow file by default.
142+
143+
### Custom build commands
144+
145+
You can have fine-grained control over what commands run during a deployment.
146+
147+
The deployment always calls `npm install` before any custom command.
148+
149+
| Command | Description |
150+
|---------------------|-------------|
151+
| `app_build_command` | Defines a custom command to run during deployment of the static content application.<br><br>For example, to configure a production build for an Angular application enter `ng build -prod`. |
152+
| `api_build_command` | Defines a custom command to run during deployment of the Azure Functions API application. |
153+
154+
### Route file location
155+
156+
The `routes_location` property defines the location of the [routes.json](routes.md) file relative to the root of the repository.
157+
158+
## Next steps
159+
160+
> [!div class="nextstepaction"]
161+
> [Review pull requests in pre-production environments](review-publish-pull-requests.md)

0 commit comments

Comments
 (0)