End to End Developer Experience with GitHub Codespaces

#github #git #vscode

Before we jump into this post, GitHub Universe 2020 had a lot of exciting content and if you need an updated end to end course on GitHub, check out: Build community-driven software projects on GitHub

Imagine having to not worry about which device you made the latest change on your project from. Imagine forgetting to push to GitHub from your laptop and still be able to continue coding on the go using your Surface Go or iPad. Picture a world where you have absolute freedom on the device you code with.

You must have heard of Codespaces and how it enables you to write code from your browser or VS Code while persisting your changes in the cloud. What you probably haven’t had the time to do is have a first-hand experience of what Codespaces feels like and how it can be beneficial to you. The reason I wrote this article is to give you a feel of Codespace.

Setting up Codespaces

Before you can create a Codespace, you need to set up the following:

A repository
At least a file in the repository

Codespaces Requirements

Let’s get these requirements out of the way by creating a basic node project and committing it to a repository

# Create a project directory
mkdir oauth-with-github && cd oauth-with-github

# Add a server and .gitignore files
echo "console.log('Welcome to Codespaces')" >> server.js
echo "node_modules" >> .gitignore

# Add a package.json file
npm init -y

# Install nodemon for watching
npm install -D nodemon

Add a dev script in the package.json file which you can use to trigger a nodemon command to start and watch the server:

# ./package.json
"scripts": {
    "dev": "nodemon server.js"
}

Create an empty repository without a readme or any other file in it and push the new project you’ve just created:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <REPO URL>
git push origin main

# Feel free to delete the project locally
# 1. You don't need it anymore since you will be cloud-coding
# 2. You safe your future self the confusion of having 2 copies
cd ../
rm -rf oauth-with-github

Open Repository with Codespaces

Once you’ve got your project on GitHub, you can click the Clone or download button to open the project in Codespaces.

Click Open with Codespaces from the dropdown menu to reveal all Codespaces that you have created for this repository. Since you have not created any, it will be empty with a button to create a new one.

Click the + New codespace button and wait for GitHub to initialize the Codespace for you

Once that is done, you will be presented with a very familiar look — VS Code:

Connecting to Codespaces from Local VS Code

It still doesn’t feel right for you to code directly from the browser — I get it. I understand you don’t have time to personalize the browser-based VS Code to match your current local settings. “It’s not even in dark theme”, I hear you.

To get you up to spead, what we can do is SSH into your Codespaces from VS Code and everybody wins:

Your code is in the cloud so it’s device-independent
You use your favorite editor with your favorite them and config
You have access to the remote terminal so you can still run all your shell commands

To connect to your Codespace from VS Code you need to complete 2 steps:

Connecting the Visual Studio Codespaces extension to your GitHub account
Open a Codespace from VS Code.

The complete the first step, follow these setup steps to install the Codespaces VS Code extension and authorize it to have access to your GitHub account.

Once you have Codesapces extension installed and authorized, we can move on to the second step. Open the Remote Explore sidebar menu from the VS Code Sidebar and you should find all your Codespaces (I have 2).

Click the Connect to Codespace icon that appears when you hover over a Codespace to connect to that particular Codespace.

Few seconds after connecting, you should have your Codespace open in VS Code. From the screenshot below, you can see that my theme and VS Config is just how I like it