Intro to VSCode.dev: The IDE in your browser

Once you accept them, you will be able to visit the running application using the provided URL:

You can view the console output at Debug tab at the bottom of the screen.

Stop the server

To stop a running application, use the command Team button at the top of the screen:

Port A tab at the bottom of the screen lists all running projects and reminds you which URL leads to which project. From here you can stop any project.

How about some Kotlin?

I was on Kotlin blow lately, so let’s try something more exotic for VS Code and import a Kotlin project to work with. To import the project, I follow the same basic steps as for the .NET-HTMX project:

Getting your head around running a Kotlin project takes a little more effort. First I right click on the imported build.gradle.kts file. This gives a context menu that includes “Gradle” along with Run task option. Opening this brings up another context menu where I have the option to run a Gradle task. I’m typing run and the console produces the expected result when the server starts:

When I open the port I can see my application running. After refreshing the page, the Gradle extension provides a Gradle tab on the left side of the screen, which displays tasks such as Run in drop-down menus. Running the Kotlin application required a couple of extra steps, but nothing onerous.

VSCode.dev with GitHub codespaces

Another approach supported by VSCode.dev is to run projects using GitHub codespacesmanaged cloud hosting environment. Codespaces is a cloud-based development environment such as GitPod. It gives you 60 hours of free development time and then charges based on the type of virtual machine you use.

Starting from VSCode.dev, open Remote Explorer panel on the left side of the screen. Choose GITHUB CODESPACE and press Create space:

After one more set of permissions, you will be able to access your repositories on GitHub as shown in the screenshot above. I choose MTyson/iw-java-spring-react from my repository and then the master branch and then 2 cores with 8GB RAM from the options provided.

This will launch a new window with the Codespaces version of VS Code. He suggests installing the recommended extension for this repository (Java Extension Pack), and I agree. This is followed by a step-by-step guide to setting up your environment, starting with installation YaDK.

Luckily Codespaces comes with SDKMan already installed, so you can easily upgrade the Java version from 11 (which is already installed) to Java 21 (which I used for my Spring-React project). In the terminal I type:

$ sdk install java 21.0.2-open

Once this is complete I can run the project with:

$ maven spring-boot:run

Similar to running an application in VSCode.dev, Port The tab shows the running application and allows us to access the user interface. We can also manage the running application from Codespaces. When you’re ready to close Codespaces, return to the VSCode.dev main page and use Remote Explorer menu.

Container-based development has some differences from tunneling to a virtual machine, especially regarding the image lifecycle and its containerized nature. The rest of the development experience is similar.

Conclusion

VSCode.dev opens up some new features that are typical for a browser IDE. Besides the flexibility to write code anywhere, VSCode.dev can turn any cloud machine into a development platform and give you a full-featured IDE experience with your cloud projects. It also supports multiple developers using the same environment to code together on social networks.

Overall, VSCode.dev is a great addition to your development toolset.