Skip to content

Commit df436a7

Browse files
authored
Suggested changes for preview environments (#19)
* Split into multiple articles * Update next steps
1 parent 8d620bb commit df436a7

File tree

4 files changed

+81
-100
lines changed

4 files changed

+81
-100
lines changed

articles/static-web-apps/TOC.yml

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,14 @@
4848
href: user-information.md
4949
- name: Custom authentication
5050
href: authentication-custom.md
51-
- name: Review pull requests in pre-production environments
52-
href: review-publish-pull-requests.md
5351
- name: Preview environments
54-
href: preview-environments.md
52+
items:
53+
- name: About preview environments
54+
href: preview-environments.md
55+
- name: Pull request environments
56+
href: review-publish-pull-requests.md
57+
- name: Branch environments
58+
href: branch-environments.md
5559
- name: Custom domains
5660
items:
5761
- name: About custom domains
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: Create branch preview environments in Azure Static Web Apps
3+
description: Expose stable URLs for specific branches to evaluate changes in Azure Static Web Apps
4+
author: craigshoemaker
5+
ms.author: cshoe
6+
ms.service: static-web-apps
7+
ms.topic: conceptual
8+
ms.date: 03/29/2022
9+
ms.custom: template-how-to
10+
---
11+
12+
# Create branch preview environments in Azure Static Web Apps
13+
14+
You can configure your site to deploy every change made to branches that aren't a production branch. This preview deployment lives for the entire lifetime of the branch and is published at a stable URL that includes the branch name. For example, if the branch is named `dev`, then the environment is available at a location like `<DEFAULT_HOST_NAME>-dev.<LOCATION>.azurestaticapps.net`.
15+
16+
## Configuration
17+
18+
To enable stable URL environments, make the following changes to your [configuration file](configuration.md).
19+
20+
- Set the `production_branch` input on the `static-web-apps-deploy` GitHub action to your production branch name. This ensures changes to your production branch are deployed to the production environment, while changes to other branches are deployed to a preview environment.
21+
- List the branches you want to deploy to preview environments in the `on > push > branches` array in your workflow configuration so that changes to those branches also trigger the GitHub Actions deployment.
22+
- Set this array to `**` if you want to track all branches.
23+
24+
## Example
25+
26+
The following example demonstrates how to enable branch preview environments.
27+
28+
```yml
29+
name: Azure Static Web Apps CI/CD
30+
31+
on:
32+
push:
33+
branches:
34+
- main
35+
- dev
36+
- staging
37+
pull_request:
38+
types: [opened, synchronize, reopened, closed]
39+
branches:
40+
- main
41+
42+
jobs:
43+
build_and_deploy_job:
44+
...
45+
name: Build and Deploy Job
46+
steps:
47+
- uses: actions/checkout@v2
48+
with:
49+
submodules: true
50+
- name: Build And Deploy
51+
id: builddeploy
52+
uses: Azure/static-web-apps-deploy@v1
53+
with:
54+
...
55+
production_branch: "main"
56+
```
57+
58+
> [!NOTE]
59+
> The `...` denotes code skipped for clarity.
60+
61+
In this example, the preview environments are defined for the `dev` and `staging` branches. Each branch is deployed to a separate preview environment.
62+
63+
## Next Steps
64+
65+
> [!div class="nextstepaction"]
66+
> [Review pull requests in pre-production environments](./review-publish-pull-requests.md)

articles/static-web-apps/preview-environments.md

Lines changed: 7 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,33 @@
11
---
2-
title: Create stable URLs for preview environments in Azure Static Web Apps
3-
description: Expose stable URLs for specific branches or environment to evaluate changes in Azure Static Web Apps
2+
title: Preview environments in Azure Static Web Apps
3+
description: Expose preview environments to evaluate changes in Azure Static Web Apps
44
author: craigshoemaker
55
ms.author: cshoe
66
ms.service: static-web-apps
7-
ms.topic: how-to
7+
ms.topic: conceptual
88
ms.date: 03/29/2022
99
ms.custom: template-how-to
1010
---
1111

12-
# Create stable URLs for preview environments in Azure Static Web Apps
12+
# Preview environments in Azure Static Web Apps
1313

14-
By default, when you deploy a site to Azure Static Web Apps [each pull request deploys a preview version of your site available through a temporary URL](review-publish-pull-requests.md). This version of the site allows you to review changes before merging pull requests. Once the pull request is closed, the temporary environment disappears.
14+
By default, when you deploy a site to Azure Static Web Apps [each pull request deploys a preview version of your site available through a temporary URL](review-publish-pull-requests.md). This version of the site allows you to review changes before merging pull requests. Once the pull request (PR) is closed, the temporary environment disappears.
1515

1616
Beyond PR-driven temporary environments, you can enable preview environments that feature stable locations. The URLs for preview environments take on the following form:
1717

1818
```text
1919
<DEFAULT_HOST_NAME>-<BRANCH_OR_ENVIRONMENT_NAME>.<LOCATION>.azurestaticapps.net
2020
```
2121

22-
This article demonstrates how to enable preview environments in GitHub.
23-
2422
## Deployment types
2523

2624
The following deployment types are available in Azure Static Web Apps.
2725

2826
- **Production**: Changes to production branches are deployed into the production environment. Your custom domain points to this environment, and content served from this location is indexed by search engines.
2927

30-
- **PR**: Pull requests against your production branch deploy to a temporary environment that disappears after the pull request is closed. The URL for this environment includes the PR number as a suffix. For example, if you make your first PR, the preview location looks something like `<DEFAULT_HOST_NAME>-1.<LOCATION>.azurestaticapps.net`.
31-
32-
- **Branch**: You can optionally configure your site to deploy every change made to branches that aren't a production branch. This preview deployment lives for the entire lifetime of the branch and is published at a stable URL that includes the branch name. For example, if the branch is named `dev`, then the environment is available at a location like `<DEFAULT_HOST_NAME>-dev.<LOCATION>.azurestaticapps.net`.
33-
34-
Preview environments are published to a URL that includes the environment or branch name as a suffix. For example, if the environment or branch is named `dev`, then the environment is available at a location like `<DEFAULT_HOST_NAME>-dev.<LOCATION>.azurestaticapps.net`.
35-
36-
## Configuration
37-
38-
To enable stable URL environments, make the following changes to your [configuration file](configuration.md).
39-
40-
- Set the `production_branch` input on the `static-web-apps-deploy` GitHub action to your production branch name
41-
- List the branches you want to include in preview environments in the `on > push > branches` array in your site configuration.
42-
- Set this array to `**` if you want to track all non-production branches.
43-
- If you want a single target environment, define the `deployment_environment` input on the `static-web-apps-deploy` GitHub action.
44-
45-
## Examples
46-
47-
The following examples demonstrate how to enable stable preview environments.
48-
49-
### Deployment environment
50-
51-
```yml
52-
name: Azure Static Web Apps CI/CD
53-
54-
on:
55-
push:
56-
branches:
57-
- "**"
58-
...
59-
60-
jobs:
61-
build_and_deploy_job:
62-
...
63-
name: Build and Deploy Job
64-
steps:
65-
- uses: actions/checkout@v2
66-
with:
67-
submodules: true
68-
- name: Build And Deploy
69-
id: builddeploy
70-
uses: Azure/static-web-apps-deploy@v1
71-
with:
72-
...
73-
deployment_environment: "dev"
74-
```
75-
76-
> [!NOTE]
77-
> The `...` denotes code skipped for clarity.
78-
79-
In this case, the named environment is labeled as `dev` and tracks all non-production branches. If you wanted to only track changes specific branches, then define them individually in the `branches` array.
80-
81-
Since the `deployment_environment` value is set, then changes to all branches roll up into a single environment.
82-
83-
### Branch deployments
84-
85-
```yml
86-
name: Azure Static Web Apps CI/CD
87-
88-
on:
89-
push:
90-
branches:
91-
- main
92-
- dev
93-
- feature1
94-
- feature2
95-
pull_request:
96-
types: [opened, synchronize, reopened, closed]
97-
branches:
98-
- main
99-
100-
jobs:
101-
build_and_deploy_job:
102-
...
103-
name: Build and Deploy Job
104-
steps:
105-
- uses: actions/checkout@v2
106-
with:
107-
submodules: true
108-
- name: Build And Deploy
109-
id: builddeploy
110-
uses: Azure/static-web-apps-deploy@v1
111-
with:
112-
...
113-
production_branch: "main"
114-
```
115-
116-
> [!NOTE]
117-
> The `...` denotes code skipped for clarity.
28+
- [**Pull requests**](review-publish-pull-requests.md): Pull requests against your production branch deploy to a temporary environment that disappears after the pull request is closed. The URL for this environment includes the PR number as a suffix. For example, if you make your first PR, the preview location looks something like `<DEFAULT_HOST_NAME>-1.<LOCATION>.azurestaticapps.net`.
11829

119-
Here, the preview environments are defined for the `dev`, `feature1`, and `feature2` branches. Since the `deployment_environment` value isn't set, then each branch is deployed to its own environment.
30+
- [**Branch**](branch-environments.md): You can optionally configure your site to deploy every change made to branches that aren't a production branch. This preview deployment lives for the entire lifetime of the branch and is published at a stable URL that includes the branch name. For example, if the branch is named `dev`, then the environment is available at a location like `<DEFAULT_HOST_NAME>-dev.<LOCATION>.azurestaticapps.net`.
12031

12132
## Next Steps
12233

articles/static-web-apps/review-publish-pull-requests.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,4 @@ To verify the changes in production, open your production URL to load the live
116116
## Next steps
117117

118118
> [!div class="nextstepaction"]
119-
> [Setup a custom domain](custom-domain.md)
119+
> [Branch preview environments](branch-environments.md)

0 commit comments

Comments
 (0)