Visual Studio Codespaces – Bringing the Power of Cloud to Your Development Environment

Visual Studio Codespaces - Bringing the power of Cloud to your development environment

Some background info first

So, you are a developer, you develop your magical apps using Visual Studio and often time get frustrated with the sluggish development environment? which in turn kills your productivity? And guess what, to solve this, you plan to upgrade the hardware of your computer (is it practical?)? what if I tell you without upgrading your development environment’s hardware, you can achieve super-productivity even using your aging computer?

Sounds exciting? isn’t it? Well, this is possible with Visual Studio Codespaces.

Visual Studio Codespaces is a cloud-powered development environment. With Codespace you use your Visual Studio Integrated Development Environment (IDE) to connect to your code running in some remote cloud-hosted container. Nothing runs on your local computer other than the (Thin) Visual Studio IDE. We will see it in a bit how thin is this ‘thin’.

For analogy think of SQL Server Management Studio or Toad connected to some remote SQL Server or an Oracle database. You write and execute all the T-SQL/PL-SQL scripts in the local IDE but they actually run on the server without eating up any computing resource from your local dev environment. It is just like a thin client to connect to the powerhouse in the back.

Codespaces comes with multiple flavours to cater to different use cases. Let’s look at them now.

Flavours of Codespaces

  1. Visual Studio Codespaces in the Browser – This the browser-based IDE. Yes, you heard it right. You can run and debug your app in your browser without having to install Visual Studio. This allows you to debug, accept pull requests while flying on an airplane from your mobile device. Codespaces in browser is available in GitHub and Visual Studio Online.
  2. Visual Studio Codespaces in VS Code – Code spaces created in your Azure Subscription and can be connected with a VS Code extension. Know how.
  3. Self-hosted Codespaces – you host your own Codespace server on your own environment using Visual Studio Code.
  4. Visual Studio Codespaces in Visual Studio 2019 a.k.a GitHub Codespaces for Visual Studio – In my opinion this for the serious workloads. You use your Visual Studio 2019 IDE just as a thin client to connect to the Codespaces hosted in the Cloud.

In this article, I’m going to cover #4, Visual Studio Codespaces for Visual Studio 2019. In next few sections, we will see what Codespaces has to offer to achieve your super-productivity.

Let's get slim first

As we are bringing the power of the Cloud onto our development environment, I thought I should reduce some weight from my Visual Studio installation and make it slimmer. Remember, I want to offload everything to the Cloud. So, I went ahead and uninstalled all the workloads from Visual Studio except Codespaces.

Visual Studio Codespace Installation Requirement

To make your Visual Studio slim, just open Visual Studio Installer >> Choose your Visual Studio Installation (I’m using Visual Studio 2019 Community Preview, Build 16.8.0 Preview 5) >> Click on Modify >> go to Individual components tab >> search for Codespace. Check that and uncheck everything out >> finally hit the Modify button. Now, this will uninstall every workload from your Visual Studio and cut down the disk usage drastically.

With my typical developer setting with ASP.NET, Azure Development, and .NET Cross-platform workloads, my installation size was 5.51GB. Now uninstalling everything it got reduced down to 1.59GB only. Yes, I was talking about this ‘thin’ only.

How about offloading the brain and memory too? ​

Now that my Visual Studio is much slimmer, let’s see if I could get rid of my local machine’s processing and memory power as well.

To test this out I took eShopOnTheWeb ASP.NET reference application. I ran it side by side. One in my local Visual Studio on my laptop and another one in the Codespaces. And the result is really amazing as below.

Codespaces CPU and Memory usage

For reference, my local Visual Studio is running on my Laptop configured with 8GB RAM and 4Core CPU, same as my configured Codespaces. While debugging this application side-by-side I observed in my local laptop memory was spiking up to ~700 MB and CPU is up to ~10% whereas running the same on Codespaces Memory and CPU spike remained almost flat all the time at ~160 MB and ~3% respectively.
Now, Imagine the possibility here. It’s literally not eating up any computing resource from your Computer as compared to your local Visual Studio.

Now the question is, do you really need to upgrade your hardware to run your monster apps on Visual Studio? I guess the time has come to safely say No.

Now, let’s run through some practical scenarios that any developer would run and see where it stands.

Let's play (like a Developer)

After making the Visual Studio slim and trim I wanted to take it to the playground and see how it functions with some commonly used development scenarios.

Load time vs Connect time

For this testing, I ran eShopOnTheWeb solution side-by-side with a Visual Studio running in local and loading the same by connecting it to codespaces.

I ran this test on 110 Mbps internet connection, and here are my findings – 

  • Creating a new Codespaces – start to end – 1.31 mins
  • Resume a suspended Codespaces – ~4 mins (I was expecting it to load faster than above)
  • Re-opening an already running Codespaces – 1.08 mins
  • Opening the same solution in local Visual Studio – 45 sec

