Skip to content

Guide: Debugging a Static Web App with VS Code

Jump to bottom
Alex Weininger edited this page Nov 12, 2021 · 20 revisions

Note: The debugging features referenced in this wiki page are available starting in v0.9.0 of the extension.

This page covers 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
  1. 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

Debugging a static web app

Steps:

Once you have installed the required prerequisites, and have a static web app project open in VS Code, follow these steps to begin debugging.

Tip: Make sure you install your dependencies with npm install before trying to debug!

  1. Go to the "Run and Debug" view.
  2. In the dropdown, select "Azure Static Web Apps...".
  3. Select the app you want to debug.
  4. Click the green "Start debugging" button.

Troubleshooting

If debugging doesn't work using the dynamic configuration, you can easily provide your own Azure Static Web Apps CLI configuration using a swa-cli.config.json file.

Here is an example swa-cli.config.json file for debugging a React app:

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

Once you create a swa-cli.config.json file in the root of your directory and add a configuration, it will show up in the list of apps to pick from when you select the "Azure Static Web Apps..." option in the "Run and Debug" view.

'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"
    }
  }
}

Clone this wiki locally