How exactly does VS Code work in Blink?

[predmijat]

Hey,

Is there a detailed explanation on how does VS Code work in Blink? I found this: https://docs.blink.sh/advanced/code but it doesn't tell me much on how exactly does it work...what happens when I type code?

[mramsden]

I’m not a maintainer of the project but I have a background in iOS development so take this as an educated guess and please offer any corrections or out-right rejections 😄

It looks like this would be a good place to start.

My assumption is that at a high level VSCode being a web app at heart allows it to run in an embedded browser in the Blink app. There are a few different behaviours though based on the kind of URL that you are connecting to.

If you have a Github codespace or vscode remote user session then it will open an embedded browser and show that URL to the user.

On the other hand if there’s a local file path being referred to then Blink will first spin up a local server that is connected to the iPad’s file system and serve those files up to a browser based session hosted at vscode.dev. Looking elsewhere in the app there is the BlinkCode framework which provides the CodeFileSystemService. This component takes care of handling messages from VSCode to list, read, write… files.

I’m working on the assumption here that Blink doesn’t actually contain any VSCode files itself instead relying on the versions hosted at Github codespaces and vscode.dev.

[carloscabanero]

This is fully correct, added more information in my comment. Thanks for jumping in!

[carloscabanero]

Blink Code is just a thin layer on top of the browser to add some additional features to the browser version of VS Code. So one thing to take into account is that Blink Code is not running any local instance of VS Code. It connects to the remote instance you specify depending on the parameters:

• If you run it with code ., it will connect to VSCode.dev. This allows you to edit local and remote files using Blink-FS, and will provide code editor features like some basic auto completion, etc. But VSCode for web version has limited compatibility with some extensions. Despite its limitations, it is still better than other local editors on iPad, but try it for yourself.
• When you connect to a remote VS Code instance (ie code https://codespaces…). Now you have all the remote code features and this is the recommended way to code if using a remote environment. All extensions should be available.
• There are also VS Code tunnels that will allow you to safely connect to your Desktop instance. This is a service provided by GitHub, they will basically expose your desktop running VS Code so you can work from the browser as if you were there. This should also be compatible with all extensions. You also run it with code https://code-provided-url)

Let me know if you have more questions!

[mramsden]

This is more of a general iOS question rather than Blink specific.

It's been a while since I did any work with running servers inside an iOS process. How are the ports exposed? Can they be accessed outside of the app process or does iOS do something to restrict them to only being available inside the same process.

[carloscabanero]

In the VS Code for Codespaces, it is actually a Codespace URL. If you examine it, it will be something like https://some-codespace-port.github.dev, and you need to be logged in on GitHub to access it.

On Blink Build we actually do something cooler, we expose it through Wireguard.