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://vuejs.org/v2/cookbook/debugging-in-vscode.html.
VS Code happily connects to the Google Chrome JS debugger:

Screenshot 1: VS Code JS debugger successfully connects to Chrome to debug Vue.js
https://i.stack.imgur.com/YPbTu.png

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

   // 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:

   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 inside Chrome, that is awful. I love Azure Static Web Apps & Functions and would appreciate any assistance on this. Thank you.

Answer 1

The process is a bit manual to set up the tasks and launch config, but it’s possible. Take a look at this setup here (it’s using Edge but chrome should work the same).

https://github.com/anthonychu/static-web-apps-chat/tree/main/.vscode

I think I also had to set up the source map: https://github.com/anthonychu/static-web-apps-chat/blob/main/frontend/vue.config.js

If you get stuck, let me know and I can help.

Answer 2

Hi @Anthony Chu - MSFT I am so excited to meet you. I loved your MS tutorial videos - I watched them all to teach myself this stuff! SWA is such an amazing and slick solution. It is a privilege that someone at your level is helping me with such a basic query! Thank you.

The launch.json you provided seems like a really great solution and will solve 90% of my problem. Maybe I can write a blog article about this to help others find this solution.

The only remaining question I have is: how do I attach this launch.json file to an already-running Azure Functions (C#) app on a different port? This example is for node.js but I am using .Net Azure Functions. I have a hunch it is a very similar procedure.

I currently run the Azure Functions app very smoothly in a separate VS Code window, it has its own server with its own port and the HTTP requests are already working in there. Here is a screenshot of my Azure Functions separate app that I want to link to my other Azure Static Web App:

Answer 3

Amazing, that's exactly what I was searching for, I knew it had to be something like that. Will try it tonight and write a detailed report if it works, maybe maybe it into a blog or something! So cool, thank you @Anthony Chu - MSFT for your support and great documentation & videos.

Answer 4

Thank you, Anthony Chu! I got it working after a lot of fiddling.

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.