Codespaces in GitHub
Create and Setup Python Development Environment
Introduction
GitHub Codespaces is nothing but Visual Studio Code running on Linux hosted in Azure using your GitHub account. This means you can open your Project code directly from GitHub repository page in your favorite development environment (VSCode IDE) with all necessary dependencies to start working/testing/running. This is cool because there is nothing to install or mess with your local computer configuration as it completely runs in the browser.
If you like to start with Visual Studio Codespaces instead, see my previous article. Most of the customization described in this article works on both Visual Studio Codespaces and GitHub Codespaces since they are basically the same service.
Where to Start
I assume you already have a GitHub account, if not register for free account here. GitHub Codespaces is available in beta, so first you need to request access to Codespaces. Once you get an access to Codespaces, you can open any repository in Codespaces. Let’s see how to create and configure your first Codespaces below.
User Specific Customization
Create public repository named “dotfiles” in your GitHub account and place all your common customization files independent of any project/environment in that repository. Common examples would be .bashrc, .gitignore and .editorconfig. Note that this method will apply the customization for all the Codespaces environments in your GitHub user account for any of your project that you open in Codespaces. You can see some of my example files in here.
Project Specific Customization
Create a new repository for your project, let’s call it as “my_project”. This repository should be Public for Codespaces to work as of now. You can also select to add README file and license file of your choice. Once it’s created, it will take you to the Code page of that repository.
Click the Add file -> Create new file button in your repository main folder. In the file name box enter “.devcontainer/devcontainer.json”. This file will be used to apply the customization of the Codespaces environment for any user who uses this particular project. More details of customizing the Codespaces can be found here.
{
"name": "Machine Learning in Python",
//"dockerFile": "Dockerfile",
"appPort": [3000],
//"forwardPorts": [8080, 8081], // Set *default* container specific settings.json values
"settings": {
"terminal.integrated.shell.linux": "/bin/bash",
}, // Add the IDs of extensions you want to install
"extensions": [
"ms-python.python",
], // Commands to run after the container is created.
// "postCreateCommand": "python --version", // Uncomment to connect as a non-root user.
//"remoteUser": "vscode",
}
Container Specific Customization
This step is optional. GitHub creates a codespace with a base Linux image if we don’t specify any Dockerfile in “devcontainer.json” file. The base Linux image includes tools for following frameworks or SDK.
If you want to build custom container, click the Add file -> Create new file button in your repository main folder. In the file name box enter “.devcontainer/Dockerfile”. Your custom container can contain anything you want. This is very useful if you are using a framework or SDK that is not present in the standard image, or if you have to install a specific package. What I’d recommend is to use the standard CodeSpaces image as base image and then build on top of that as shown below. If you would like to start with different framework other than standard image, check the pre-built container configuration for Visual Studio Code that is available in the vscode-dev-containers repository.
FROM mcr.microsoft.com/vscode/devcontainers/universal:linux# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
# && apt-get -y install --no-install-recommends <your-package-list-here>
Open Codespaces
We have everything setup and ready to start Codespaces. From your repository main page, click the green “Code” button, “Open with Codespaces” and “New codespace”. It will take few seconds and you will see your Codespace in the browser.
Setup Python Environment
In order to get Python in Linux, I suggest to install Anaconda Individual Edition. Anaconda Individual Edition is a free, easy-to-install package manager, environment manager, and Python distribution with a collection of 1,500+ open source packages with free community support. Anaconda is platform-agnostic, so you can use it whether you are on Windows, macOS, or Linux.
To install Anaconda, open a new terminal (Ctrl+Shift+`) in your Codespace browser window and enter below commands. Detailed instructions can be found here.
# Download Anaconda script
wget https://repo.anaconda.com/archive/Anaconda3-2020.07-Linux-x86_64.sh# Verify the downloaded file
sha256sum https://repo.anaconda.com/archive/Anaconda3-2020.07-Linux-x86_64.sh# Install
bash https://repo.anaconda.com/archive/Anaconda3-2020.07-Linux-x86_64.sh# Follow the instructions such as Accept License, Select Path, yes to initialize condasource ~/.bashrc# Verify Installation
conda list
Instead of selecting standard Linux image and installing Anaconda, you can also using the Anaconda Python container for Visual Studio Code.
Access the Codespaces using SSH
To enable the SSH, first we need to update the password for the codespace user. After connecting to the Codespaces, use the terminal in VS Code to set a password.
# Change current user password
sudo passwd $(whoami)Next, press F1 and select Forward a Port… and enter port 2222. Use the below command in local terminal to connect to the Codespaces using SSH. If you are not using the codespace user, change the command accordingly.
# SSH using port 2222
ssh -p 2222 -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null codespace@localhostInstall VNC Server
We can use Codespace environment for developing console & web applications. We can use the port forwarding feature in Codespaces to open the web application in our local computer to see and test the application. If you want to use this environment for desktop applications which require GUI, we can install VNC server and open in any vnc viewer to debug/test. You can follow my another article for detailed instructions. Now you can use the SSH tunnel to open the VNC server using local VNC client.
If you want to use it in a browser, we will install noVNC to access this VNC server in any browser instead of VNC client. You can enter the below commands to install noVNC.
# Install noVNC
sudo git clone https://github.com/novnc/noVNC.git /opt/novnc# Install Websockify
sudo git clone https://github.com/novnc/websockify /opt/novnc/utils/websockify# Create default page for noVNC
echo "<html><head><meta http-equiv=\"Refresh\" content=\"0; url=vnc.html?autoconnect=true&reconnect=true&reconnect_delay=1000&resize=scale&quality=9\"></head></html>" > index.html# Move the default page to correct location
sudo mv index.html /opt/novnc/index.html
Add the below command to create an alias to start the VNC server and start VNC Server. Codespaces will automatically forward the 5901, 6080 ports.
# Add Start VNC Shortcut
echo "alias svnc='vncserver -kill :1 && vncserver -geometry 1920x1080 && /opt/novnc/utils/launch.sh --web /opt/novnc --vnc localhost:5901 --listen 6080 >/dev/null 2>&1 &'" >> ~/.bashrc# Reload Terminal or Source
source ~/.bashrc# Run VNC Server
svnc
If the ports are not forwarded for some reason, you can forward them by clicking the Forward a Port button in Ports tab. Open the link next to 6080 port to see the VNC session.
This completes our Python Development Environment setup in GitHub Codespaces.
Conclusion
GitHub Codespaces is a great cloud-based environment for developers, we can quickly open the project code in a predefined environment, build and test it. With GitHub Codespaces when it launches, the difficulties of creating and maintaining development environment for software development are further reduced.
