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

This article is transcoded by SimpRead, original 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 is done on Microsoft's free servers. Are you excited? 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 log of the SpringBoot application startup visible in the lower right corner.
You might think that the tablet's configuration is not high, so writing code and running it would be laggy. However, my personal experience is that it can run smoothly because the resource-intensive operations like compiling and running are done on Microsoft's cloud servers, which are configured with 4 cores, 8GB of RAM, and 32GB of disk space.
Additionally, the server costs nothing 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 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 is my understanding of 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 RAM, 32GB disk), and the corresponding compilation and running of the code occur on this server when editing code on the web.

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 following image shows how to write a SpringBoot application on a Huawei MatePad Pro tablet, and the log indicates that it has started successfully.

The following image shows accessing the SpringBoot application's web service using a tablet browser, which is successful and very practical.

You can use a low-end, outdated computer for development because resource-intensive operations are performed 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 and running and validating it.
Commit the 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 performing 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 a Java-related tech stack in the development experience, for example, the code project is SpringBoot. If you are proficient in another language, please adjust accordingly.

From disappointment to surprise#

Xinchen filled out an online application form last year to apply for using Codespaces, but unfortunately, for several months, every time he checked, it asked him to be patient, 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, he noticed that the upper right corner of the webpage looked a bit different, as shown in the red box 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 redirected him to this address: https://github.com/codespaces.
The page displays as shown 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 that the last option is to choose your dedicated server configuration, which currently only has one option: 4 cores and 8GB.
Is a 4-core, 8GB server valuable? Referring to the price of the ECS server provided for free by Alibaba Cloud Community, 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 about two to three minutes, you will see the vscode page, which is clearly a web page but is highly similar to the locally installed vscode.
Note the pop-up prompt in the lower right corner of the image, 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 below.
After installation, let's enter the development phase.

Check versions#

In the TERMINAL window, enter mvn -version to check the current Maven and Java versions, as shown 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 GitHub's default configuration when creating 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 manage to run 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 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: I will write 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, selecting libraries (I chose lombok and spring web), and note that JDK 17 is selected because 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 added a web path hello using RestController. After coding, click the triangle button in the upper right corner to start the application.
The build process begins, during which dependencies will be downloaded, so please wait a moment. However, the performance and speed of Microsoft's servers did not disappoint us. About two to three minutes later, the application started successfully.
Now the application is running on the server. To verify whether the web service is available, we also 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 to open the forwarding address in the browser.
At this point, the browser will prompt a 404 error, as shown below. This is because we haven't added the path yet.
Append /hello to the end of the address bar and press Enter. As shown 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.

Commit code#

The newly added branch is still on Microsoft's server and has not been committed to GitHub. Remember to commit it, as shown in the image below.
Open GitHub and find that the new branch has been submitted, and a PR has 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 feels great that there seems to be nothing on the local computer, all clean.

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 will restore it.

How many Codespaces can be created?#

Regarding this question, the official statement is: at least 2 core computers can be configured, and a maximum of 32 can be configured.
The official did not mention anything about free or 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 find it inconvenient to use a tablet, computers also have browsers. If you argue that the browser on the computer is not as good as the desktop version, then isn't there no need for WeChat mini-programs to exist, since there are native apps?
Therefore, whether it is practical should be subjective… right?