{"id":241511,"date":"2025-05-14T14:05:40","date_gmt":"2025-05-14T14:05:40","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/github-codespaces-explained\/"},"modified":"2025-05-14T14:05:40","modified_gmt":"2025-05-14T14:05:40","slug":"github-codespaces-explained","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=241511","title":{"rendered":"GitHub Codespaces Explained"},"content":{"rendered":"


\n<\/p>\n

\n

The pace at which apps are being built today demands speed, collaboration, and flexibility in software development. GitHub Codespaces enables this by solving an age-old problem of setting up your environment. Instead of spending hours searching for tools and dependencies, you can directly launch a full dev setup in the cloud in just a few clicks. Since it works right with GitHub repositories<\/a>, Codespaces makes it easier to get started and get going. It also supports remote work and maintains consistency across different setups, making it a powerful tool for individuals, teams, and open-source contributors. In this article, we will learn all about GitHub Codespaces, including its features, applications, pricing, and how to use it for free.<\/span><\/p>\n

What are GitHub Codespaces?<\/span><\/h2>\n

GitHub Codespaces is a cloud-based development environment that runs inside Docker containers on virtual machines. This allows you to write code directly on your browser or through Visual Studio Code<\/a>, without the need to install anything locally. Each codespace runs on a Linux environment and can be set up using configuration files defined in your repository. This practice is known as Configuration-as-Code.<\/span><\/p>\n

\"configuration<\/figure>\n

On GitHub Codespaces, you can start a codespace from a template or any branch of a repository, making it easy to keep work organised and consistent. It lets you customise tools and runtimes using dev containers, and set personal preferences using Dotfiles. Setting Sync can further make the experience just like your local VS Code. Moreover, it makes your dev setup easy and repeatable, helping you start coding fast and from anywhere.<\/span><\/p>\n

Also Read: Introduction for Git and Github for Beginners<\/a><\/em><\/p>\n

Features of GitHub Codespaces<\/span><\/h2>\n

Here are some of the key features offered by GitHub Codespaces:<\/span><\/p>\n

\"Features<\/figure>\n
    \n
  1. Preconfigured Development Environments: <\/b>GitHub Codespaces provides a ready-to-use, consistent development environment customised to each repository. It eliminates setup issues and ensures uniformity across contributors without affecting local machines.<\/li>\n
  2. Access the Resources You Need: <\/b>It lets you work on cloud-based machines with sufficient resources, taking the computational load off of your local machine. This enables you to handle large, resource-heavy projects without hardware limitations.<\/span><\/li>\n
  3. Work Anywhere: <\/b>With GitHub Codespaces, you are not limited to just one device. Since it works on a web browser, you can access your codespace from any device, anywhere.<\/span><\/li>\n
  4. Choose Your Editor: <\/b>This platform supports multiple editors, giving you the option to choose what works for you. You can use VS Code web client, JupyterLab, or connect via the desktop version of Visual Studio Code.<\/span><\/li>\n
  5. Work on Multiple Projects: <\/b>You can create and manage multiple codespaces for different projects, or even for different branches of the same project. This helps in keeping the work isolated and organised, reducing the risk of unintended changes that can affect other work.<\/span><\/li>\n
  6. Pair Program with a Teammate: <\/b>With Visual Studio Code\u2019s Live Share extension, you can collaborate in real-time with team members inside a codespace. And this feature is ideal for pair programming, debugging sessions, and mentoring.<\/span><\/li>\n
  7. Publish Your Web App from a Codespace: <\/b>Codespaces let you forward the ports and share URLS. This means that you can create a demo application directly from the cloud, and your teammates can access and test the changes before finalising them in a pull request.<\/span><\/li>\n<\/ol>\n

    Understanding the Codespace Lifecycle<\/span><\/h2>\n

    Understanding the lifecycle of Codespaces on GitHub is essential to be able to manage your work from creation to deletion. The lifecycle starts when you <\/span>create a codespace<\/span><\/a> and ends when you delete it. During its lifetime, you can disconnect or reconnect anytime without losing your running processes. To make it clearer, stopping and restarting a codespace won\u2019t remove your saved changes.<\/span><\/p>\n

    1. Creating a Codespace<\/h4>\n

    On GitHub, you can choose to start a fresh codespace or open an existing one. Some developers prefer creating a new one for every session, while others keep a long-running codespace for continuous work. <\/span>The platform also gives you the option to<\/span> create a codespace from a template<\/span><\/a>.<\/span><\/p>\n

    However, there are limits to how many codespaces you can create or run at once. If you hit the limit, you\u2019ll need to delete or stop an existing one to make space to start a new codespace. If you\u2019re using new codespaces often, I advise you to push your commits to GitHub frequently, to ensure there\u2019s always room for new codespaces. And for long-running ones, always pull the latest code before you begin working.<\/span><\/p>\n

    2. Saving Changes in a Codespace<\/span><\/span><\/h4>\n

    The web-based version of GitHub Codespaces has auto-save on by default, so saving your changes is never a problem. But if you\u2019re using it on VS Code on your desktop, you\u2019ll need to manually enable auto-save. All the work is saved on a cloud VM, which lets you stop at any point and return to it later. The platform even prompts you to save any unsaved changes before exiting. But if you delete the codespace, all the work done in it is lost unless committed and pushed.<\/span><\/p>\n

    Inactive codespaces timeout after 30 minutes by default. You can change this setting from the settings panel. But there\u2019s nothing to worry about a timeout, since the data saved until then remains intact.<\/span><\/p>\n

    3. Rebuilding a Codespace<\/span><\/h4>\n

    If you update your dev container configuration, you can <\/span>rebuild the codespace<\/span><\/a>. By default, GitHub uses cached images to rebuild the codespace. However, if you want to start from a clean environment, you can choose to do a full rebuild instead. Keep in mind that only files inside the \/workspace folder are saved; everything else will be reset during the rebuild. You can also choose to do a full rebuild to start fresh.\u00a0<\/span><\/p>\n

    4. Stopping a Codespace<\/span><\/h4>\n

    You can<\/span> stop a codespace<\/span><\/a> at any time. When you stop it, all processes stop, but your saved work stays. Terminal history also stays. Just closing the browser tab doesn\u2019t stop it. It still runs in the cloud, and you\u2019ll be charged while it\u2019s running. And to stop the codespace, you can follow the steps below:<\/span><\/p>\n

      \n
    1. Go to <\/span>Your Codespaces<\/span><\/a>.<\/li>\n
    2. Click o<\/span>n the three dots <\/span>on the right end.<\/li>\n
    3. Choose \u201cStop codespace\u201d<\/span>.<\/li>\n<\/ol>\n
      \"Stopping<\/figure>\n

      5. Deleting a Codespace<\/span><\/h4>\n

      After pushing your changes, you can safely delete the codespace.<\/span> Deleting a codespace<\/span><\/a> is pretty simple once you\u2019re done working; just make sure you pushed your changes on GitHub first so you don\u2019t lose anything. If there are any uncommitted changes, GitHub will ask you to either push or export them before deleting. Also, stopped codespaces get deleted automatically after 30 days by default. But just keep in mind, even after deletion, a codespace might still count toward billing until the cycle ends.<\/span><\/p>\n

      6. Losing Connection While Using GitHub Codespaces<\/span><\/h4>\n

      GitHub Codespaces needs an internet connection to run. So, if you lose access to the internet, you cannot use the codespace. But luckily, the unsaved changes would still be there. So, once you\u2019re reconnected, you can resume from the same state. If you have an unsteady connection or plan to work offline often, I advise you to use a local container with the Dev Containers extension and your devcontainer.json.<\/span><\/p>\n

      Getting Started with GitHub Codespaces<\/span><\/h2>\n

      Now let\u2019s see how we can work with GitHub Codespaces. Instead of starting from scratch, let\u2019s just create a codespace from a template repository. In this walkthrough, we\u2019ll be using the browser-based version of VS Code, which is the default editor for Codespaces. If you want, you can switch later to another editor and change the default settings if needed.<\/span><\/p>\n

      Step 1: Create a Codespace<\/span><\/h3>\n

      So in this step we will create a new codespace using ready-made GitHub template. This will help us quickly start or create a development environment without setting up anything on the local machine.<\/span><\/p>\n

        \n
      1. Start by opening the <\/span>github\/haikus-for-codespaces<\/b><\/a> template repository.<\/span><\/li>\n
      2. Click on \u201cUse this template.\u201d<\/span><\/li>\n
      3. After that, select \u201cOpen in a codespace\u201d as shown in the image below.<\/span><\/li>\n<\/ol>\n
        \"Creating<\/figure>\n

        This clones the template into your new codespace automatically.<\/span><\/p>\n

        Step 2: Run the Application<\/span><\/h3>\n

        In this step, we\u2019ll run the application to see how it works. This lets us test the changes live right from within the platform<\/span>.<\/p>\n

        From the image below, you can see that the terminal is ready. Now let\u2019s run the application.<\/span><\/p>\n

        \"Hiakus<\/figure>\n
          \n
        1. The next step is to enter the command <\/span>npm run dev. This runs the Node.js app using the dev script from package.json.<\/span><\/li>\n<\/ol>\n
          \"running<\/figure>\n
            \n
          1. A pop-up will appear when the app is running. Click on \u201cOpen in Browser\u201d to view it.<\/span><\/li>\n<\/ol>\n
            \"running<\/figure>\n
              \n
            1. When you open it in a browser, this is what you will see.<\/span><\/li>\n<\/ol>\n
              \"Haikus<\/figure>\n

              Step 3: Edit and Preview Changes<\/span><\/h3>\n

              In this step, we will edit the content of the project and see the changes live. This will help us understand how real-time updates work inside a codespace.<\/span><\/p>\n

                \n
              1. Go to Explorer and open the haikus.json file.<\/span><\/li>\n<\/ol>\n
                \"Previewing<\/figure>\n
                \"Making<\/figure>\n
                  \n
                1. Now change the text of the first or all the haiku and refresh your browser tab to view the update.<\/span><\/li>\n<\/ol>\n
                  \"Haikus<\/figure>\n
                    \n
                  1. If your tab was closed by mistake, go to the Ports tab in VS Code and click the browser icon, which is next to the forwarded port.<\/span><\/li>\n<\/ol>\n
                    \"Previewing<\/figure>\n

                    Step 4: Committing and Pushing the Changes<\/span><\/h3>\n

                    Now that we have made a few changes, we can push them onto GitHub. For this:<\/span><\/p>\n

                      \n
                    1. From the activity bar, click on the \u201cSource Control\u201d view.<\/span><\/li>\n<\/ol>\n
                      \"Committing<\/figure>\n
                        \n
                      1. Stage the changed file by clicking on the +, entering a commit message, and then clicking on \u201cCommit\u201d.<\/span><\/li>\n<\/ol>\n
                        \"Committing<\/figure>\n
                          \n
                        1. Now, click on \u201cPublish Branch\u201d.<\/span><\/li>\n<\/ol>\n
                          \"Publishing<\/figure>\n
                            \n
                          1. Sign in to your GitHub account and give your new repository a name. Then, choose to publish it as public or private. You can also use \u201cOpen on GitHub\u201d to view the changes in the new repository.<\/span><\/li>\n<\/ol>\n
                            \"New<\/figure>\n

                            GitHub Codespaces Pricing<\/span><\/h2>\n

                            Now that we\u2019ve learned how to use GitHub Codespaces, let\u2019s find out how much it would cost us to use it. GitHub provides a flexible pricing model based on storage and compute time, as shown below:<\/span><\/p>\n

                            \n\n\n\n\n\n\n
                            Plan<\/strong><\/td>\nIncluded Usage<\/strong><\/td>\n\n

                            Additional Cost<\/strong><\/p>\n<\/td>\n<\/tr>\n

                            \n

                            Free for Individuals<\/strong><\/p>\n<\/td>\n

                            		60 hours\/month(for basic Linux compute)<\/span><\/td>\n$0.18 per additional hour<\/span><\/td>\n<\/tr>\n
                            GitHub Team\/Enterprise<\/strong><\/td>\nVaries by plan<\/span><\/td>\n\n

                            Pay as you go or paid hours<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                            As mentioned in the table, GitHub Codespaces is free for individual users with 60 hours of standard compute time per month and up to 15 GB of storage, which makes it a great choice for hobby projects, learning, or testing workflows without any upfront cost. And even beyond the free tier, GitHub offers usage-based pricing, which ensures that you only pay for what you use.<\/span><\/p>\n

                            When Should You Use GitHub Codespaces?<\/span><\/h2>\n

                            Github Codespaces is ideal for many tasks, such as:<\/span><\/p>\n