Writing code in the browser, 4-core 8G Microsoft server for free, Codespaces is really great.

This article is transcoded by SimpRead, original article address xinchen.blog.csdn.net

Computers and tablets can write code as long as there is a browser, with page effects close to the desktop version of vscode. Compiling and running code all take place on Microsoft's free servers. Interested? Let's take action together with this article.

A picture is worth a thousand words#

First, here is a picture. Below is a real shot of Xinchen writing code in the browser on his iPad Pro, with the successful startup log of the SpringBoot application visible in the lower right corner.
You might think that the tablet's configuration is not high, so writing and running code would be laggy. However, my personal experience is that it can run smoothly because the resource-intensive operations of compiling and running are done on Microsoft's cloud servers, which are configured with 4 cores, 8GB of memory, and 32GB of hard disk.
Additionally, the server doesn't cost a penny and has no time limits…

About Codespaces#

GitHub's Codespaces has been a hot topic online since last year. It is a cloud-hosted development environment. The principle is as follows: we write code on our own computers using the desktop or web version of vscode, and these operations are synchronized to Microsoft's Azure virtual machine, where the code is compiled and run.
Regarding the relationship between GitHub and Microsoft, it should be that Microsoft acquired GitHub…
Below are my personal insights on Codespaces after experiencing it:

You can edit the code in your GitHub repository in the browser, and the web effect is highly similar to local vscode.
Microsoft has prepared a dedicated server for you (4 cores CPU, 8GB memory, 32GB hard disk), and when editing code on the web, the corresponding compilation and running are done on this server.

Based on the above features, the following benefits can be genuinely felt:

You can write and run code in the browser on a tablet. The picture below shows how to write a SpringBoot application on a Huawei MatePad Pro tablet, and the logs indicate that it has started successfully.

The following picture shows accessing the SpringBoot application's web service using the tablet browser, which works successfully, making it very practical.

You can use an old computer with low configuration for development because resource-intensive operations are done on the dedicated server; your own computer only needs to run the browser smoothly.

Overview of this article#

The goal of this article is primarily based on basic experiences and consists of the following content:

Introduce some prerequisites.
Discuss the background of finally being able to use Codespaces.
Create Codespaces.
Basic settings before development.
Check basic server information.
Create a new GitHub repository branch on Codespaces.
Officially start coding by creating a new SpringBoot application, running, and validating it.
Submit code from Codespaces to GitHub.
Stop the application.
How to reopen Codespaces.
Introduce a few minor issues.

Important prerequisites#

The following are important prerequisites for smoothly carrying out the operations in this article:

Your network can access GitHub.
You have your own GitHub account.
You have your own code repository.
Xinchen is an ordinary Java programmer, so he uses Java-related technology stacks in the development experience, such as the code project being SpringBoot. If you are proficient in other languages, please adjust accordingly.

From disappointment to surprise#

Xinchen filled out an online application form last year to apply for using Codespaces, but unfortunately, every time he checked for several months, it kept saying to wait patiently, and he eventually forgot about it completely.
Sorry, he also forgot the application address, but you can check the Codespaces official website to find the application entry.
Time passed like this, and Xinchen continued his monotonous life of eating, sleeping, working, and writing blogs every day, until a few days ago when he received the following email saying he could use the beta version of Codespaces.

Creating a codespace#

When opening GitHub, Xinchen noticed that the upper right corner of the webpage looked a bit different, as shown in the red box in the image below.
It seems to indicate that he has participated in the beta version of Codespaces. Wow, what a surprise!
Clicking the button in the red box above redirects to this address: https://github.com/codespaces.
The page displays as shown in the image below. Click the New codespace button in the upper right corner to create Codespaces.
The next page requires you to select one from your GitHub repositories and branches to create Codespaces. Note the last option, which is to choose your dedicated server configuration. Currently, only one configuration of 4 cores and 8GB is available.
Is a 4-core 8GB server valuable? Referring to the price of the ECS server that Alibaba Cloud Community offers Xinchen for free, 2 cores and 4GB cost 4068 RMB per year. Microsoft's sincerity is truly commendable.
After selecting the repository, click the Create codespace button in the lower right corner, and the backend will start creating your dedicated server (officially referred to as a container).
After waiting for about two to three minutes, you will see the vscode page, which, although it is a web page, is highly similar to the locally installed vscode.
Note the pop-up prompt in the lower right corner of the image above, asking if you want to install the Java plugin package. Please click Install to complete the installation.

