DEV Community

Cover image for Debugging Azure Static Web Apps in VS Code
Microsoft Azure profile image Alex Weininger
Alex Weininger for Microsoft Azure

Posted on • Updated on

Debugging Azure Static Web Apps in VS Code

#vscode #azure #jamstack #staticwebapps

We've just released v0.9.0 of the Azure Static Web Apps extension for VS Code. 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? 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

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

npm install -g @azure/static-web-apps-cli@latest
Enter fullscreen mode Exit fullscreen mode

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
  1. Run npm install

Running npm install in VS Code

Theme: Cobalt2 Theme Official by Wes Bos

Run and debug 🐞

Show automatic debug configurations

  1. Go to the "Run and Debug" view.
  2. Click "Show all automatic debug configurations."
  3. In the dropdown, select "Azure Static Web Apps...".
  4. 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

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

  2. Azure Functions Core Tools - View on GitHub

npm i -g azure-functions-core-tools@3 --unsafe-perm true
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Go to http://localhost:4280/api/hello in the Chrome window to hit the breakpoint.

Hitting an API breakpoint

Next steps 🏃‍♀️

Now that you got your static web app running locally, you can deploy your static web app to Azure for free.

Troubleshooting 🔍

If you're having issues, please check out the troubleshooting section in our wiki.

Links + Resources 🔗

Azure Static Web Apps documentation
@AzureStaticWebApps on Twitter
Awesome Azure Static Web Apps
create-swa-app
Azure Static Web Apps CLI
Azure Static Web Apps extension for VS Code

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
Twitter @alexweininger

Top comments (7)

Collapse
 
danielborg profile image
Daniel Borg •

This is awesome! I'm sure this will make my next project even easier. 🙌

Collapse
 
alexweininger profile image
Alex Weininger •

That's great to hear Daniel!

Collapse
 
johnelmers profile image
JohnElmers •

Hey!! Great article!!! I am a student and I really like the IT field and I try to follow the news. But because of this, there is a catastrophic lack of time for study. especially in term paper writing. My friends advised me the service EduGeeks. Here is their website edugeeksclub.com/buy-thesis/. The guys helped me a lot and plus they did it very professionally and efficiently.

Collapse
 
victorioberra profile image
Victorio Berra •

I tried this with Vue and when I set a breakpoint in the App.vue it just says "unbound breakpoint" and will not pause the debugger. Does it work for you?

Collapse
 
alexweininger profile image
Alex Weininger •

It looks like there are some issues with debugging Vue.js in VS Code due to how Vue.js generates source maps.

There is a snippet about that here on the VS Code docs:
code.visualstudio.com/docs/nodejs/...

Note: There are currently issues with the sourcemaps generated by vue-cli, which cause issues with the debugging experience in VS Code. See github.com/vuejs/vue-loader/issues....

Debugging works for me, however I have to set breakpoints from the Chrome devtools, which is not the best experience.

You could also try this VS Code Vue.js debugging recipe:
github.com/Microsoft/vscode-recipe...

I've created an issue on our repository:
github.com/microsoft/vscode-azures...

Feel free to add more details/input on that issue.

Collapse
 
victorioberra profile image
Victorio Berra •

I created a vue.config.js and put the following in it:

module.exports = {
    configureWebpack: (config) => {
        config.devtool = 'source-map'
    },
};
Enter fullscreen mode Exit fullscreen mode

And it kind of worked, breakpoints worked but they would only be created at the end of methods. So definitely seems to be a source maps issue.

Thanks for the reply!

Collapse
 
alexweininger profile image
Alex Weininger •

Sorry about that! It seems like a source map issue. I'm looking into it now.

Read next

harman_diaz profile image

Benefits of Azure Advanced Threat Protection You Need to Know

Harman Diaz -

uhteddy profile image

Introducing svelte-bundle

uhteddy -

uthman_eli_cd82d29be9e571 profile image

Getting Started with Insomnia: How to Export and Publish Collections

Uthman Eli -

mahrukh_adeel profile image

Why Students Should Explore Microsoft Azure: The Cloud Platform for Your Future 🚀

Mahrukh Adeel -