Unable to connect to VS Code Server

[Timibadass]

📚 What are you trying to do?

I just set up code-server on my Mac for the purpose of using the Nuxt devtools, which works fine. I can access my server on 8080. But when i click on the VSCode icon on the devtools I get an error that says 'refused to connect' on the window

And a message on my terminal.

What am i missing?

🔍 What have you tried?

No response

ℹ️ Additional context

No response

[antfu]

Did you install the right code-server following the instructions? There is also a community code-server which is not working with devtools.

[Timibadass]

I think I did. I followed the instructions on the docs. If it's the wrong one, kindly help with the right link/instructions to follow. @antfu

[moussaclarke]

In case this helps @Timibadass - here's what I did to get this working via coder/code-server (which I installed via homebrew as per the code-server docs that you linked above)

First, remove/comment out the --accept-server-license-terms flag lines in node_modules/@nuxt/devtools/dist/chunks/vscode.mjs - src file for ref: https://github.com/nuxt/devtools/blob/main/packages/devtools/src/integrations/vscode.ts As the console error suggests, these don't seem to be relevant for the current Coder version of code-server (as opposed to the legacy pre-code tunnel Microsoft one perhaps)

I also had to manually install antfu.vscode-server-controller extension in code-server via my browser first - maybe since it's not available on the open-vsx marketplace which code-server uses? (More info here: https://coder.com/docs/code-server/latest/FAQ#why-cant-code-server-use-microsofts-extension-marketplace )

[moussaclarke]

@Timibadass Actually also take a look at this config option:

# nuxt.config.ts
    devtools: {
        ...

        vscode: {
            reuseExistingServer: true
        }
    },

This should be simpler, means you can ignore all the above and just launch it yourself with e.g. code-server --port=3080. It will bypass installing vs-code-server-controller and also won't call the launch script with the problematic flags.

~~However - it looks like there is a possible bug on line 67 of node_modules/@nuxt/devtools/dist/chunks/vscode.mjs~~

However it looks like checkPort (from unjs/get-port-please) always sends back true on line 67 of node_modules/@nuxt/devtools/dist/chunks/vscode.mjs, regardless of whether the specified port is in use or not, at least on my machine.

src here again for ref: https://github.com/nuxt/devtools/blob/bd5a8f1823213d96e91642235ae3962b4c294ded/packages/devtools/src/integrations/vscode.ts#L54

tldr;

1. add vscode: {reuseExistingServer:true } to devtools config (EDIT: looks like this might the default anyway)
2. (maybe) remove ~~the !~~ && await checkPort(port) on line 67 of node_modules/@nuxt/devtools/dist/chunks/vscode.mjs
3. run code-server --port=3080
4. start your dev server

NB: You might not need step 2 if checkPort is behaving

[julianlieow]

@Timibadass Actually also take a look at this config option:

# nuxt.config.ts
    devtools: {
        ...

        vscode: {
            reuseExistingServer: true
        }
    },

This should be simpler, means you can ignore all the above and just launch it yourself with e.g. code-server --port=3080. It will bypass installing vs-code-server-controller and also won't call the launch script with the problematic flags.

However - it looks like there is a possible bug on line 67 of node_modules/@nuxt/devtools/dist/chunks/vscode.mjs - should probably be:

