Skip to content

Commit b680f5a

Browse files
American-DipperAmerican-Dipper
authored
Merge pull request #270003 from rayoef/add-exec-docs-static-web-apps
Initial update for Static web apps
2 parents 5baaacf + 17f6f10 commit b680f5a

File tree

1 file changed

+114
-137
lines changed

1 file changed

+114
-137
lines changed

‎articles/static-web-apps/get-started-cli.md

Lines changed: 114 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -5,184 +5,161 @@ services: static-web-apps
55
author: craigshoemaker
66
ms.service: static-web-apps
77
ms.topic: quickstart
8-
ms.date: 08/03/2022
8+
ms.date: 03/21/2024
99
ms.author: cshoe
10-
ms.custom: mode-api, devx-track-azurecli
10+
ms.custom: mode-api, devx-track-azurecli, innovation-engine, linux-related-content
1111
ms.devlang: azurecli
1212
---
1313

1414
# Quickstart: Building your first static site using the Azure CLI
1515

16+
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://go.microsoft.com/fwlink/?linkid=2262845)
17+
1618
Azure Static Web Apps publishes websites to production by building apps from a code repository.
1719

1820
In this quickstart, you deploy a web application to Azure Static Web apps using the Azure CLI.
1921

2022
## Prerequisites
2123

