Create and Configure a GitHub Codespace

GitHub Codespaces provides a powerful, cloud-based development environment that we can start and stop in seconds, tailored specifically to our project’s needs.

In this tutorial, let's go through the process of set up and configure a GitHub Codespace using an existing repository.

Let's dive in and see how you can get started with GitHub Codespaces today!

🚀 Table of Contents

• Before You Start - Mind the Costs
• Create a GitHub Codespace
• Select a Pre-Build Configuration
• Save and Push Changes
• Stop Current Codespace
• The Codespace Dashboard

⌚ Before You Start - Mind the Costs

GitHub Codespaces offers a powerful cloud-based development environment with a free usage cota but it's NOT free. Understanding the pricing structure can help you manage costs effectively.

GitHub Codespaces is paid for either by an organization, an enterprise, or a personal account. The Free and Pro plans for personal accounts include free use of GitHub Codespaces up to a fixed amount of usage every month.

Read more: https://docs.github.com/en/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces

Free of charge today - 08/17/2024

🔨 Step by Step Guide

Let's dive into the step by step guide on Code Spaces.

Step 1: Create a GitHub Codespace

To create the Codespace click on the Code button, then Codespaces, and then select Create codespace on main.

If you have multiple branches, you can choose a specific branch for the Codespace.

A dialog may appear allowing you to choose the machine type (e.g., 2-core, 4-core). Select the appropriate machine based on your development needs.

Once initialized, you’ll see a Visual Studio Code interface within your browser.

Step 2: Select a Pre-Build Configuration

On the Visual Code search bar start typing > Codespaces to see all the available options.

Select "Codespaces: Add Dev Container Configuration File..." to start from scratch. Next select "Create a new configuration" to start from scratch .

Select "C# (.NET) devcontainers" or the best framework for your project.

Moving forward we can include additional features to install, such as ".NET Aspire".

Once completed all the selections click on Rebuild Now to start building the Codespace.

The devcontainer.json file should be created. It contains all configuration for the recently created Codespace.

You can commit and push the devcontainer.json file to the repository for later use.

In the devcontainer.json file you can add more features, change ports, remote user, among other features. D on't forget to "Rebuild" if changes are made.

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
{
    "name": "C# (.NET)",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/dotnet:1-8.0-bookworm"

    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [5000, 5001],
    // "portsAttributes": {
    // "5001": {
    // "protocol": "https"
    // }
    // }

    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "dotnet restore",

    // Configure tool-specific properties.
    // "customizations": {},

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

Step 3: Save and Push Changes

As we make changes in our source code, they will be contained only within the Codespace. Use the Git panel in Visual Studio Code to commit your changes.

Step 4: Stop Current Codespace

When finished let's STOP the Codespace to avoid incurring unnecessary charges.

When no longer need, we can delete it to free up resources.

Simply navigate to the GitHub Codespaces dashboard, find your Codespace, and select Delete.

The Codespace Dashboard

Remember to check the Codespace Dashboard to make sure nothing is running without your knowledge.

Conclusion

The GitHub Codespaces can greatly enhance our development workflow, offering a consistent and accessible environment wherever we work.

Happy coding! 😎