Debugging Azure Static Web Apps in VS Code
Tags: vscode, azure, jamstack, staticwebapps
Published: 2021-11-16 17:41:35

We've just released v0.9.0 of the [Azure Static Web Apps extension for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps). This release includes features to help debug your static web app locally, including Azure Functions API routes, authentication, and routing.

If you're new to Azure Static Web Apps, I highly recommend checking out the [What is Azure Static Web Apps?](https://docs.microsoft.com/en-us/azure/static-web-apps/overview) documentation page.

In this post, we'll learn how to get started debugging a static web app locally. Then we'll add an Azure Functions API route, and debug our backend + frontend together.

## Prerequisites 🛠️

1. Google Chrome installed, (we make use of the debugger)

2. **Azure Static Web Apps extension for VS Code** - [View on Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps)

3. **Azure Static Web Apps CLI** 0.8.0 or greater - [View on GitHub](https://github.com/Azure/static-web-apps-cli)

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

## Getting started 🟢

1. Clone one of these repositories, and open it up in VS Code.

 
| Framework | Repository |
|---|---|
Angular | https://github.com/staticwebdev/angular-basic
React | https://github.com/staticwebdev/react-basic
Svelte | https://github.com/staticwebdev/svelte-basic
Vue | https://github.com/staticwebdev/vue-basic

2. Run `npm install`

![Running npm install in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c00m73mzlt49kkwl4iiw.png)
> Theme: [Cobalt2 Theme Official by Wes Bos](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)

## Run and debug 🐞

![Show automatic debug configurations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pahznac0f8cjqt8haifb.png)
 
1. Go to the "Run and Debug" view.
2. Click "Show all automatic debug configurations."
2. In the dropdown, select "Azure Static Web Apps...".
3. Select the app you want to debug.

This will start the Azure Static Web Apps CLI in the VS Code terminal, and launch the Chrome debugger on `http://localhost:4280`.

Now you can set and hit breakpoints in your frontend code. 

![Set breakpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aprutdzi9opkbegdnf2p.png)
 
## Add an API route ⚡️

Azure Static Web Apps has integrated API support provided by Azure Functions. In order to add and debug an API route, we must install some Azure Functions tools.

1. **Azure Functions extension for VS Code** - [Install from Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions)

2. **Azure Functions Core Tools** - [View on GitHub](https://github.com/Azure/azure-functions-core-tools)

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

Now, you can add an API route to your app by clicking the "Add HTTP Function..." button in the Azure Static Web Apps view.

![Add HTTP Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d3gk3mmgla9xbkbyycp.png)

Select a language (I chose JavaScript), then name your Function (I put "hello"). And then an API route will be created for you that you can make requests to at `/api/hello`.

![API route](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emd9wo9q26m51aboyydd.png)

## Debug app with Functions API ✨
 
We can debug our API routes and our frontend app simultaneously in VS Code.

Select the "SWA: Run ..." debug configuration and click the green "Run and debug" button.

![Run and debug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/234k0e1p9jzmtyeeli56.png)

VS Code will now run your Functions API routes and your frontend. When it's all started, a Chrome window will open at `http://localhost:4280`.

Set a breakpoint in your Function endpoint.

![Function endpoint breakpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89kolpnqbsrqysh661ep.png)

Go to `http://localhost:4280/api/hello` in the Chrome window to hit the breakpoint.
 
![Hitting an API breakpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q8zt9j70wz4dr5h3mcm.png)

## Next steps 🏃‍♀️

Now that you got your static web app running locally, you can [deploy your static web app to Azure for free](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react).

## Troubleshooting 🔍

If you're having issues, please check out the [troubleshooting section in our wiki](https://github.com/microsoft/vscode-azurestaticwebapps/wiki/Guide:-Debugging-a-Static-Web-App-with-VS-Code#troubleshooting-).

## Links + Resources 🔗

[Azure Static Web Apps documentation](https://docs.microsoft.com/en-us/azure/static-web-apps/)
[@AzureStaticWebApps on Twitter](https://twitter.com/AzureStaticApps)
[Awesome Azure Static Web Apps](https://github.com/staticwebdev/awesome-azure-static-web-apps)
[create-swa-app](https://github.com/aaronpowell/create-swa-app)
[Azure Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli)
[Azure Static Web Apps extension for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps)

---

Hello 👋 I'm Alex 🤠 and I'm a developer working on the Azure Static Web Apps extension for VS Code. I hope you enjoyed the post! 

[GitHub @alexweininger](https://github.com/alexweininger)
[Twitter @alexweininger](https://twitter.com/alexweininger)