I use multiple PCs and have Visual Studio Code (VSCode) installed on each PC. I often think that if VSCode could be used on a browser, it would be easier to use the same environment anytime without the need for setup.
GitHub Codespaces is exactly such a service, but it is still in beta, so I wanted to touch it when it is officially released.
In the midst of all this, I discovered the "Open Editor" button when using GCP's Cloud Shell.
When I push it...
What is this, VSCode?"
and a VSCode-like editor opened in the browser.
I found out that there is a browser-based editor called Theia, which is similar to VSCode, and that it was adopted as the editor for Cloud Shell.
Theia itself claims to be aiming at replacing VSCode, so I wrote "a duplicate".
It looked kind of interesting, so I tried to use it in earnest, but GCP's Cloud Shell is extremely slow to start up and has only 5G of disk space...
I had no choice but to set up my own instance and use Theia by itself.
Here I wrote about how to set up Theia's environment and my impressions of coding in a browser.
What is Theia?
The relationship between VSCode and Theia was described in the following article, which is honestly chaotic.
With the advent of browser-powered editor engines, does this mean that cloud IDEs using them have become wildly popular?
Theia is made with TypeScript (JavaScript), and when executed, it launches a web server and displays a VSCode-like editor when accessing http://localhost:3000.
The Explorer directory is the directory of the PC running Theia, and the Terminal, like Explorer, will launch and display the shell of the PC running Theia.
The usability is just like VSCode, and some of the same extensions as VSCode have been ported.
install
Build it yourself
You can also install it yourself by editing package.json with Node.js and the related apps needed to build it.
However, since it is a heavy application, it takes a very long time to build. And as expected, it stopped with an error after waiting for a long time...
So, since a pre-built Docker image is available, I ended up using it.
Using Docker images
The procedure is described in the official document below.
There are several images, but I used "theiaide/theia-full" with all of them.
This image is ready to use major programming languages, and the base OS is Ubuntu-18.04, so it is easy to build a terminal environment.
The following command will run Theia on Docker, so all you need to do is access http://localhost:3000 from a browser.
docker volume create theia-volume docker run -it --init -p 3000:3000 -v "theia-volume:/home/project" theiaide/theia:latest
Certification
Theia does not have a user authentication feature, and when you access Theia's web server, the editor appears as is.
Since it is not possible to see through the public as it is, I set up a proxy with oauth2-proxy to allow access to Theia's web server only when logging in with my Google account.
As described in the article below, oauth2-proxy is an application that allows social authentication to be installed at the entrance of site access, just like Basic Authentication.
Try it out
Frankly, I was skeptical that coding in a browser would be practical, but it is totally normal.
It is a browser, so there is some mussiness, but it is acceptable.
Code completion and formatting were no problem, and building the program went easily without any problems.
The machine environment is plain Ubuntu with root privileges, so you can configure the environment in any way you like.
The following points were of interest to me when I was using the system.
- keyboard shortcut
- File update detection
- Multiple views of the same file
- Loading terminal settings
keyboard shortcut
I think this is true not only for Theia, but for all browser-based editors, such as Github Codespaces, etc. Even if key bindings are set on the editor side, the browser's key bindings take precedence.
For example, if you assign "Ctrl+p" to some function, it is ignored and the browser's print dialog appears.
To prevent this, the site must be opened in browser app mode.
However, with Theia, it still did not work. In the end, I gave up on setting key bindings in the editor and used the following "AutoHotKey" to change the browser key bindings and it worked.
File update detection
When a file is added, updated, or deleted outside of the editor, it is detected and automatically reflected in the editor, but I think this may be a problem specific to Theia, but if there are too many files in the workspace, they are not detected.
Without detection, it is quite difficult to use... To prevent this, workspaces need to be set up in smaller units so that there are not too many files in a workspace.
Multiple views of the same file
I think this may be a problem specific to Theia, but I could not have multiple views for a single file. This is a bit painful...
Loading terminal settings
I think this may be a Theia-specific problem, but when I run apt-get upgrade, the terminal does not load the shell configuration file, and the terminal does not pass the path.
To regress this, create a script that reads the following configuration
start_shell.sh
#!/bin/bash source /etc/environment source /etc/profile source /home/theia/.bashrc
In theia settings, load the script with the bash option.
setting.json
{ "terminal.integrated.shellArgs.linux": [ "--init-file", "/home/theia/start_shell..sh" ] }
These are the only points I was concerned about, and once I got them under control, I was able to use the system rather heavily and without stress.
Impressions, etc.
Coding in the browser, totally possible. It's rather a little fun.
At first, I had trouble setting up keyboard shortcuts, which was stressful, but after I started using AutoHotKey, it became more comfortable.
I would like to elaborate more once I start, but Theia is so minor that I can't get that serious about it.... I'll leave it at that.
It is convenient to set up your own server to do everything, but it is troublesome, expensive, and not a real VSCode. I think that using a cloud service is the right choice for this kind of thing.
Since Github Codespaces is the only way to bring VSCode to the cloud, I'm thinking that Github Codespaces is the real deal for Cloud IDE, but to make it somewhat usable as a development environment, I need a good machine spec and the freedom to build the environment I think Github Codespaces is the real deal for a Cloud IDE.
If I can get a good environment there for a few hundred yen a month, I would like to play with it for personal use.
