Add VS Code debug config in Feliz Template

[TheDevKnight]

Hi, would be very cool when you add the vs code settings for debugging with chrome. I have an app based on the template end get no working debugging experience 😕

Regards

[Zaid-Ajaj]

Hi there @TheDevKnight, I will check it out. I think you need to enable source maps in latest Fable. Will try to see how to make it work and come back to you 😉

[TheDevKnight]

Hi @Zaid-Ajaj that would be great. Thank you ☺️

[roboz0r]

Should be resolved by this PR #330

[Zaid-Ajaj]

Sorry @roboz0r I rolled back the config in the template because of I changed webpack back to v4.x (due to #332) so this issue remains

[babysnakes]

I'm not a front-end developer - just played around with Feliz but I think I found a solution for this problem - it seems to work in my very simple use case:

Almost all of the #330 PR is relevant. I followed the following steps:

• Downgrade source-map-loader in package.json to ^1.1.3.
• Make sure that the start script has -s parameter passed to dotnet fable (it's already in the template).
• Apply the following diff to webpack.config.js:

 pwsh  git diff .\webpack.config.js
diff --git a/webpack.config.js b/webpack.config.js
index 54dbd73..a1a07ae 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -127,6 +127,11 @@ module.exports = {
     // - file-loader: Moves files referenced in the code (fonts, images) into output folder
     module: {
         rules: [
+            {
+                test: /\.js$/,
+                enforce: "pre",
+                use: ["source-map-loader"],
+            },
             {
                 test: /\.(js|jsx)$/,
                 exclude: /node_modules/,

This change fixes both the link in console logs in the browser and enabled me to debug in vscode against the F# code.

In order to debug in VSCode you can just open the command pallet and select: Debug: Open Link it will launch a debug session and offer to save a task. In my case it generated the following launch.json file:

{
    // 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": "msedge",
            "name": "Web Debug",
            "request": "launch",
            "url": "http://localhost:8080/"
        }
    ]
}

@Zaid-Ajaj , If you're ok with this change I can create a PR.

HTH.

[haraldsteinlechner]

Hi @Zaid-Ajaj, @babysnakes, i'm struggling with debugging currently. Is this PR still relevant, or is there documentation how source map loading can be configured?
Cheers, Harald

[babysnakes]

@haraldsteinlechner sorry, I only used this one time, and it worked without a problem (both in VSCode- which required this snippet - and with Rider which just required just a keyboard shortcut. I have no idea if it's still relevant...