Next.js Discord

Discord Forum

How to run debug with HTTPS in VScode

Answered
Yacare Caiman posted this in #help-forum
Open in Discord
Yacare CaimanOP
Hi guys,

I'm following nextjs docs to debug full stack nextjs in VScode.
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }

But my app require --experiminal-https, I don't know how to config the launch.json.
What should I do? Thanks
Answered by Yacare Caiman
@B33fb0n3Hi guy, I found the solution, just simple add "args" into the config like this 
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "args": ["dev", "--experimental-https"],
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
View full answer

21 Replies

Yacare CaimanOP
Thanks, I usually use this config, it's simplier than your solution, but it doesn't work anymore 
        {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "yarn dev",
            "serverReadyAction": {
                "pattern": "- Local:.+(https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithEdge"
            }
        },
"dev": "next dev --experimental-https",
Yacare CaimanOP
sadly, I'm working on company project and my company blocked ngrok
@Yacare Caiman sadly, I'm working on company project and my company blocked ngrok
B33fb0n3
then you can use vscode itself. Click the button in the left corner (see attached) and enter your port that you want to forward. Like that you also get a https tunnel to your localhost. You might be asked for permissions as you tunnel is by default private
@B33fb0n3 yea, then you should forward the port 3000
Yacare CaimanOP
3000 always on the list
I just found that the issue occur only on WSL
If I run on Windows, Macos, it's fine
but WSL is my main development environment
B33fb0n3
just to get your issue right: you want to have a https to your localhost server, correct?
@B33fb0n3 just to get your issue right: you want to have a https to your localhost server, correct?
Yacare CaimanOP
actually not, my actual issue is when I run debug full stack, I can't access the page https://localhost:3000 in debug browser, it just loading and blank
so I'm trying to change the debug full stack config like the question, but that config doesn't run my project in https mode
sorry for misleading
B33fb0n3
oh ok, I guess I am not the correct person that can help you with this. All the best 🙂
Yacare CaimanOP
@B33fb0n3Hi guy, I found the solution, just simple add "args" into the config like this 
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "args": ["dev", "--experimental-https"],
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
Answer
Yacare CaimanOP
I hope you can help someone if they ask in the future
@B33fb0n3 the easiest way would be to use ngrok. That's a service that builds a https tunnel to your localhost. Like that you can keep your nextjs app as it is and just start ngrok to have https access on your localhost
Cape lion
I use ngrok as well for everything that implies these kind of things. Testing stripe webhooks etc. Just one command and you have https