if (vsOptions?.reuseExistingServer && await checkPort(port)) {

Unless there is a reason why checkPort should be falsy here.

src here again for ref:

https://github.com/nuxt/devtools/blob/bd5a8f1823213d96e91642235ae3962b4c294ded/packages/devtools/src/integrations/vscode.ts#L54

tldr;

1. add vscode: {reuseExistingServer:true } to devtools config
2. remove the ! on line 67 of node_modules/@nuxt/devtools/dist/chunks/vscode.mjs
3. run code-server --port=3080
4. start your dev server

For some reason, my terminal keeps saying it has failed to install the antfu.vscode-server-controller , altho i have manually installed it too.

Error for ref: Extension 'antfu.vscode-server-controller' not found. Make sure you use the full extension ID, including the publisher, e.g.: ms-dotnettools.csharp Failed Installing Extensions: antfu.vscode-server-controller

[moussaclarke]

@julianlieow hmm if you did steps 1, 2 and 3, as far as I can see it does not then try to install vscode-server-controller via the vscode integration script.

Also when I installed it in the localhost:3080 instance of VsCode/VsCodium manually via the browser, it seemed to just ignore that flag anyway. Just to be clear: you need to download the vsix file of the extension from the marketplace, visit http://localhost:3080 and upload/install it there.

If you're sure you've installed the extension manually in the correct instance, you could also try additionally commenting out these lines in node_modules/@nuxt/devtools/dist/chunks/vscode.mjs:

   "--install-extension",
   "antfu.vscode-server-controller"

But as mentioned before - if you did steps 1-3 from the previous tldr, I don't think it should be necessary. I haven't tried this on a fresh install yet though so YMMV

[moussaclarke]

Btw just a heads up that the inline help still links to the legacy Microsoft code-server blog post & install script which is no longer available for download and has been entirely superseded by code tunnel, at least on my (old-ish) Mac - https://github.com/nuxt/devtools/blob/bd5a8f1823213d96e91642235ae3962b4c294ded/packages/devtools/src/integrations/vscode.ts#L151

Could docs and implementation therefore be updated for the coder/code-server version? Especially since the MS code tunnel implementation is currently broken upstream due to CORS/iframe issues as per https://github.com/nuxt/devtools/issues/38#issuecomment-1457914562

@antfu

[julianlieow]

@julianlieow hmm if you did steps 1, 2 and 3, as far as I can see it does not then try to install vscode-server-controller via the vscode integration script.

Also when I installed it in the localhost:3080 instance of VsCode/VsCodium manually via the browser, it seemed to just ignore that flag anyway. Just to be clear: you need to download the vsix file of the extension from the marketplace, visit http://localhost:3080 and upload/install it there.

If you're sure you've installed the extension manually in the correct instance, you could also try additionally commenting out these lines in node_modules/@nuxt/devtools/dist/chunks/vscode.mjs:

   "--install-extension",
   "antfu.vscode-server-controller"

But as mentioned before - if you did steps 1-3 from the previous tldr, I don't think it should be necessary. I haven't tried this on a fresh install yet though so YMMV

Worked! thanks alot!

[PrimeTimeTran]

Thanks for your guys help.

I get this in my console though.

[00:40:38] Extension host agent started.
File not found: /opt/homebrew/Cellar/code-server/4.19.1/libexec/lib/vscode/out/vsda_bg.wasm
File not found: /opt/homebrew/Cellar/code-server/4.19.1/libexec/lib/vscode/out/vsda.js
[00:41:29] [127.0.0.1][83837075][ManagementConnection] New connection established.
[00:41:29] [127.0.0.1][7d0020fd][ExtensionHostConnection] New connection established.
[00:41:30] [127.0.0.1][7d0020fd][ExtensionHostConnection] <60229> Launched Extension Host Process.
[00:43:25] [127.0.0.1][83837075][ManagementConnection] The client has disconnected gracefully, so the connection will be disposed.
[00:43:25] [127.0.0.1][7d0020fd][ExtensionHostConnection] <60229> Extension Host Process exited with code: 0, signal: null.

I did every step I believe.

• Install this VSCode extension(on my local VScode... right? Not that VS Code server one which only runs inside the browser...?)

• Add this to nuxt.config.js vscode: {reuseExistingServer:true }

• Removed the and conditional, && !(await checkPort(port)), from this line of code. if (vsOptions?.reuseExistingServer && !(await checkPort(port))) {

• Commented out these two lines.

  "--install-extension",
   "antfu.vscode-server-controller"

• run code-server --port=3080

• start your dev server

Now I "sorta" connect to nuxt dev tools

It gives me the above logs and then my UI looks weird. Instead of nuxt dev tools it's the VS Code Server editor... so yeah, not useful.

Any suggesitons? TIA~!

[amery]

reuseExistingServer alone isn't enough when vscode-server is started by vscode itself on a devcontainer.

code-server 4.21.2 installed via .deb, ubuntu 22.04 dev container

[MURHAF-ELMASRI]

@Timibadass Actually also take a look at this config option:

# nuxt.config.ts
    devtools: {
        ...

        vscode: {
            reuseExistingServer: true
        }
    },

This should be simpler, means you can ignore all the above and just launch it yourself with e.g. code-server --port=3080. It will bypass installing vs-code-server-controller and also won't call the launch script with the problematic flags.

~However - it looks like there is a possible bug on line 67 of node_modules/@nuxt/devtools/dist/chunks/vscode.mjs~

However it looks like checkPort (from unjs/get-port-please) always sends back true on line 67 of node_modules/@nuxt/devtools/dist/chunks/vscode.mjs, regardless of whether the specified port is in use or not, at least on my machine.

src here again for ref:

https://github.com/nuxt/devtools/blob/bd5a8f1823213d96e91642235ae3962b4c294ded/packages/devtools/src/integrations/vscode.ts#L54

tldr;

1. add vscode: {reuseExistingServer:true } to devtools config (EDIT: looks like this might the default anyway)
2. (maybe) remove ~the !~ && await checkPort(port) on line 67 of node_modules/@nuxt/devtools/dist/chunks/vscode.mjs
3. run code-server --port=3080
4. start your dev server

NB: You might not need step 2 if checkPort is behaving

this solution worked for me without being able to open element in embedded vscode https://github.com/nuxt/devtools/pull/207