Take Your Development Environment Anywhere With GitHub Codespaces

Introduction

In a previous article, I showed how can preconfigured virtual machines be created to save time in configuring and installing software on multiple workstations. That is a suitable solution for the use cases mentioned. Still, there is another scenario where, in addition to having preconfigured environments, a development team needs to work collaboratively on the same environment. So that changes made by a team member are reflected in those of the other without the consequence of deleting changes in the rest of the workstations by reconfiguring a template virtual machine.

This article demonstrates the features of GitHub Codespaces for creating fully configured development environments in the cloud. It will explain how to get started with this service, the benefits, some examples, and best practices when using GitHub Codespaces.

Pre-requisites

• A GitHub account and basic knowledge of GitHub.
• For people unfamiliar with it, you might want to review these resources first. Git & GitHub

Getting Started with GitHub Codespaces

A Codespace is a cloud-based development environment that GitHub provides that allows developers to write, build, test, and debug their code from anywhere, using any device with an internet connection. It provides a fully configured, pre-packaged, and containerized development environment that can be customized with extensions, tools, and configurations to suit individual needs. With Codespaces, developers can collaborate in real time, share their environment with others, and easily switch between multiple projects without the hassle of local setup and maintenance. Codespaces also provide seamless and secure integration with the rest of the GitHub ecosystem, making it easier to manage code, pull requests, and issues.

I am sure that if you have used GitHub, at some point, you had to clone one of your repositories in your local environment using HTTPS, SSH, or GitHub CLI. There even comes a time when this operation becomes so common that we do not even go back to read the information shown in Figure 1. And we only copy and paste the URL into the terminal to clone the repository. If you look at this Figure in detail, you will notice a tab that says Codespaces.

Figure 1

If you select the Codespaces Tab, you will have a list of existing workspaces in the cloud, if any, and a green button with the label “Create codespace on main” (Figure 2). Codespaces are created on branches. Therefore, you can have dev environments for each one of the branches. However, if you switch to a new branch within the Codespace, the whole Codespace moves to that branch.

Figure 2

For further customization, you can always click on the ellipsis and select “New with options” where you can choose a different branch, the dev container configuration, the region, and the machine type, which can be even faster than the workstation that you are working on.

Depending on the settings and configuration, the Codespace may take a few seconds to several minutes to become available. Figure 3 shows the screen displayed while the Codespace is being created.

Figure 3

When it finishes, the Codespace will open up its Integrated Development Environment (IDE) which by default is VSCode. In Figure 4, look at the Windows taskbar and see that VSCode is not open on my computer but rather in the browser, with a unique URL. With the result shown by the terminal, you can see that it is a Linux machine, different from my local Windows environment.

Figure 4

If you make changes to your code, GitHub Codespaces will automatically save those changes, just in case of any outages or service interruptions, but that does not mean that Git will be tracking those changes. You must still use Git to push your changes back to your repository. If you do not want to work in the browser, you can always open your Codespace with the VSCode desktop application, but the autosave function will not work there.

Benefits of Using GitHub Codespaces

What might be useful for one developer might be helpful for another. Therefore, when configuring the environment, installing extensions, and changing dependencies in one environment, it will be reflected in the environments of other developers, all working under the same characteristics, reducing individual configuration time and possible errors due to inconsistencies in the dependencies.

Suppose you are working with Python version 3.8 and want to migrate the project to version 3.9. So that all team members now develop with environments that have Python 3.9, you would only need to modify the devcontainer.json file, push it with Git to the repository so that everyone has the new changes, and rebuild the containers using the command palette, as shown in Figure 5.

Figure 5

Another great feature is that you can develop anywhere and code from any device with internet access.

Imagine you are a software developer who travels for work. One day you receive a call from your manager while you wait for your next flight, informing you about a detected bug in the production app. At that time, you ran out of battery, and all wall outlets were being used by other passengers. Fortunately, you have your iPad with you, and you can quickly connect to the Codespace, diagnose the issue, and push a fix to the production app.

Lastly, you can preview your changes in the browser with instant reloads and share private and public ports with your teammates. You can easily share your work-in-progress with your teammates without deploying the changes to a staging environment or the production website. That saves time and allows for quick collaboration and feedback from your colleagues. Share your working app with them to let them know what you have worked on before merging your work in a Pull Request.

Tips and Best Practices

Use the right instance type.

Start with the smallest size and then scale when you want to ensure optimal performance for your project requirements.

Save and commit frequently.

Just like you would in a local development environment.

Customize your environment.

Add your favorite tools, extensions, and configurations to your environment to create a setup tailored to your needs.

Keep your Codespaces secure.

GitHub Codespaces are secure by default, e.g., all ports are private until you make them public. But GitHub will not return them to private ports when you have finished testing.

Try GitHub Codespaces for Yourself

Streamline your development workflow, go to this GitHub repository, fork it, and open up a Codespace. You are not allowed to create Codespaces for external GitHub repositories, so that is why you must create a copy of it. Then, follow the README, which has a step-by-step guide to test many Codespaces features.

Let me know in the comments below if you have already been using Codespaces or if it is something new for you.

Resources

• GitHub Codespaces docs
• GitHub Codespaces Video Series
• VSCode docs
• Dev containers

Summary

This article provided an overview of GitHub Codespaces, a cloud-based development environment that offers developers a convenient and powerful way to work on their projects from anywhere, using any device with an internet connection. The benefits of using GitHub Codespaces, including its flexibility, ease of collaboration, and streamlined workflow, were discussed. Besides, the author added tips, best practices, and a hands-on practice section to encourage readers to try GitHub Codespaces to experiment with the various features and customization options. This article demonstrated how GitHub Codespaces could help developers work more efficiently and effectively, especially in distributed and remote teams.