VS Code for the Web

Developing in the Clouds

Cloud hosted development environments accessible from anywhere

VS Code for the Web - Bringing VS Code to the browser

Microsoft has released a preview of VS Code for the Web. Now when you go to https://vscode.dev, you'll be presented with a lightweight version of VS Code running fully in the browser. Enabling you to open a folder on your local machine and start coding. No install required.

With the availability of vscode.dev, The Visual Studio Code team has begun to finally realize their original vision of building a development tool that can run fully serverless in the browser, no virtual machine or container needed.

Modern browsers that support the File System Access API (Supported in Edge and Chrome plus hopefully more browsers soon) allow web pages to access the local file system (with your permission). This simple gateway to the local machine quickly opens some interesting scenarios for using VS Code for the Web as a zero-installation local development tool.

Since VS Code for the Web is running completely within the browser, some experiences will naturally be more constrained, when compared to what you can do in the desktop app or GitHub Codespaces. For example, the terminal and debugger are not available, as you can't compile, run, and debug applications within the browser sandbox yet.

Extensions such as themes, key maps, and snippets all work in vscode.dev and you can even enable roaming between the browser, the desktop, and GitHub Codespaces through Settings Sync. More extensions will be compatible as authors update them to make use of vscode.dev & github.dev overtime.

vscode.dev also offers support for GitHub and Azure Repos (part of Azure DevOps) built-in.

You can also head to insiders.vscode.dev which allows you to test out the new monthly features early, just like you can by installing the desktop insiders version.

Continue Working in a New Codespace

Should you want more features like a terminal or debugger you can move to GitHub Codespaces at any time. By clicking in the bottom left hand corner click on the or GitHub button or use keyboard shortcut Ctrl + Alt + o and then choose Continue Working in a New Codespace

You can then choose the instance type you want to use, it will then open a new Codespace for you to work in. Note: If you have any changed or added uncommitted files then you will be prompted with an option box about how you want to continue.

Once you have completed your current task, you need to stop the current GitHub Codespaces session along with deleting the codespace storage to stop the billing session, we have covered the steps to do this in our JasmineWS doc Ending and Deleting Codespaces in detail.

Remember that GitHub Codespaces is a Chargeable product, once you have used up your free monthly allowance. Our Codespaces section below covers the allowance in a little more detail.

If you would like more information about working with GitHub Codespaces then our JasmineWS tutorial docs cover working with GitHub Codespaces plus we have a growing number of FAQs on Git, GitHub and VS Code.

Insight from JasmineDesign:

We have found vscode.dev and github.dev versions really useful, just open a new browser tab then head to vscode.dev and we are able to start creating or editing files with nothing to install. If we are on GitHub.com wanting to review some code just press . the repository is then opened in VS Code in the browser, which makes exploring the repository code much more straight forward and natural.

Announcing VS Code for the Web - Azure (private preview)

Microsoft has revealed today () a new variant of vscode.dev that has Azure Cloud Shell terminal inbuilt along with support for VSCode Addins (I'm guessing the ones that already support vscode.dev only) plus support for GitHub.

This will allow you with just a browser to interact with Azure to stand up new services or maybe that simple code fix with nothing more that web access and a browser.

Within this environment you can one-click run, debug and deploy Azure applications with the help of tools like the AI App Template Gallery, GitHub Copilot, and Azure Extensions plus much more.

This is a Private preview at the moment that you need to apply for access to. This video on youtube covers the details of vscode.dev/azure and within the video description you will find the link to apply for access.

Once we have more information we will post further updates here.

GitHub Codespaces

GitHub Codespaces allows you to develop entirely in a cloud environment with up to 32 cores. Using Codespaces a integrated development environment (IDE) built around Visual Studio Code on GitHub that can be accessed from a web browser, Visual Studio Code, or using SSH. Plus a number of other editors allow you to connect to a remote GitHub Codespaces.

GitHub Codespaces is a Chargeable product, but with a free of charge GitHub account you still get 120 core hours of usage and 15 GB-monthly storage included each month. Which means if you use 2 core option to setup your Codespace you will get 60 Hours free each month, but if you want more you can setup billing details to allow this. Pro accounts get 180 core hours and 20 GB storage per month.

You can develop in your Codespace directly in Visual Studio Code. By connecting the Visual Studio Codespaces extension with your account on GitHub or you can use a browser-based editor.

We have more details on GitHub Codespaces on our Codespaces page plus an overview of how you can use Codespaces within an Organisation. For a more practical hands on guide we have GitHub Codespaces with the JasmineWS docs plus some FAQs.

Insight from JasmineDesign:

We have found GitHub Codespaces are a great choice both straight forward and fast. Should you need to update or create a pull request for a repository, just create a Codespace no waiting for downloads or install files on a local machine, you can work in the browser tab or straight from the locally installed VS Code, or a few other supported editors. If we want to explore a new idea, create a new repository with a readme. Then you can create a Codespace to start coding, without any worries about installing or changing software versions on your own machine.

Other Cloud Development Environments

JasmineDesign Development Workspace

Please see our Writing Code at JasmineDesign for a full list of available environments.

JasmineDesign Browser Code Editor

What is GitHub.dev ?

Press . on any repo to make quick edits powered by Visual Studio Code.

This is a great way to read or make changes to code on GitHub.

This differs from Codespaces as it does not have any compute behind it, so you don't get to use the terminal or to Run & Debug your code. github.dev is available today free for all GitHub users.

You can also just change the URL from .com to .dev to launch the Editor. For more information take a read of the doc's page.

If you press Shift ↑ + > this will open the editor in a new tab.

You need to be logged into GitHub.com to use this.

We have written a step by step tutorial that guides you through building a website on GitHub, using github.dev to make and update a website from our templates that you can host on GitHub at jasminews.uk. We also have a FAQ with some helpful tips for working with github.dev

vscode.dev Links

GitHub Codespaces Links

Helpful Resources

This page was last updated on .