This is understandable why Codespaces is taking more time to ‘connect and load a solution’ vs just loading the solution. However, a bit quicker load time would have been better.

Now that the solution is loaded inside the IDE, let’s do some general debugging and see how it does.

Everyone's favourite - Hit F5
At this moment, my Codespace is connected. The eShopOnTheWeb solution is loaded inside the IDE. Next, I went ahead and hit F5 to run the solution. It opened up localhost in my browser with the port number configured in launchSettings.json file for IIS Express profile.
Codespaces debugging

And, this localhost web is not running on your local IIS Express. The IIS Express is running inside the Codespaces. Here comes Some more local resource-saving. Neat, isn’t it?

I was able to open this localhost URL in other browsers without any fuss.

From here onwards my debugging experience was seamless, and I didn’t face any sluggishness except once my IntelliSense responded slowly (could be because of the slow network?).

Many debugging features are not supported at this moment in Codespaces. You can find the full list of supported features here

Next, to take the debugging experience further, I’m going to go ahead run a few API development scenarios.

Now some API debugging

This eShopOnTheWeb solution had a Web API project – PublicApi. I made it a startup project and ran it. To test and debug its endpoints, I tried two different approaches
1. Calling the API endpoints from Postman

Codespaces Postman Debugging

2. Calling the API endpoints from a console application running in my local Visual Studio

In both cases, it was able to hit the breakpoint on the Codespaces and the debugging experience was smooth.
To make it spicier, how about we try to debug a Web API to Web API call, or a Web App (SPA?) to a Web API call who are running separately on their own Codespaces. Let’s dive in.

Cross Codespaces debugging

If you have multiple web APIs in your project, then debugging an API to API call is a common scenario. The way most of the developers achieve this is – they run new instances of Visual Studio per web API. All the services then run on local IIS in different ports attached to the Visual Studio instances. This allows API to API debugging possible.  Now, running more Visual Studio instances means more resource utilization, and sluggish performance.

Can this problem be solved using Codespaces? To test and find the answer, I’ve created one Codespace (C1) for a small Web API app to mimic the caller API and another Codespace (C2) is running eShopOnTheWeb API. Next, I tried to make a REST call from C1 to C2. Unfortunately, it couldn’t connect and gave an exception No connection could be made because the target machine actively refused it. 

One of the other most commonly used debugging scenarios is connecting a Website such as Single Page Application (SPA) to a Web API to debug end to end flow. Both apps run on their own Visual Studio instances. To test this scenario, I have created another Codespace with a Single Page Angular Web application (using default Visual Studio Angular template) and tried to call the eShopOnTheWeb WEB API from the SPA TypeScript code. Here also the SPA Codespaces couldn’t connect to the API Codespaces URL because of a similar reason as above.

It’s obvious why Cross Codespace connection is not establishing. Because it is trying to connect over the internet to a localhost URL which is not publically accessible and exposing a public URL could be a security risk. 

To tackle the above scenarios, it would be great if Codespaces exposes a short-lived randomly generated public URL (like Codespaces in the Browser) or provides some sorts of bridge between Codespaces, something like Bridge to Kubernetes. 

Feature based development with Git

So far we have experienced some very common developer debugging use cases. What about version control and Feature-based development using Git?
With the new Git experience for Visual Studio and with the integrated terminal it is seamless to create branches and run all common git commands.

In git world, everything gets committed in local first. Now, this ‘local’ term can create a bit of confusion here in the case of Codespaces. What is ‘local’ here? your local computer or something else? Well, any branch you create with Visual Studio Codespaces gets created on its own storage and filesystems, not on your local computer. These are remote from you but not remote branches 🙂

Once the branches are created, the experience of merging one to another or creating a new pull request is no different than any other Visual Studio.

Create Pull request

My concluding thoughts

While writing this article, GitHub Codespaces is in limited public beta. I got my early access a few days ago. The above experiments and experiences are based on my 2-3 days of usage. There is a lot more testing I have to perform in some more real-world situations. Such as maintaining and connecting these Codespaces with more or more Azure subscriptions, SSO, and integration with corporate Azure Active directory, working with Azure DevOps etc. However, what I just experienced in the last few days is promising.

I always advocate for the developer’s productivity. Having a smooth, sleek, and high-performance Developpement environment is always a developer’s fancy. I think, bringing the power of Cloud to the Development Environment with Visual Studio Codesoaces will give a developer super-productivity.

It is just the beginning of the Cloud-Powered Development Environment for mainstream Development. I’m hoping to see more and more IDE to become Cloud-Powered in the future. This is going to change the way we code, collaborate, and onboard a new developer in the future.

At the end of the day “Developers, you deserve the best.!!!”