Tip 324 - How to be productive with GitHub Codespaces

# How to be productive with GitHub Codespaces

# Use the power of the cloud to fuel your development

Wouldn't it be great if you could pick up a device and start coding on your project, without having to configure your environment and dependencies every time you switch device? You can with GitHub Codespaces (opens new window). Codespaces provides development environments in the cloud that you can access from anywhere with a browser, through VS Code (opens new window) and with Visual Studio (opens new window). This enables you to start development quickly, because the codespace contains all the dependencies, extensions and configuration that you need. And allows you to develop your software on thin-clients, like tablets and less powerful computers, because the cloud provides the compute power to crunch the code and compile, run and debug it.

In this post, we'll take a look at how you can use GitHub Codespaces from Visual Studio and from a browser.

# Prerequisites

If you want to follow along, you'll need the following:

• A GitHub account. You can create one for free here (opens new window)
• The latest version of Visual Studio (opens new window)

# Get started with GitHub Codespaces

Let's take GitHub Codespaces for a spin. We'll create one from Visual Studio and use it from there.

1. Open Visual Studio
2. In the search box, type codespace and click on the result "Connect to a codespace". This opens the codespaces window

(GitHub Codespace window in Visual Studio)

1. If you're not signed into GitHub yet, click on the Sign in to GitHub button and log in using the browser window that appears
2. Create a codespace by:
   1. Filling in a GitHub repository URL (for instance https://github.com/microsoft/AzureTipsAndTricks). The repo will be opened in the codespace
   2. Selecting an instance type
   3. Select the time after which to suspend the codespace. This shuts down the codespace, so that you stop paying for its compute costs. You do still pay a minimal cost (opens new window) for the storage that is attached to the codespace
   4. Click Create and Connect to create the codespace

Once the codespace is created, it will load in Visual Studio. Now, you can work on the code, do everything else that you are used to in Visual Studio and run and debug it. The code itself and the processes to run it (like a webserver) are not on your local machine. They are in the cloud, in the codespace. That's why you don't see the Open file in File Explorer menu item when you right-click the files in the solution explorer.

(Code in Visual Studio in a GitHub Codespace)

Let's switch to a browser and use Codespaces from there.

1. Open https://github.com/ (opens new window) and log in if you haven't done that yet
2. Open a repository, like https://github.com/microsoft/AzureTipsAndTricks or one of your own
3. In the Code section of the repository, click on the Code dropdown menu on the right
4. In the dropdown menu, click Open with Codespaces
5. Click New codespace. This creates a new codespace for this repository and loads it in the browser. The Codespace is an instance of VS Code in the browser. This means that it comes with all default VS Code extensions installed and that it might ask you to install additional extensions for your project

(Create a new codespace from GitHub)

1. Press F5 to run and debug the code.

(A web application running in a codespace, forwarded to a local browser)

If your repository is a web application, it will open in a browser window. The cool thing is that it is running in the codespace and that the web application is forwarded through port forwarding to your local web browser.

(Port forwarding from a GitHub codespace)

# Conclusion

GitHub Codespaces (opens new window) enables you to develop from anywhere, without needing an expensive developer computer or reinstalling project dependencies, every time you switch device. You can use it from a browser, from VS Code (opens new window) and with Visual Studio (opens new window). Go and check it out!