An Angular developer's experience report after using Tencent Cloud Studio

The author is an Angular development engineer. I have tried a famous foreign online editor, StackBlitz. This editor is powerful, but because the server is abroad, when I usually visit, due to the network, I am editing the code. When running a compiled Angular application locally, I often experience delays that affect the user experience.

The following figure is the home interface of the StackBlitz online editor:

After I heard that Tencent launched its own Cloud Studio, I was very excited and tried it out in the browser for the first time.

Create your first Angular app with Cloud Studio

Visit the official website of Cloud Studio and find that you can log in directly using WeChat and Github, which saves even the process of account registration, which is very convenient.

After I successfully log in using WeChat, create a new workspace (Workspace):

In the list of work controls, in addition to the Angular project template that I care about most, there are many other project project templates such as React, Vue, Hexo, etc.

After selecting the Angular project template, Cloud Studio automatically generates a Template for the Angular application. Let's take a look at the package.json, which contains all the dependencies of the Angular application:

The Angular version is ~12.1.0 , which is relatively new.

Command line related to compiling and running Angular applications in Cloud Studio

We can see that Cloud Studio automatically runs the following command line in the Terminal window:

set port=4200 && export PORT=4200 && yarn && yarn start --port=4200

It took just over 6 seconds to compile the application. But the Console output in the figure below has two fly in the ointment:

(1) Build At The time zone of the timestamp shows the time zone on the server side. Personally, I think it is more user-friendly according to the time zone setting of the user in the browser. For example, in the following figure, I expect the timestamp to show my local time 18:02:51 instead of 10:02:51 on the server side.

(2) The printed log Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 will mislead the user, because in fact we can't open the way we run in Cloud Studio by directly accessing http://localhost:4200/ in the browser Angular application.

The correct url should be this auto-generated url: https://dzdkkc-wbsddy-4200.preview.myide.io/

Here I did more tests in Terminal, such as executing the command line directly ng serve :

It is found that although the entire application can still be successfully compiled, when the browser accesses the url https://dzdkkc-wbsddy-4200.preview.myide.io , it encounters an error message: Invalid Host header , so I don't know how to continue, so I have to continue to use the lengthy command line set port=4200 && export PORT=4200 && yarn && yarn start --port=4200 to start the application.

The entire Cloud Studio can be seen as a Visual Studio Code running in a browser environment, so there is no learning curve for me.

The author's short experience of using Cloud Studio is very smooth. I personally think that this is an online editor that is not inferior to StackBlitz. The author intends to no longer use StackBlitz for some small verification projects in the future, but to switch to Tencent Cloud Studio, which has a faster and smoother access speed.