Skip to content

Commit 0a79107

Browse files
rayoefrayoef
committed
Initial update for Static web apps
1 parent fb663b4 commit 0a79107

File tree

1 file changed

+112
-136
lines changed

1 file changed

+112
-136
lines changed

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

Lines changed: 112 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -5,184 +5,160 @@ 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
1010
ms.custom: mode-api, devx-track-azurecli
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)
42+
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.
2944

30-
## Deploy a static web app
45+
- Navigate to the following location to create a new repository: https://github.com/staticwebdev/vanilla-basic/generate
46+
- Name your repository `my-first-static-web-app`
3147

32-
Now that the repository is generated from the template, you can deploy the app as a static web app from the Azure CLI.
48+
> **Note:** 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.
3349
34-
1. Sign in to the Azure CLI by using the following command.
50+
Select **Create repository**.
3551

36-
```azurecli
37-
az login
38-
```
52+
## Deploy a Static Web App
53+
54+
Deploy the app as a static web app from the Azure CLI.
3955

4056
1. Create a resource group.
4157

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
58+
```bash
59+
az group create \
60+
--name $MY_RESOURCE_GROUP_NAME \
61+
--location $REGION
62+
```
63+
64+
Results:
65+
<!-- expected_similarity=0.3 -->
66+
```json
67+
{
68+
"id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/my-swa-group",
69+
"location": "eastus2",
70+
"managedBy": null,
71+
"name": "my-swa-group",
72+
"properties": {
73+
"provisioningState": "Succeeded"
74+
},
75+
"tags": null,
76+
"type": "Microsoft.Resources/resourceGroups"
77+
}
78+
```
79+
80+
2. Deploy a new static web app from your repository.
81+
82+
```bash
83+
az staticwebapp create \
84+
--name $MY_STATIC_WEB_APP_NAME \
85+
--resource-group $MY_RESOURCE_GROUP_NAME \
86+
--location $REGION
87+
```
14588

14689
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.
14790

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

150-
1. Return to your console window and run the following command to list the URLs associated with your app.
93+
3. Return to your console window and run the following command to list the website's URL.
15194

152-
```azurecli
153-
az staticwebapp show \
154-
--name my-first-static-web-app \
155-
--query "repositoryUrl"
156-
```
95+
```bash
96+
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)
97+
```
15798

158-
The output of this command returns the URL to your GitHub repository.
99+
```bash
100+
runtime="1 minute";
101+
endtime=$(date -ud "$runtime" +%s);
102+
while [[ $(date -u +%s) -le $endtime ]]; do
103+
if curl -I -s $MY_STATIC_WEB_APP_URL > /dev/null ; then
104+
curl -L -s $MY_STATIC_WEB_APP_URL 2> /dev/null | head -n 9
105+
break
106+
else
107+
sleep 10
108+
fi;
109+
done
110+
```
159111

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

162-
1. Select the **Actions** tab.
126+
```bash
127+
echo "You can now visit your web server at https://$MY_STATIC_WEB_APP_URL"
128+
```
163129

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.
130+
## Next Steps
165131

166-
Once the success icon appears, the workflow is complete and you can return back to your console window.
132+
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.
167133

168-
1. Run the following command to query for your website's URL.
134+
In case you want to use the GitHub template repository, follow these steps:
169135

170-
```azurecli
171-
az staticwebapp show \
172-
--name my-first-static-web-app \
173-
--query "defaultHostname"
174-
```
136+
Go to https://github.com/login/device and enter the user code 329B-3945 to activate and retrieve your GitHub personal access token.
175137

176-
Copy the URL into your browser to go to your website.
138+
1. Go to https://github.com/login/device.
139+
2. Enter the user code as displayed your console's message.
140+
3. Select `Continue`.
141+
4. Select `Authorize AzureAppServiceCLI`.
177142

178-
## Clean up resources
143+
### View the Website via Git
144+
145+
1. As you get the repository URL while running the script, copy the repository URL and paste it into your browser.
146+
2. Select the `Actions` tab.
179147

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:
148+
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.
181149

182-
```azurecli
183-
az group delete \
184-
--name my-swa-group
150+
3. Once the success icon appears, the workflow is complete and you can return back to your console window.
151+
4. Run the following command to query for your website's URL.
152+
```bash
153+
az staticwebapp show \
154+
--name $MY_STATIC_WEB_APP_NAME \
155+
--query "defaultHostname"
185156
```
157+
5. Copy the URL into your browser to go to your website.
158+
159+
## Clean up resources
160+
161+
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.
186162

187163
## Next steps
188164

0 commit comments

Comments
 (0)