“This is the fourth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

I first looked for a Web IDE when I got a new iPad in college and wondered if I could write code with it. I downloaded a bunch of programming tools from the App Store, but none of them seemed to work. That’s when I discovered the magic of the Web IDE

Here’s what it looks like in iPad:

Web IDE tool usage scenarios

  1. Performance troubled: during the university study development of the students, I believe that there are laboratory hot chicken computer configuration torture experience, or their own computer configuration is not quite line, the code is very card. Then we can deploy our own development environment in the server, to the laboratory directly open the browser, only need a 2 core 4G server, it is still very smooth to use.

  2. Unified environment: Sometimes some software or dependency versions installed on the school computer are not consistent with those on your own computer, or the configuration of some development tools is different, which may affect your learning efficiency. Using web IDE, you can configure the environment uniformly (Linux). If you use Docker, you can also package the environment into an image and share it with other students.

  3. Ready to develop: This is similar to point 1. With the ability of the Web IDE to run in a browser, we can run code on any device that has a browser — computers, laptops, ipads, even phones!

Code – server is introduced

This time we will introduce code-server this ide tool, it is the famous Vscode server version, the official introduction to it is as follows

Run VS Code on any machine anywhere and access it in the browser.

Vscode can be used on any browser-enabled device

Code-server runs with VscodeAs like as two peasIs only used in the browser, as shown below:

So how is code-server implemented? If you know VS Code, you know that VS Code was developed based on Electron. Electron is a framework based on Node.js and Chromium. So you only need to write traditional HTML, CSS, JS to develop desktop software.

This means that Vscode itself is capable of running on the browser, so it only needs to make some changes. The simple understanding is to transform Vscode from a software to a traditional web project, with the back end running on your server and the front end running on your browser.

Code – server deployment

There are two ways to deploy code-server, one is to execute the official script directly installed in the server, the other is to use docker installation.

Official script installation mode:

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
Copy the code

Docker installation mode

  1. First of all, you need to install Docker on the server. There are many online tutorials, which will not be described here
  2. After the docker installation is complete, we create a new directory /data/code-server to mount our container directory, and then we execute the following command.
sudo docker run -itd --name code-server -p 8080:8080 -u root -w /data -v /data/code-server:/data --auth none code-server:latest
Copy the code
  1. After running successfully, we access the address in the browser:External IP address of the server :8080The code-server and VScode use the same logic, can be directly installed on the extension.

Here is more recommended to use docker oh, the above docker start command for a certain custom can also achieve more functions. You can refer to this document: coder.com/docs/code-s…

Advantages of using Docker to deploy code-server

By using the environment isolation mechanism of Docker, we can independently start and configure a container for our learning or development environment of each language. For example, a separate front-end container installs Node.js and a separate back-end container installs JDK, and then installs some corresponding VScode extensions between each container, which is in good order to use

Secondly, if the environment is broken or there is a problem, just delete the container and restart it.

Code -server usage tips

Code-server is installed, but there are a lot of tricks you can learn about using it.

If you’re a front-end developer, you can access the node.js startup preview from a server with an address like localhost:3000. After the service starts, you can access the preview site directly from the external IP address :3000. However, if you are using Docker for development, you need to expose and map the ports in advance. You can modify the -p parameter in the container startup command above, which means that the internal ports of the container are bound to the specified host port.

If you don’t use an existing front-end framework, or if you build your site directly in HTML, CSS, or JS, you can use the Live Server extension to help you quickly launch a temporary service, but also expose ports for access.

code-server

Some students may think that development on the server may need to be more familiar with Linux statements, or even file management can not slip, but also have to frequently upload or download, so will it be very troublesome?

In code-server, many file upload and download operations are insensitive, for example, I drag local files to the remote server, very smooth ~

The same is true for downloads. You can directly drag files from the left file management bar to your local computer, or right-click files and choose Download ~

Sometimes when pasting content in code-server, we will prompt the browser to prohibit pasting, as shown in the following picture:

This is something we can enter the browser Settings to add white list, this is Google browser into the Settings page address: chrome: / / Settings/content/clipboard, add an address in it.

conclusion

This article covers the benefits of a Web IDE and tips for deploying and using code-Server. If you have a more hardcore approach to development, feel free to comment