Github Codespaces: A different way to code

Originally written at pooyan.info

Who is the author? Check out my profile on LinkedIn.

Before we start, I have provided a repository that contains some example config files based on my personal preferences. If that is the only thing you are looking for, you can skip right to the conclusion section and check that out!

GitHub Codespaces is an online development environment that allows developers to write, review, and debug code without needing to set up a local development environment. It provides a fully configured cloud-hosted development environment that can be accessed from any device with an internet connection.

Codespaces was introduced by GitHub in 2020 as an extension of their popular code-sharing and version control platform. It was created to simplify the development process, especially for those who are new to programming or for those who don't have the resources to set up a development environment on their local machine.

How to use Github Codespaces?

Using Github Codespaces is relatively straightforward. Here are the steps to follow:

1. Sign up for a Github account: If you don't already have a Github account, you'll need to sign up for one. Github is a code-sharing and version control platform that Codespaces is built on.
2. Create a repository: Once you have a Github account, you'll need to create a repository for your project. If you already have a repository, you can skip this step.
3. Enable Codespaces: After you've created a repository, you'll need to enable Codespaces. To do this, go to the "Settings" tab in your repository, and then click on "Codespaces" on the left-hand menu. Click the "Enable Codespaces" button to activate it.
4. Create a Codespace: Once Codespaces is enabled, you can create a new Codespace by clicking on the "New Codespace" button in the "Codespaces" tab of your repository. You can select the type of environment you want to create, including the operating system, programming language, and tools you want to use.
5. Customize your Codespace: Once your Codespace is created, you can customize it by installing any additional tools, libraries, or extensions you need. You can also configure your workspace settings, such as your font size, theme, and other preferences.
6. Start coding: Once your Codespace is set up, you can start coding. You can open files, edit code, and test your applications just as you would with a local development environment.
7. Collaborate with others: Github Codespaces allows you to collaborate with others in real time. You can invite other developers to your Codespace, share your screen, and work on code together.
8. Save your work: As you work on your project, your changes are automatically saved to your Github repository. You can commit and push your changes just as you would with a local development environment.

Github Codespaces is a powerful tool that can simplify the development process and improve collaboration among developers. By following these simple steps, you can start using Codespaces to create a cloud-hosted development environment for your projects.

devcontainers.json file

The devcontainer.json file is a configuration file used by the Visual Studio Code Remote - Containers extension to define the development environment for a project. This file specifies the Docker image to be used as the development environment and any necessary extensions, settings, and dependencies.

The devcontainer.json file was first introduced in November 2018 as part of the Visual Studio Code Remote Development extension pack, which enables developers to use containers, SSH, or Windows Subsystem for Linux (WSL) as a development environment. The goal of this extension was to make it easier for developers to set up and manage their development environments by leveraging containerization technology.

Initially, the configuration options were limited to specifying the Docker image to be used for the development environment, along with some basic settings such as the workspace folder and user account information. However, over time, the capabilities of the devcontainer.json file have been expanded to include support for Docker Compose, port forwarding, environment variables, and more.

Today, the devcontainer.json file has become a standard way of defining development environments for Visual Studio Code projects and is widely used by developers and organizations around the world. It provides a flexible and portable way to define and share development environments across different platforms and team members, making it easier to set up and maintain consistent development environments for your projects.

You can find the schema definition of the devcontainer.json file in the Visual Studio Code documentation or in this repository. In addition, this tutorial can also help.

How to customize dev containers?

Customizing dev containers in Github Codespaces can help you tailor your development environment to your specific needs. Here are some examples of how to customize dev containers in Github Codespaces:

Add or remove software packages:

You can customize the list of software packages installed in your dev container. For example, if you're working on a Node.js project, you may want to install additional packages such as npm or yarn. You can either do this by adding the following command to the Dockerfile:

# Probably not the best way RUN apt-get update && \ apt-get install -y npm yarn

Alternatively, you can add this line to your devcontainer.json file:

"features": { "ghcr.io/akhildevelops/devcontainer-features/apt:0": { "packages": "yarn,npm" } }

Add or remove npm packages:

You can add npm packages to your dev container by using the npm-packages feature and adding the following line to your devcontainer.json file:

How to speed up the boot time?

Speeding up the boot time of Github Codespaces can help you get started with your development work faster. Here are some tips on how to speed up the boot time:

1. Use a smaller dev container: Using a smaller dev container can help reduce the boot time. You can remove unnecessary packages and libraries that are not required for your project. This can be done by editing the Dockerfile in your dev container.
2. Use caching: Caching can help reduce the time it takes to build your dev container. You can use the Docker layer caching mechanism to cache the results of frequently executed commands. This can be done by adding the appropriate commands to the Dockerfile.
3. Use the pre-built image: If you're working with a popular programming language or framework, there may be pre-built images available that you can use. This can help reduce the boot time since the image is already built and cached.
4. Optimize your workspace: You can optimize your workspace settings to improve the boot time. For example, you can disable unnecessary extensions or reduce the number of open files in your workspace.
5. Use the "Resume" feature: Github Codespaces has a "Resume" feature that allows you to resume your last session. This can help reduce the boot time since you don't need to set up your development environment from scratch every time.

