[[TOC]]

Prerequisites

• Visual Studio Code

  • Download
  • SWA Extension
  • Azure Functions Extension
  • REST Client Extension

• Azure Functions CLI

  • Download

• Azure Static Webaps CLI (preview)

  • Docs + Download

Generate Template

• Generate a basic Static Web App with an Angular template
• Clone your newly generated repository
• npm install
• Test the template with ng serve

Initial Deployment

• Commit & Push your code
• Use the Azure Extenion to create a new Static Web App

Add an API

• Add functions

Test SWA & API locally

• Run ng serve
• Run swa start http://localhost:4200 --api ./api
  • Documentation 1
  • Documentation 2

Create Azure Resources

• Create a Serverless CosmosDb Resource
• Create & Connect Application Insights Resource

Use CosmosDB in Azure Functions

• Input Bindings
• Output Bindings
• Install Cosmos DB Client Library
• Add the CosmosDb configuration to local.settings.json in api/. The file is not under source control

Configure Authentication & Authorization

• Create staticwebapp.config.json file in the src/ directory
• Configure the routes

Deploy

• Commit & Push your code
• Add CosmosDb's configuration into the Configuration section in Azure Portal
• Add ApplicationInsights instrumentation key into the Configuration section in Azure Portal witht he key APPINSIGHTS_INSTRUMENTATIONKEY
• Invite users