Basic settings#

When using vscode, installing the Java all-in-one plugin and the SpringBoot plugin is a basic operation.
As shown in the image below, the Java all-in-one plugin has just been installed.
Next is the SpringBoot plugin, as shown in the image below.
After installation is complete, let's enter the development phase.

Check version#

In the TERMINAL window, enter mvn -version to check the current Maven and Java versions, as shown in the image below. This is a Linux server, with Java version 17.0.2 and Maven version 3.8.5.
This Java and Maven version configuration comes from the default configuration when GitHub creates the server for you. It is likely not the version you consider most suitable. In fact, GitHub supports modifying server configurations, but due to space limitations, I kindly ask you to bear with it for now and make do with running HelloWorld. There will be a dedicated article explaining how to modify the default configuration, including Java and Maven versions, as well as more in-depth configurations.

Create a new branch#

The code repository selected earlier has the dev branch that I need for other purposes, so I plan to create a new branch. The operation is as follows:
Click the git branch icon at the bottom left, as shown in the red box in the image below.
In the pop-up input window, I clicked Create new branch…
Then, delete all the contents in the current directory.
A clean coding environment is ready, and now I will showcase my skills: writing a HelloWorld application for you!

Develop and run the SpringBoot application#

Create a new SpringBoot project.
Depending on personal preference, I chose a Maven project.
Next is the usual series of question-and-answer interactions for creating a SpringBoot project, entering GAV, and selecting libraries (I chose lombok and spring web). Note to select JDK 17, as the current online environment's JDK is 17. As for how to modify the current environment's JDK, there will be a detailed explanation in the next article.
After entering the above commands, a new page will pop up, entering a new workspace, as shown in the image below, the familiar Maven operation page.
If you want to switch back to the previous workspace, you can operate as shown in the image below.
Open the application entry class HelloworldApplication.java, add a few lines of code for verification. Here, I used RestController to add a web path hello. After coding is complete, click the triangle button in the upper right corner to start the application.
The project starts building, during which dependencies will be downloaded, so please wait a moment. However, the performance and speed of Microsoft's server did not disappoint us. After about two to three minutes, the application started successfully.
Now the application is running on the server. To verify whether the web service is available, we need to use the port forwarding feature, which maps a certain port on the server to a local port. The operation is shown in the red box below.
In the prompt box that appears, enter 8080 and press Enter. At this moment, a new port forwarding configuration will appear in the list. Click the position shown in the red box below, and the forwarding address will open in the browser.
At this point, the browser will prompt 404, as shown in the image below. This is because we haven't added the path yet.
In the address bar, append /hello at the end and press Enter. As shown in the image below, the web interface we just wrote returns data normally.
Now you can happily write code in the browser and run it smoothly. The experience of using a broken computer without lag is truly indescribable.

Submit code#

The newly added branch is still on Microsoft's server and has not been submitted to GitHub. Remember to submit it, as shown in the image below.
Open GitHub and find that the new branch has been submitted, and a PR has also been created. You can choose whether to merge it into the main branch.

Stop the application#

Stopping the application is very simple. Just enter Ctrl+C in the terminal panel.
Close the browser, and it seems like nothing is left on the local computer, which feels really good.

Reopen Codespaces#

The operation to reopen Codespaces is shown in the image below, completed in four steps.

Occasional issues#

Occasionally, when opening Codespaces, you may encounter the issue shown in the image below. Refreshing the page can restore it.

How many Codespaces can be created?#

Regarding this question, the official statement is: at least 2 core computers can be configured, and up to 32 can be configured.
The official did not mention anything about free and paid services. As a free user, it is not a problem to create two Codespaces simultaneously.

Is it practical?#

Yesterday, Xinchen posted the photo of writing code on the iPad Pro in a community, and soon someone replied, "Are you pulling your pants down to fart?"
Regarding this viewpoint, I think: If you feel that using a tablet is not convenient, computers also have browsers. If you argue that the browser on the computer is not as good as the desktop version, then is there really no need for WeChat mini-programs to exist, since there are native apps?
Therefore, whether it is practical should be subjective… right?