This is an example of a single page application, all hosted in a single Azure Static Web Apps. The backend is written in TypeScript and the frontend is written in React/TypeScript. The infrastructure is created with Bicep. The deployments use staging environments and is done with Github actions. This example is influenced the tutorial: https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-blazor.

Static Web Apps can can be written in many different languages. Here are some examples:

• app: The TypeScript + react sample application
• api: A TypeScript Azure Functions API, which the application will call
• infrastructure: Infrastructure by code, a bicep template
• .github/workflows/deploy-static-web-app.yml: A github actions for deployment

Before a deploy of Static Web Apps code can be done, you have to create the infrastructure (see below). The github action needs a secret to be able to deploy to the static web app. Copy the deployment token (on the static web app overview) and create a secret in github called "AZURE_STATIC_WEB_APPS_API_TOKEN"

First deploy infrastructure with bicep

az login
az account set --subscription <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME>

resourceGroupName="<resource group name>"
az group create --name $resourceGroupName --location "westeurope"

az deployment group create \
--name DeployLocalTemplate-01 \
--resource-group $resourceGroupName \
--template-file main.bicep \
--parameters main.parameters.json \
--verbose

The github actions needs a deployment token. You find the deployment token on the Static Web App you created previous (Overview -> Manage deployment token). Create a secret "AZURE_STATIC_WEB_APPS_API_TOKEN" in github with the deployment token.

At this time the only option is to deploy with github actions, see .github/workflows/deploy-static-web-app.yml.

Not supported:

• Deploy with vscode (works if you link static app to github, this is not done in this example)
• Deploy with az cli
• Settings have to be pushed manually with CLI or added in the portal. See https://docs.microsoft.com/en-us/azure/static-web-apps/application-settings. az staticwebapp appsettings set --name StaticWebAppNetReact --setting-names "message=Hello world"

On each PR a new staging environment is created on your Static Web App. If you browse to your Static Web App in the Azure portal you find the staging uri for your PR. When the PR is closed the staging environment (for your PR) is removed. Then the main branch is deployd automatically on the production environment.

Select SWA: Run app
press F5

Start both or only one in the terminal

cd api
func start
(curl http://localhost:7071/api/HttpTrigger1)
(curl http://localhost:7071/api/WeatherForecast)

cd app
(yarn install)
yarn start

swa start ./app/build/ --api-location ./api
(http://localhost:4280)

npm install -g azure-functions-core-tools@4 --unsafe-perm true
npm install -g @azure/static-web-apps-cli
Install azure cli - https://docs.microsoft.com/en-us/cli/azure/install-azure-cli
Install Bicep cli - https://docs.microsoft.com/en-us/azure/azure-resource-manager/bicep/install

Links

https://docs.microsoft.com/en-us/azure/static-web-apps/overview
https://useiconic.com/open
https://react-bootstrap.github.io