Skip to content

Commit c6c45a8

Browse files
Add screenshots
1 parent f0946a8 commit c6c45a8

File tree

7 files changed

+27
-5
lines changed

7 files changed

+27
-5
lines changed

articles/static-apps/getting-started.md

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: "Quickstart: Building your first app with Azure Static Web Apps"
33
description: Learn to build an Azure Static Web Apps instance with your preferred front-end framework.
4-
services: azure-functions
4+
services: static-web-apps
55
author: craigshoemaker
6-
ms.service: azure-functions
6+
ms.service: static-web-apps
77
ms.topic: quickstart
88
ms.date: 05/08/2020
99
ms.author: cshoe
@@ -66,18 +66,27 @@ Now that the repo is created, you can create a static web app from the Azure por
6666

6767
Begin by configuring your new app and linking it to a GitHub repository.
6868

69+
:::image type="content" source="media/getting-started/basics-tab.png" alt-text="Basics tab":::
70+
6971
- Select your _Azure subscription_
7072
- Select or create a new _Resource Group_
7173
- Name the app **my-first-static-web-app**.
7274
- Valid characters are `a-z` (case insensitive), `0-9`, and `_`.
7375
- Select _Region_ closest to you
7476
- Select the **Free** _SKU_
7577
- Click the **Sign-in with GitHub** button and authenticate with GitHub
78+
79+
Once you sign in with GitHub, then enter the repository information.
80+
81+
:::image type="content" source="media/getting-started/repository-details.png" alt-text="Repository details":::
82+
7683
- Select your preferred _Organization_
7784
- Select **my-first-web-static-app** from the _Repository_ drop-down
7885
- Select **master** from the _Branch_ drop-down
7986
- Click the **Next: Build >** button to edit the build configuration
8087

88+
:::image type="content" source="media/getting-started/next-build-button.png" alt-text="Next Build button":::
89+
8190
### Build
8291

8392
Next, add configuration details specific to your preferred front-end framework.
@@ -89,39 +98,52 @@ Next, add configuration details specific to your preferred front-end framework.
8998
- Enter **dist/angular-basic** in the _App artifact location_ box
9099
- Click the **Review + create** button
91100

101+
:::image type="content" source="media/getting-started/review-create.png" alt-text="Review create button":::
102+
92103
# [React](#tab/react)
93104

94105
- Enter **/** in the _App location_ box
95106
- Clear the default value from the _Api location_ box
96107
- Enter **build** in the _App artifact location_ box
97108
- Click the **Review + create** button
98109

110+
:::image type="content" source="media/getting-started/review-create.png" alt-text="Review create button":::
111+
99112
# [Vue](#tab/vue)
100113

101114
- Enter **/** in the _App location_ box
102115
- Clear the default value from the _Api location_ box
103116
- Enter **dist** in the _App artifact location_ box
104117
- Click the **Review + create** button
105118

119+
:::image type="content" source="media/getting-started/review-create.png" alt-text="Review create button":::
120+
106121
# [No Framework](#tab/vanilla-javascript)
107122

108123
- Enter **/** in the _App location_ box
109124
- Clear the default value from the _Api location_ box
110125
- Clear the default value from _App artifact location_ box
111126
- Click the **Review + create** button
112127

128+
:::image type="content" source="media/getting-started/review-create.png" alt-text="Review create button":::
129+
113130
---
114131

115132
### Review + create
116133

117134
After the build validates, you can continue to create the application.
118135

119-
- Click the **Create** button
120-
- Once the deployment is complete, click the **Go to resource** button
136+
Click the **Create** button
137+
138+
:::image type="content" source="media/getting-started/create-button.png" alt-text="Create button":::
139+
140+
Once the deployment is complete, click the **Go to resource** button
141+
142+
:::image type="content" source="media/getting-started/go-to-resource-button.png" alt-text="Go to resource button":::
121143

122144
## View website
123145

124-
There are two automated aspects to deploying a static app. The first provisions the underlying Azure resources that make up your app. The second is a GitHub Actions workflow that builds and publishes your application.
146+
There are two aspects to deploying a static app. The first provisions the underlying Azure resources that make up your app. The second is a GitHub Actions workflow that builds and publishes your application.
125147

126148
> [!NOTE]
127149
> You can ensure that the GitHub Actions workflow is complete by checking the status of your commits available at `https://github.com/<YOUR_GITHUB_USERNAME>/my-first-static-app/actions`.
45.8 KB
Loading
3.71 KB
Loading
7.13 KB
Loading
5.05 KB
Loading
14.5 KB
Loading
5.03 KB
Loading

0 commit comments

Comments
 (0)