22-
- [GitHub](https://github.com) account
24+
- [GitHub](https://github.com) account.
2325
- [Azure](https://portal.azure.com) account.
2426
- If you don't have an Azure subscription, you can [create a free trial account](https://azure.microsoft.com/free).
25-
- [Azure CLI](/cli/azure/install-azure-cli) installed (version 2.29.0 or higher)
27+
- [Azure CLI](/cli/azure/install-azure-cli) installed (version 2.29.0 or higher).
2628
- [A Git setup](https://www.git-scm.com/downloads).
2729

28-
[!INCLUDE [create repository from template](../../includes/static-web-apps-get-started-create-repo.md)]
30+
## Define environment variables
31+
32+
The first step in this quickstart is to define environment variables.
33+
34+
```bash
35+
export RANDOM_ID="$(openssl rand -hex 3)"
36+
export MY_RESOURCE_GROUP_NAME="myStaticWebAppResourceGroup$RANDOM_ID"
37+
export REGION=EastUS2
38+
export MY_STATIC_WEB_APP_NAME="myStaticWebApp$RANDOM_ID"
39+
```
40+
41+
## Create a repository (optional)
2942

30-
## Deploy a static web app
43+
(Optional) This article uses a GitHub template repository as another way to make it easy for you to get started. The template features a starter app to deploy to Azure Static Web Apps.
3144

32-
Now that the repository is generated from the template, you can deploy the app as a static web app from the Azure CLI.
45+
1. Navigate to the following location to create a new repository: https://github.com/staticwebdev/vanilla-basic/generate.
46+
2. Name your repository `my-first-static-web-app`.
3347

34-
1. Sign in to the Azure CLI by using the following command.
48+
> [!NOTE]
49+
> Azure Static Web Apps requires at least one HTML file to create a web app. The repository you create in this step includes a single `index.html` file.
3550
36-
```azurecli
37-
az login
38-
```
51+
3. Select **Create repository**.
52+
53+
## Deploy a Static Web App
54+
55+
Deploy the app as a static web app from the Azure CLI.
3956

4057
1. Create a resource group.
4158

42-
```azurecli
43-
az group create \
44-
--name my-swa-group \
45-
--location "eastus2"
46-
```
47-
48-
1. Create a variable to hold your GitHub user name.
49-
50-
Before you execute the following command, replace the placeholder `<YOUR_GITHUB_USER_NAME>` with your GitHub user name.
51-
52-
```bash
53-
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
54-
```
55-
56-
1. Deploy a new static web app from your repository.
57-
58-
# [No Framework](#tab/vanilla-javascript)
59-
60-
```azurecli
61-
az staticwebapp create \
62-
--name my-first-static-web-app \
63-
--resource-group my-swa-group \
64-
--source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
65-
--location "eastus2" \
66-
--branch main \
67-
--app-location "src" \
68-
--login-with-github
69-
```
70-
71-
# [Angular](#tab/angular)
72-
73-
```azurecli
74-
az staticwebapp create \
75-
--name my-first-static-web-app \
76-
--resource-group my-swa-group \
77-
--source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
78-
--location "eastus2" \
79-
--branch main \
80-
--app-location "/" \
81-
--output-location "dist/angular-basic" \
82-
--login-with-github
83-
```
84-
85-
# [Blazor](#tab/blazor)
86-
87-
```azurecli
88-
az staticwebapp create \
89-
--name my-first-static-web-app \
90-
--resource-group my-swa-group \
91-
--source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
92-
--location "eastus2" \
93-
--branch main \
94-
--app-location "Client" \
95-
--output-location "wwwroot" \
96-
--login-with-github
97-
```
98-
99-
# [React](#tab/react)
100-
101-
```azurecli
102-
az staticwebapp create \
103-
--name my-first-static-web-app \
104-
--resource-group my-swa-group \
105-
--source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
106-
--location "eastus2" \
107-
--branch main \
108-
--app-location "/" \
109-
--output-location "build" \
110-
--login-with-github
111-
```
112-
113-
# [Vue](#tab/vue)
114-
115-
```azurecli
116-
az staticwebapp create \
117-
--name my-first-static-web-app \
118-
--resource-group my-swa-group \
119-
--source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
120-
--location "eastus2" \
121-
--branch main \
122-
--app-location "/" \
123-
--output-location "dist" \
124-
--login-with-github
125-
```
126-
127-
---
128-
129-
> [!IMPORTANT]
130-
> The URL passed to the `--source` parameter must not include the `.git` suffix.
131-
132-
As you execute this command, the CLI starts the GitHub interactive log in experience. Look for a line in your console that resembles the following message.
133-
134-
> Go to `https://github.com/login/device` and enter the user code 329B-3945 to activate and retrieve your GitHub personal access token.
135-
136-
1. Go to **https://github.com/login/device**.
137-
138-
1. Enter the user code as displayed your console's message.
139-
140-
2. Select **Continue**.
141-
142-
3. Select **Authorize AzureAppServiceCLI**.
143-
144-
## View the website
59+
```bash
60+
az group create \
61+
--name $MY_RESOURCE_GROUP_NAME \
62+
--location $REGION
63+
```
64+
65+
Results:
66+
<!-- expected_similarity=0.3 -->
67+
```json
68+
{
69+
"id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/my-swa-group",
70+
"location": "eastus2",
71+
"managedBy": null,
72+
"name": "my-swa-group",
73+
"properties": {
74+
"provisioningState": "Succeeded"
75+
},
76+
"tags": null,
77+
"type": "Microsoft.Resources/resourceGroups"
78+
}
79+
```
80+
81+
2. Deploy a new static web app from your repository.
82+
83+
```bash
84+
az staticwebapp create \
85+
--name $MY_STATIC_WEB_APP_NAME \
86+
--resource-group $MY_RESOURCE_GROUP_NAME \
87+
--location $REGION
88+
```
14589

14690
There are two aspects to deploying a static app. The first operation creates the underlying Azure resources that make up your app. The second is a workflow that builds and publishes your application.
14791

14892
Before you can go to your new static site, the deployment build must first finish running.
14993

150-
1. Return to your console window and run the following command to list the URLs associated with your app.
94+
3. Return to your console window and run the following command to list the website's URL.
95+
96+
```bash
97+
export MY_STATIC_WEB_APP_URL=$(az staticwebapp show --name $MY_STATIC_WEB_APP_NAME --resource-group $MY_RESOURCE_GROUP_NAME --query "defaultHostname" -o tsv)
98+
```
15199

152-
```azurecli
153-
az staticwebapp show \
154-
--name my-first-static-web-app \
155-
--query "repositoryUrl"
156-
```
100+
```bash
101+
runtime="1 minute";
102+
endtime=$(date -ud "$runtime" +%s);
103+
while [[ $(date -u +%s) -le $endtime ]]; do
104+
if curl -I -s $MY_STATIC_WEB_APP_URL > /dev/null ; then
105+
curl -L -s $MY_STATIC_WEB_APP_URL 2> /dev/null | head -n 9
106+
break
107+
else
108+
sleep 10
109+
fi;
110+
done
111+
```
157112

158-
The output of this command returns the URL to your GitHub repository.
113+
Results:
114+
<!-- expected_similarity=0.3 -->
115+
```HTML
116+
<!DOCTYPE html>
117+
<html lang=en>
118+
<head>
119+
<meta charset=utf-8 />
120+
<meta name=viewport content="width=device-width, initial-scale=1.0" />
121+
<meta http-equiv=X-UA-Compatible content="IE=edge" />
122+
<title>Azure Static Web Apps - Welcome</title>
123+
<link rel="shortcut icon" href=https://appservice.azureedge.net/images/static-apps/v3/favicon.svg type=image/x-icon />
124+
<link rel=stylesheet href=https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css crossorigin=anonymous />
125+
```
159126

160-
1. Copy the **repository URL** and paste it into your browser.
127+
```bash
128+
echo "You can now visit your web server at https://$MY_STATIC_WEB_APP_URL"
129+
```
161130

162-
1. Select the **Actions** tab.
131+
## Use a GitHub template
163132

164-
At this point, Azure is creating the resources to support your static web app. Wait until the icon next to the running workflow turns into a check mark with green background (:::image type="icon" source="media/get-started-cli/checkmark-green-circle.png" border="false":::). This operation may take a few minutes to complete.
133+
You've successfully deployed a static web app to Azure Static Web Apps using the Azure CLI. Now that you have a basic understanding of how to deploy a static web app, you can explore more advanced features and functionality of Azure Static Web Apps.
165134

166-
Once the success icon appears, the workflow is complete and you can return back to your console window.
135+
In case you want to use the GitHub template repository, follow these steps:
167136

168-
1. Run the following command to query for your website's URL.
137+
Go to https://github.com/login/device and enter the code you get from GitHub to activate and retrieve your GitHub personal access token.
169138

170-
```azurecli
171-
az staticwebapp show \
172-
--name my-first-static-web-app \
173-
--query "defaultHostname"
174-
```
139+
1. Go to https://github.com/login/device.
140+
2. Enter the user code as displayed your console's message.
141+
3. Select `Continue`.
142+
4. Select `Authorize AzureAppServiceCLI`.
175143

176-
Copy the URL into your browser to go to your website.
144+
### View the Website via Git
177145

178-
## Clean up resources
146+
1. As you get the repository URL while running the script, copy the repository URL and paste it into your browser.
147+
2. Select the `Actions` tab.
179148

180-
If you're not going to continue to use this application, you can delete the resource group and the static web app by running the following command:
149+
At this point, Azure is creating the resources to support your static web app. Wait until the icon next to the running workflow turns into a check mark with green background. This operation might take a few minutes to execute.
181150

182-
```azurecli
183-
az group delete \
184-
--name my-swa-group
151+
3. Once the success icon appears, the workflow is complete and you can return back to your console window.
152+
4. Run the following command to query for your website's URL.
153+
```bash
154+
az staticwebapp show \
155+
--name $MY_STATIC_WEB_APP_NAME \
156+
--query "defaultHostname"
185157
```
158+
5. Copy the URL into your browser to go to your website.
159+
160+
## Clean up resources (optional)
161+
162+
If you're not going to continue to use this application, delete the resource group and the static web app using the [az group delete](/cli/azure/group#az-group-delete) command.
186163

187164
## Next steps
188165

0 commit comments

Comments
 (0)