A Guide to Setting Up and Using GitHub Codespaces for Streamlined Development

Getting started with software development in any new project can be a daunting process. Depending on whether you’re running a Windows, Mac, or Linux operating system, the instructions to boot up the project correctly can differ a lot. There are many dependencies, extensions, and command-line tools to install and also network configurations that you might have to set up. And you haven’t even started writing your first line of code! 🤯 

What if there is a way to skip the hassle of getting your local dev environment up and running and immediately start-up the project without any hassle? GitHub Codespaces is here to save the day! 🤩  GitHub Codespaces is a cloud-based development environment that comes fully configured with all the dependencies, IDE, and extensions that you need to start contributing your first line of code. The best part of GitHub Codespaces is that it can run in any browser opening up the possibility to use your iPad, Android tablet, or even your Chromebook as a development machine. You don’t have to worry anymore about the hardware specs of your device since the whole dev setup is running in the cloud. The only thing that you need is a stable internet connection.

In this article, we’re going to explore how to get started with GitHub Codespaces and use a sample GitHub repository to start up the project, make a change and commit a line of code. Let’s get started!

What do you need to get started with GitHub Codespaces?

There are many ways to use GitHub Codespaces. The method that we will be using in this article is to start Codespaces from inside your browser. There are also other ways to start it up directly with an IDE like Jetbrains IntelliJ or Visual Studio Code. These methods for starting up Codespaces from an IDE won’t be covered in this article.

Anyone with a GitHub account can get started with Codespaces. It is free for individual use for up to 60 hours a month. After you exceed this limit, you will have to sign up for a plan to continue coding in the cloud-hosted environment. 60 hours a month should be ample time to decide whether you want to continue using this service full-time or as a side addition to your development tools.

1. Start CodeSpaces from a GitHub repository

You can start a Codespaces instance from any GitHub repository. I have set up a working React project in a public repository that you can use for Codespaces. Feel free to test it out directly from my repository.

When you open up the repository page, you will see a green Code button in the upper right corner:

Click on it to open up a menu. Select the Codespaces tab and then a different green button called Create Codespace on main will be shown.

Clicking on Create Codespace on main will start up a cloud development environment. A loading screen will be shown while the creation is in progress:

After the cloud environment is up and running, you will see a Visual Studio Code instance running from inside your browser:

You’re now ready to start using CodeSpaces! 💻

2. Start the React project from inside Codespaces

Now that your Codespaces instance is up and running. It’s time to do some actual coding! In the open terminal that is on display, type npm run start and wait for the process to start up.

When the React project has started up, it will open up a new tab in your browser in which you can see your front-end page:

You have just successfully started your React application from inside the cloud environment! No setup, dependency management or extensions on your own machine is required to make it work. 😎

3. Make a code contribution inside Codespaces

Let’s go back to our browser tab with Codespaces up and running. Navigate to the following file: src/App.tsx. On line 11 change the line to GitHub Codespaces and save your changes:

Go back to your tab in which you have your active front-end page running and refresh your page. You will see your changes immediately reflected on the screen.

Now that we’ve made our textual change in App.tsx, we can commit and push this change to our branch. This can also be easily done inside your Codespaces instance. You can either do this from the terminal or from the Source Control sidebar. Being able to perform git actions will depend on your access rights to the GitHub repository from which your Codespaces instance is running.

4. Note on port forwarding

When you ran npm run start in the previous steps, a local development server was started up from inside Codespaces. When an application inside Codespace starts a server with a localhost URL, port forwarding will automatically get set up so that you can visit the served page from a URL that looks like this:

This URL can only be accessed privately. This means that only you can access it with the GitHub account you used to start Codespaces. If you want to share this URL with friends or colleagues so that they can check out the web server from their own devices, you have to make sure that the PORT visibility is set to public. This can be done easily from within Codespaces itself. In the Panel window, click on the PORTS tab. Our React application was being served on localhost:3000. The row with Port number 3000 is the one that corresponds to our local web application. Right-click on this row and click on Port Visibility and then Public to enable public access to your served React page. The options for changing the port visibility will look like this:

5. Stop or terminate Codespaces

When you’re done with your coding session in Codespaces, closing the browser tab is not enough to terminate Codespaces. The cloud instance will still be running on GitHub’s server and each hour being run counts up to your 60-hour monthly allowance. You can either choose to pause or stop your Codespaces or to delete your Codespace instance completely. This can be done on the page of the GitHub repository by clicking on the green Code button and then clicking on the three dots of the active Codespace to show the termination options for your instance.

Wrap-up

GitHub Codespaces is a powerful cloud-hosted development environment that provides developers with a secure and efficient way to code, build, and debug their projects. Forgo the hassle of owning a powerful development machine and installing all the required development dependencies. Being a productive developer on an iPad is made possible with Codespaces. With its easy setup and collaboration features, GitHub Codespaces makes it simple for developers to get started quickly and collaborate with others on their projects. Give it a try today and see how it can streamline your development work. Happy coding! 😎