Guide: Debugging a Static Web App with VS Code

🚧 Under construction 🚧

This page will cover how to setup locally debugging a Static Web App using Visual Studio Code and the Azure Static Web Apps CLI. This enables setting and hitting breakpoints in both your static web app and your Functions API.

Prerequisites

1. Azure Static Web Apps extension for VS Code - View on Marketplace

2. Azure Static Web Apps CLI 0.8.0 or greater - View on GitHub

npm install -g @azure/static-web-apps-cli@latest

3. Azure Functions Core Tools (required to debug a Static Web App with an API locally) - View on GitHub

npm i -g azure-functions-core-tools@3 --unsafe-perm true

Debug

Troubleshooting

'context' and 'apiLocation' properties should be URLs not file paths

Make sure both your context and apiLocation properties in your SWA CLI configuration are URLs to your frontend app development server, and if you have an API, the apiLocation property should be the URL where your Functions app is served which by default is http://localhost:7071.

{
  "configurations": {
    "app": {
      "context": "http://localhost:3000",
      "run": "npm start",
      "apiLocation": "http://localhost:7071"
    }
  }
}

Convert existing Azure Static Web Apps CLI command to use swa-cli.config.json