Skip to content

Commit 79a3bb0

Browse files
denreadenrea
authored
Merge pull request #281617 from diberry/diberry/0723-swa-bicep
SWA Bicep howto
2 parents 2fc6615 + bb24a04 commit 79a3bb0

File tree

2 files changed

+188
-0
lines changed

2 files changed

+188
-0
lines changed

‎articles/static-web-apps/TOC.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,9 @@
183183
href: deployment-token-management.md
184184
- name: Publish with an ARM template
185185
href: publish-azure-resource-manager.md
186+
- name: Publish with a Bicep template
187+
href: publish-bicep.md
188+
displayName: bicep, AZD, Azure Developer CLI
186189
- name: Deploy with external source control providers
187190
href: external-providers.md
188191
displayName: Jenkins, Jekyll

‎articles/static-web-apps/publish-bicep.md

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
---
2+
title: 'Deploy Azure Static Web Apps with Bicep'
3+
description: Deploy Azure Static Web Apps using Bicep including resource creation and configuration. Link your own Azure Functions app to support your static web app.
4+
services: static-web-apps
5+
author: craigshoemaker
6+
ms.service: azure-static-web-apps
7+
ms.topic: how-to
8+
ms.date: 08/13/2024
9+
ms.author: cshoe
10+
#customer intent: As a developer, I want create a Static Web App on Azure with a Bicep file so that the process can to automated.
11+
---
12+
13+
# Deploy Azure Static Web Apps with Bicep
14+
15+
Use a Bicep file to create your Azure Static Web Apps resource. Bicep provides a declarative syntax to define and create Azure resources, which can be automated and repeated for consistency.
16+
17+
This article details how to create the resource group that holds all the resources for your application, the Azure Static Web Apps resource, which contains your statically generated client application such as React, Vue, or Svelte, and the linked Azure Functions backend.
18+
19+
## Tools for resource creation
20+
21+
Bicep is one of several tools of resource creation. These tools include:
22+
23+
* [Azure Resource Management](/azure/azure-resource-manager/) (ARM): To implement infrastructure as code for your Azure solutions, use Azure Resource Manager templates (ARM templates). The template is a JavaScript Object Notation (JSON) file that defines the infrastructure and configuration for your project. This older style is still in use.
24+
* [Bicep](/azure/azure-resource-manager/Bicep/): Bicep is a domain-specific language (DSL) that uses declarative syntax to deploy Azure resources. Bicep provides concise syntax, reliable type safety, and support for code reuse.
25+
* [Azure verified modules (AVM)](https://azure.github.io/Azure-Verified-Modules): These modules represent the only standard from Microsoft for Bicep modules in the [Bicep Public Registry](https://github.com/Azure/bicep-registry-modules/tree/main/avm). Use AVM when possible because it consolidates and set the standards for what a good infrastructure as code module looks like.
26+
* [Azure CLI](/cli/azure/)/[PowerShell](/powershell): These command line apps allow you to create resources. They have generally been superseded by Bicep and AVM but are still used for minor or quick fixes while the larger Bicep update may be more time-consuming. Learn to [create resources with the Azure CLI and a Bicep file](/azure/azure-resource-manager/bicep/deploy-cli#deploy-local-bicep-file).
27+
* [Azure portal](https://portal.azure.com/): Azure portal is a web-based visual interface for resource creation and configuration.
28+
29+
Creation and configuration can be done across all the tools listed above.
30+
31+
## Bicep by example
32+
33+
The bicep examples in this article use [Azure Verified Modules (AVM)](https://azure.github.io/Azure-Verified-Modules/) when possible and [bicep](/azure/azure-resource-manager/bicep/) when AVM isn't available. AVM modules are recognizable because they reference modules that include `avm/res`, such as `br/public:avm/res/web/static-site:0.3.0`.
34+
35+
```Bicep
36+
module swa 'br/public:avm/res/web/static-site:0.3.0' = {
37+
name: 'client'
38+
scope: rg
39+
params: {
40+
name: 'swa-${resourceToken}'
41+
location: location
42+
sku: 'Free'
43+
tags: union(tags, { 'service-name': 'client' })
44+
}
45+
}
46+
```
47+
48+
AVM allows you to use managed Bicep code, which has been built and is maintained by professional engineers fluent in Bicep. These modules aren't only supported and maintained, they're opinionated about what proper Bicep files look like.
49+
50+
Due to the work involved in owning and maintaining the AVM files, it takes time to specify the module, determine best practices, and find the appropriate owner/maintainer. For this reason, the module you need may not be available at this time.
51+
52+
If the AVM isn't available, you can use _vanilla_ [Bicep for your resources](/azure/templates/).
53+
54+
## Prerequisites
55+
56+
- [Bicep tools](../azure-resource-manager/Bicep/install.md): Learn how to install Bicep tools.
57+
- [Visual Studio Code extension for Bicep](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-bicep): An optional extension that creates resources for you by running your Bicep file.
58+
59+
## Create a static web app resource
60+
61+
Create a file named `main.bicep` file and paste in the following code:
62+
63+
```Bicep
64+
targetScope = 'subscription'
65+
66+
@description('The name of the Azure region that will be used for the deployment.')
67+
param location string ='eastus2'
68+
69+
@description('Random string to make resource names unique')
70+
var resourceToken = uniqueString(subscription().subscriptionId, location)
71+
72+
@description('Create a resource group')
73+
resource rg 'Microsoft.Resources/resourceGroups@2024-03-01' = {
74+
name: 'rg-swa-app-${resourceToken}'
75+
location: location
76+
tags: tags
77+
}
78+
79+
@description('Create a static web app')
80+
module swa 'br/public:avm/res/web/static-site:0.3.0' = {
81+
name: 'client'
82+
scope: rg
83+
params: {
84+
name: 'swa-${resourceToken}'
85+
location: location
86+
sku: 'Free'
87+
}
88+
}
89+
90+
@description('Put the default hostname in an output')
91+
output endpoint string = swa.outputs.defaultHostname
92+
93+
@description('Save the static web app name in an output')
94+
output staticWebAppName string = swa.outputs.name
95+
```
96+
97+
This file creates the following resources for you:
98+
* An application name as the `resourceToken` value
99+
* Tags associated with your app to help you find and filter resources in the Azure portal
100+
* A resource group for this application
101+
* A static web app
102+
103+
Save the values of the output variables to a text editor. You'll need these to find and configure the resources in the Azure portal. The next step is to include a linked backend Azure Functions app, shown in the next section.
104+
105+
## Link a Functions app
106+
107+
To link a Functions app for your backend, use the Static Web Apps standard plan for your web app and complete the following steps.
108+
109+
To create the Azure Function app, follow the instructions provided in the [Quickstart: Create and deploy Azure Functions resources using Bicep](/azure/azure-functions/functions-create-first-function-bicep) guide. When you're done creating your resource, you'll need the resourceId for the Function app, which looks like: `/subscriptions/<SUBSCRIPTION-ID>/resourcegroups/<RESOURCE-GROUP-NAME>/providers/Microsoft.Web/sites/<FUNCTION-APP-NAME>`, in order to link that function app to your static web app.
110+
111+
Next, create the static web app using the Bicep template provided in the previous section. This sets up the necessary resources for your static web app. Finally, use the following Bicep file to link the static web app to the function app to enable seamless integration between your front-end and back-end services.
112+
113+
Create a file named `config.bicep` file and paste in the following code:
114+
115+
```Bicep
116+
targetScope = 'resourceGroup'
117+
118+
@description('The name of the Azure region that will be used for the deployment.')
119+
param location string = 'eastus2'
120+
121+
@description('The Subscription ID')
122+
param subscriptionId string = '<SUBSCRIPTION-ID>'
123+
124+
@description('The name of the Azure resource group.')
125+
param resourceGroup string = '<RESOURCE-GROUP-NAME>'
126+
127+
@description('Azure Statoc web app name')
128+
param staticWebAppName string = '<STATIC-WEB-APP-NAME>'
129+
130+
@description('Azure Function App name')
131+
param functionAppName string = '<FUNCTION-APP-NAME>'
132+
133+
@description('Get reference to static web app')
134+
resource staticWebApp 'Microsoft.Web/staticSites@2023-12-01' existing = {
135+
name: staticWebAppName
136+
}
137+
138+
param functionAppResourceId string = '/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.Web/sites/${functionAppName}'
139+
140+
@description('Link backend to static web app')
141+
resource linkedStaticWebAppBackend 'Microsoft.Web/staticSites/linkedBackends@2023-12-01' = {
142+
parent: staticWebApp
143+
name: 'linkedBackend'
144+
properties: {
145+
backendResourceId: functionAppResourceId
146+
region: location
147+
}
148+
}
149+
```
150+
151+
This file handles the following tasks:
152+
153+
* Creates variables to use in resource configuration.
154+
* Create a reference to the existing static web app.
155+
* Create a reference string for the existing functions app.
156+
* Configure the static web app to link to the functions app.
157+
158+
## Deployment
159+
160+
Deploy your source code to the static web app with one of the following tools:
161+
* [Azure Developer CLI (Recommended)](/azure/developer/azure-developer-cli)
162+
* [Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli)
163+
* [GitHub Action](https://docs.github.com/actions)
164+
* [Azure DevOps](/azure/devops/pipelines/overview-azure)
165+
166+
* **Local development environment**: Use [Azure Developer CLI](/azure/developer/azure-developer-cli) to deploy from your local machine. When running locally, you define your deployment in an `azure.yml` file. This file includes hooks that plug into the resource creation process at any point to help you during deployment, especially when different parts of your app need to know about each other at build time.
167+
168+
* **Production environment**: The ability to deploy from a GitHub Actions workflow file is a built-in feature when you create your static web app. Once the file is in your repository, you can edit the file as needed. Deployment from [other source code providers](external-providers.md) is also supported.
169+
170+
To learn more from a full end-to-end application that includes resource creation and application deployment, see [Serverless AI Chat with RAG using LangChain.js](https://github.com/Azure-Samples/serverless-chat-langchainjs).
171+
172+
## Speeding up deployments with Azure Developer CLI
173+
174+
Azure Developer CLI (`azd`) uses Bicep files along with deployment configurations to create and provision your application. Since version 1.4, azd checks the Bicep against cloud resources to understand if the underlying infrastructure as code (IaC) state requires updates. If the state hasn't changed, creation and configuration are skipped. Learn more about this [performance improvement](
175+
https://devblogs.microsoft.com/azure-sdk/azure-developer-cli-azd-october-2023-release/#azd-provision-is-now-faster-when-there-are-no-infrastructure-changes
176+
).
177+
178+
## Related content
179+
180+
* [Awesome AZD](https://azure.github.io/awesome-azd/?tags=swa)
181+
* [Public Bicep Registry](https://github.com/Azure/bicep-registry-modules)
182+
* [Azure Developer CLI](/azure/developer/azure-developer-cli)
183+
* [Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli)
184+
* [GitHub Actions](https://docs.github.com/actions)
185+

0 commit comments

Comments
 (0)