Limitations

While Github Codespaces offers several benefits, there are also some limitations to consider:

1. Limited customization: While Github Codespaces provides a lot of preconfigured development environments, there is limited customization available. This may not be an issue for most developers, but it can be a problem for those who require specific tools or configurations.
2. Performance: Github Codespaces runs on shared hardware, which means that performance can be an issue, especially for resource-intensive applications. However, the performance is generally good, and it may not be a significant issue for most use cases.
3. Limited offline access: Github Codespaces is a cloud-based service, which means that you need an internet connection to access your development environment. This may not be a problem for most developers, but it can be an issue if you are working in a location with limited internet connectivity.
4. Limited storage: Github Codespaces provides limited storage space for each user, which means that you may need to manage your storage carefully to avoid running out of space.

Can I use it with JetBrains IDEs or JupyterLab?

Github Codespaces can be used with JetBrains IDEs like IntelliJ IDEA, PyCharm, and WebStorm. You can set up JetBrains Gateway to connect to your Codespace and use it as a remote development environment. You can also use it with JupyterLab. You can read more about this here.

Conclusion

Github Codespaces is a powerful tool that can help you create a cloud-hosted development environment for your projects. By following these tips, you can get started with Github Codespaces and start using it to create a development environment for your projects.

In addition to the examples provided in the official documentation, you can check out some example configurations that I have created based on my personal preferences in this repository.

---

If you liked the article and want to keep me motivated to provide more content, you can share this article with your friends and colleagues and follow me here on Medium or LinkedIn.

Copyright & Disclaimer

• All content provided on this blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site.
• All the content is copyrighted and may not be reproduced on other websites, blogs, or social media. You are not allowed to reproduce, summarize to create derivative work, or use any content from this website under your name. This includes creating a similar article or summary based on AI/GenAI. For educational purposes, you may refer to parts of the content, and only refer, but you must provide a link back to the original article on this website. This is allowed only if your content is less than 10% similar to the original article.
• While every care has been taken to ensure the accuracy of the content of this website, I make no representation as to the accuracy, correctness, or fitness for any purpose of the site content, nor do I accept any liability for loss or damage (including consequential loss or damage), however, caused, which may be incurred by any person or organization from reliance on or use of information on this site.
• The contents of this article should not be construed as legal advice.
• Opinions are my own and not the views of my employer.
• English is not my mother-tongue language, so even though I try my best to express myself correctly, there might be a chance of miscommunication.
• Links or references to other websites, including the use of information from 3rd-parties, are provided for the benefit of people who use this website. I am not responsible for the accuracy of the content on the websites that I have put a link to and I do not endorse any of those organizations or their contents.
• If you have any queries or if you believe any information on this article is inaccurate, or if you think any of the assets used in this article are in violation of copyright, please contact me and let me know.

Comments

[Ankit Yadav]

🚀 Freelancers required for Exciting Projects on MyExpertify! 🚀

at myexpertify.com/project

Are you a skilled PHP, Laravel, MySQL, JavaScript, or API developer looking for new freelance opportunities? MyExpertify is connecting top developers with high-quality projects. Check out the latest projects you can work on:

🔹 Coaching Institute Management System – Manage courses, enrollments, schedules & online payments. (Skills: PHP, Laravel, MySQL, Stripe API, HTML, CSS)

🔹 AI Chatbot for Student Queries – Automate student support with a chatbot. (Skills: PHP, MySQL, Dialogflow, JavaScript, Bootstrap)

🔹 Multi-User Admin Panel – Role-based admin panel for efficient management. (Skills: PHP, Laravel, MySQL, Bootstrap, Vue.js)

🔹 Student Attendance System with QR Code – QR-based attendance marking system. (Skills: PHP, MySQL, QR Code API, JavaScript, Bootstrap)

🔹 Online Exam & Assessment System – Conduct exams & generate reports online. (Skills: PHP, MySQL, Bootstrap, JavaScript, AJAX)

🔹 Library Management System – Track books, requests & fine collections. (Skills: PHP, MySQL, Bootstrap, JavaScript, jQuery)

🔹 Live Class Scheduling & Management – Manage & schedule live classes with video integration. (Skills: PHP, MySQL, Zoom API, WebRTC, Laravel)

🔹 School & Coaching Fee Management System – Track payments, invoices & reminders. (Skills: PHP, MySQL, Stripe API, Twilio API, Laravel)

Freelance #RemoteWork #PHPDevelopers #Laravel #MySQL #WebDevelopment #Hiring #Freelancers