Simplified Virtual Development Environment on the Browser: GitHub Codespace

Starting my cloud journey, one of the biggest challenges I faced was finding a place to practice Linux commands. GitHub Codespace has completely solved this problem.

As a seasoned professional, imagine being able to take your entire local development environment with you, minus the hassle of carrying your computer. GitHub Codespace offers exactly that. Codespace is a cloud-based service that allows you to create and run your projects directly from your browser. No need to set up your projects on your local machine — everything you need is hosted online and accessible from any device through the web.

Executive Summary

This article aims to introduce and simplify GitHub Codespace: a cloud development environment for developers. It covers the prerequisites, pricing, steps to launch and set up a Codespace, including installing essential tools like Terraform, AWS CLI, and Ansible. The guide also details how to push code changes to GitHub and manage Codespace efficiently.

What is GitHub Codespace?

GitHub codespace is a remote compute with a text editor (Visual Studio Code) attached to it that runs on the cloud, where you can set up a development environment. This means that you can install all your project dependencies and run from the browser. It automatically sets up all the necessary components for your project, including the source code, runtime, compiler, debugger, editor, custom configuration files, relevant editor extensions, and additional features.

With codespace, individuals can get up to 60 hours of free compute per month, The best part is, it has vim and nano preinstalled. 🤠

In this guide, I’ll walk you through the process of installing Terraform and AWS CLI within a codespace, enabling you to manage your infrastructure as code directly from the cloud on the go.

Pre-requisite:

To follow along, you simply need to have a Github account. You can click here to sign-up.

Steps to launch GitHub Codespace

i.) Create a GitHub Repository

1. Log into Github.com
2. Click on “New”, at the top left page of the screen to add a new repository.

1. Give you the new a ay name, and select the button to Add a README file. Then click on “Create”

ii.) Create Codespace for the Repository

Once the repository has been created, we can add a codespace using the following steps:

1. Navigate to the newly created repository and click on “Code”.
2. Select "Codespaces" and then click on “Create codespace on main”.

This process will generate a virtual development environment on the main branch of the repository, facilitating seamless coding and collaboration."

A couple of things happen when you create your development environment:

1. VM and storage are assigned to your codespace.
2. Container is created and your repository is cloned.
3. You can connect to the codespace.
4. Codespace continues with post-creation setup.

This will open a text editor (visual studio code) on a new browser window, we you can start your development.

Set-up the Codespace

Welcome to the exciting part where you get to set up your virtual environment to mirror your local development setup. This virtual environment will allow you to write, compile, debug, and test your code just like you would on your local machine.

In the below steps, we will setup and install terraform, AWS CLI, and Ansible on or virtual environment.

Install Terraform, AWS CLI and Ansible

i.) Make a File

Open your terminal within the virtual code environment and use the following command to make a new file nano setup_tools.sh . This command above will open up the nano editor on your terminal.

nano setup_tools.sh

Tip: If your terminal is not open by default, you can open this by using the hamburger button at the top right, select Terminal and New Terminal.

ii.) Add SetUp Script to the File

Copy the bash script below into the terraform installation file created above.

#!/bin/bash

# Update package list
sudo apt-get update

# Install dependencies
sudo apt-get install -y gnupg software-properties-common curl

# Add HashiCorp GPG key
curl -fsSL https://apt.releases.hashicorp.com/gpg | sudo apt-key add -

# Add Terraform repository
sudo apt-add-repository "deb [arch=amd64] https://apt.releases.hashicorp.com $(lsb_release -cs) main"

# Update package list again
sudo apt-get update

# Install Terraform
sudo apt-get install -y terraform

# Install AWS CLI
sudo apt-get update
sudo apt-get install -y awscli

# Install Ansible
sudo apt-get update
sudo apt-get install -y software-properties-common
sudo add-apt-repository --yes --update ppa:ansible/ansible
sudo apt-get install -y ansible

# Verify installation
terraform --version

# Verify installation
aws --version

# Verify Ansible installation
ansible --version

To save and exit the editor, press Ctrl + O, then Enter to confirm the file name, and finally Ctrl + X to exit.

Now, file setup is ready, and you can proceed with running the script to install Terraform, AWS CLI, and Ansible on your virtual environment.

iii.) Execute Script

Run the installation script to install terraform and print the version of terraform installed.

bash setup_tools.sh

This will execute all the necessary steps to install Terraform in your GitHub codespace environment.

Push your Changes to GitHub

Follow these steps to add your changes, commit them with a message, and push them to your GitHub repository:

i.) Stage the File for Commit

Use the git add command to stage the setup_tools.sh file. This prepares the file for committing.

git add setup_tools.sh

ii.) Commit the Changes

Next, commit the staged file with a descriptive message. This message should give an idea of what changes or additions you made.

git commit -m "Add setup script"

iii.) Push the Changes

Finally, push your commit to your GitHub repository. This uploads your changes to GitHub.

git push

Codespace is intelligent to push this change to your GitHub repository.

To Stop and Exit GitHub Codespace

i.) List Your Codespaces

On the your terminal, use the following command to list all your active Codespaces. This will help you find the name or ID of the Codespace you want to stop.

gh codespace list

ii.) Stop the Codespace

Once you've identified the codespace you want to stop, use the following command, replacing <codespace_name_or_id> with the actual name or ID of your Codespace:

gh codespace stop -c <codespace_name_or_id>

Here is a sample command:

gh codespace stop -c miniature-xylophone-wxq5v5pxx5gf57wp

Running the above command will kill the session and effectively stop and exit your GitHub Codespace, ensuring that you are not incurring unnecessary usage or costs.

Once you have run the command above, you can safely close the browser.

Final Thoughts

GitHub Codespace is a game changer, providing a simplified, cloud-based development environment accessible directly from the browser. By following the outlined steps in this guide, developers and cloud enthusiasts can quickly set up and configure their workspace, install necessary tools, and seamlessly push changes to GitHub.