How to use VS Code JS debugger for Vue.js app with the Azure Static Web Apps emulator (swa)?

Question

I'm starting out creating an Azure Static Web Apps app using the Vue.js template provided by Microsoft. It works very well, with only one snag: I'm struggling to debug the final minified Vue.js code using VS Code when I use the Azure Static Web Apps emulator to serve up the site locally.

Everything works fine when I use npm run serve to serve up the Vue.js project as per the instructions from here: https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html.
VS Code happily connects to the Google Chrome JS debugger, see screenshot 1:

Screenshot 1: VS Code JS debugger successfully connects to Chrome to debug Vue.js

Here is my launch.json file for VS Code that I used with success: Screenshot 2

    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "breakOnLoad": true,
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
              },
            //"preLaunchTask": "vue_js_compile_and_start_azure"
        }
    ]
}

The problems begin when I want to use the Azure Static Web Apps emulator ('swa') as per the Microsoft instructions. Why do I need it? Because I want to bring my own Azure Functions app and link my Azure Static Web App to it. See this page for details, I have set this up and tested it in the cloud, it works great: https://learn.microsoft.com/en-us/azure/static-web-apps/functions-bring-your-own. The main reason I want to use 'swa' emulator locally is because it helps make API calls route effortlessly and allows for authentication to be tested with great ease and simplicity. Only it doesn't play so nice with Vue.js.

This is the command line I tried for running the SWA emulator: Screenshot 3

npm run build && ^
swa start ./dist --api http://localhost:7071

It works and lets me connect my SWA to the running Azure Functions app on port 7071 (in another VS Code project running separately and working), but the issue is that it must use the 'dist' part of my project, which is a minified and uglified JS created from Vue.js by webpack. Moreover, the SWA server needs to keep running and so the VS Code debugger never ends up starting properly and I cannot debug and set breakpoints etc. like I can with the earlier command.

Is there any way I can feed the 'swa' Azure emulator an un-minified development version of the Vue.js project that can be successfully debugged using VS Code itself? I don't want to have to resort to using console prints to debug, that is awful. I love Azure Static Web Apps & Functions and would appreciate any assistance on this. Thank you.

Sorry that this is pretty manual to set up but it’s possible. Take a look at this: github.com/anthonychu/static-web-apps-chat/tree/main/.vscode to see if you can mimic the same setup. If you get stuck, I can help. — Anthony Chu
– Anthony Chu, Commented Sep 9, 2021 at 2:55

Derek Van Tonder · Accepted Answer · 2021-09-09 12:29:48Z

TLDR: I fixed it with help from Microsoft (thank you, Anthony Chu!)

My tasks.json under my VS Code project now looks like:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "shell",
            "label": "swa start",
            "command": "swa start http://localhost:8080/ --api http://localhost:7071 --run runserve.cmd",
            "isBackground": true,
            "problemMatcher": [],
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "dependsOn": []
        }
    ]
}

runserve.cmd (this was needed because having 'npm run serve' as the argument to the saw --run arg wasn't working for some weird reason, like the cmd line was being chopped off?):

npm run serve

And finally what brings it all together is launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "pwa-msedge",
            "url": "http://localhost:4280",
            "webRoot": "${workspaceFolder}/src",
            "presentation": {
                "hidden": true,
                "group": "",
                "order": 1
            },
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
            }
        }
    ],
    "compounds": [
        {
            "name": "Launch Static Web App",
            "configurations": [
                "Launch Edge"
            ],
            "stopAll": true,
            "preLaunchTask": "swa start"
        }
    ]
}

Now my two VS Code projects (Vue.js SWA project and my Azure Functions project) are co-existing very happily, and by using the SWA emulator I can get access to built-in authentication mocking, routing and all that good stuff. I can debug the Vue.js smoothly inside VS Code (NOT the browser!) and also debug the Azure C# Functions smoothly in my other project. I'm a very happy panda! Thanks Anthony for your great assistance.

Collectives™ on Stack Overflow

How to use VS Code JS debugger for Vue.js app with the Azure Static Web Apps emulator (swa)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related