Demo丨GitHub Codespaces, develop complete projects on the cloud

GitHub is the world's most popular developer platform. Since Microsoft acquired GitHub, GitHub's functions have become more and more powerful. In addition to the original code management, a lot of hard goods have also been added, including integrated CI. /CD's GitHub Actions, as well as complete project management functions, and a cloud-based development environment, GitHub CodeSpace. GitHub Codespaces is not just a simple editor for changing code, it also includes a complete development environment that allows you to develop complete projects on the cloud.

What are GitHub Codespaces

GitHub Codespaces is a development environment in the cloud that allows developers to debug, maintain, change, and deploy code on GitHub directly from the browser or from the local Visual Studio Code IDE. At this stage, GitHub Codespaces is only available for Team and Enterprise editions.

The picture above is the official description of the GitHub Codespaces implementation. You can think of GitHub as a traditional C/S architecture. Use virtualization technology (container/virtual machine) in the backend to set up your code, development environment and related dependencies, etc. In the frontend part, you can access and use it through the locally installed Visual Studio Code or browser.

GitHub Codespaces have several advantages:

1. High performance – developers can use a better performing virtual development environment, increasing developer productivity
2. High security - only authorized users can access GitHub Codespaces
3. Easy to manage – developers can easily manage dependencies and extensions on a per-project basis
4. Consistency - for team development, through GitHub Codespaces developers have a unified development environment, which can easily manage dependencies and extensions on projects
5. Cross-device - Browser-based coding experience means development can be done on any device, such as: mobile phone, iPad, tablet, etc., increasing development productivity

Develop an Azure Functions project through iPad

1. First open my iPad Safari browser, visit one of my GitHub Repository, select the Code button, then select the Codespaces tab and click New Codespaces, you can start a Codespaces environment based on the Repo

2. After the selection is successful, you will be asked to select the desired virtual development environment configuration (you can set it according to your needs), here I choose a virtual environment with 4-core CPU, 8G memory, and 32GB storage

After selecting, you need to wait for a while, this will help you open a virtual environment in the cloud

After the configuration is successful, you can start the Visual Studio Code environment in the cloud in the browser

3. Press Cmd + Shift + P to select the development environment ( Codespaces: Configure Container Features... ), you can choose your application scenario and development language

If you are the first time will let you add related files

List Select Show All Definitions (Show All Definitions...)

Select Azure Functions & Python 3

After the creation is successful, you will see that the Repo will add a .devcontainer folder, add devcontainer.json and Dockerfile

Select the bottom right corner Rebuild / Cmd + Shift + P and select Codespaces: Rebuild Container to configure your Azure Functions development environment

Here I want to talk about two files under .devcontainer

devcontainer.json

devcontainer.json is the development environment configuration set under Codespace. In addition to the corresponding Dockefile, it also includes the ports, settings, and the corresponding Visual Studio Code plug-in installation required for development. Like I have developed Docker ports here, and plugins such as Python/Docker/Azure Functions. This configuration environment is very useful for multi-person development projects, because new developers no longer need to care about how to configure the development environment, saving configuration time

For example, if I want to install the Thunder Client plugin to the development team, I can add "rangav.vscode-thunderclient" to the extensions field

 
"extensions": [
"ms-azuretools.vscode-azurefunctions",
"ms-azuretools.vscode-docker",
"ms-python.python",
"rangav.vscode-thunder-client"
]

Then select Rebuild container to install Thunder Client components for future developers

Dockerfile

Dockerfile is the corresponding development environment setting. Of course, you can also create your own development environment container according to your own development needs.

4. At this point, you can choose the Azure environment to create an Azure Functions application (I will not introduce this step, it is the same as creating it locally)

5. Let's talk about debugging, you can directly debug, just like a local application, which is very convenient

After debugging successfully, you can sync the code to your GitHub

Of course, you can also perform CI/CD operations on Repo directly through GitHub Actions, so I won't go into details here.

Summarize

GitHub Codespaces is seamlessly connected to GitHub. The cloud not only manages your code, but also serves as a development environment. You can complete the entire R&D cycle directly through any browser, reducing the dependence on local hardware. It also enables individuals and teams that rely on GitHub to provide better productivity. Hurry up, my friends.

related resources

1. Click to learn more about GitHub Codespaces

2. Click to understand the development of Azure Functions

Click to learn about developing Azure Functions with Visual Studio