(For myself) Build an IDE that you can touch from a browser with docker (trial)

Introduction

I didn't know until then, but in this article I became interested in WebIDE after learning about the existence of jupyterlab. I'm going to give it a try with docker.

environment

We will do it in the following environment.

• Ubuntu20.04
• Docker Version 20.10.1
• docker-compose Version 1.25.0

Advance preparation

python

mkdir web-ide
mkdir web-ide/cloud9
mkdir web-ide/jupyter-lab
mkdir web-ide/eclipse-che
mkdir web-ide/code-server
mkdir web-ide/eclipse-theia

eclipse-theia I learned for the first time recently that there is something called eclipse-thiea as a counter to vscode. It seems to be used for Gitpod and used by well-known companies, so you can expect quite a lot. Take a look at Official Github and try to build it quickly.

python

cd web-ide/eclipse-theia

touch docker-compose.yml
# docker-compose.Edit yml
gedit docker-compose.yml

mkdir project

docker-compose looks like this, for the time being, let's make it an image with everything.

docker-compose.yml

version: '2.2'

services:
  eclipse-theia:
    restart: always
    image: theiaide/theia-full #Image with all
    init: true
    ports:
      - 50003:3000
    volumes:
      - ./project:/home/project/:cached

start up. docker-compose up -d

Try accessing it from your browser.

Create test.py.

I'm told that I don't have Linter, so I'll install it.

The following command was hit.

python

/usr/bin/python3.8 -m pip install -U pylint --u Collecting pylint

After that, when I try to run it, it says that there is no "Debug Configuration" without launch.json. Of course, select "Python File" here.

The following json is created.

json:.theid/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

If you set a breakpoint and try to execute it It seems that you can debug properly.

What about security like other Cloud9 and code-server? I thought If you use it on the cloud, do you use it with a certificate via nginx? I can't read it properly because it's in English, but probably. The reference URL is as follows. How To Set Up the Eclipse Theia Cloud IDE Platform on Ubuntu 18.04 [Quickstart] How To Set Up the Eclipse Theia Cloud IDE Platform on Ubuntu 18.04 [Quickstart] How To Set Up the Eclipse Theia Cloud IDE Platform on Ubuntu 18.04 I will try it at another time.

Cloud9

When I was looking for it on docker-hub, there were quite a few new and many pulls. Use it.

python

cd web-ide/cloud9

touch docker-compose.yml
# docker-compose.Edit yml
gedit docker-compose.yml

mkdir code
mkdir docker.sock

docker-compose.yml should look like this.

docker-compose.yml

version: "2.1"
services:
  cloud9:
    image: linuxserver/cloud9:python
    container_name: cloud9
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Tokyo
      - GITURL=https://github.com/linuxserver/docker-cloud9.git #optional
      - USERNAME=user #optional
      - PASSWORD=password #optional
    volumes:
      - ./code:/code #optional
      - ./docker.sock:/var/run/docker.sock #optional
    ports:
      - 10000:8000
    restart: unless-stopped

start up. docker-compose up -d

Try accessing it from your browser. I was able to access it by entering the user and password set in yml.

I used python as the tag, but does Runner contain this much? it seems like.

I was able to run it from bash, but for some reason I couldn't run python from Run. .. ..

Is there something wrong with the Runner settings? It's a trial for the time being, so Yoshi! will do.

Postscript

If you add Runner and change the cmd part as follows, you can also run with python.

python3.run

// This file overrides the built-in Python runner
// For more information see http://docs.c9.io:8080/#!/api/run-method-run
{
  "cmd": [
--- "$python",
+++ "python3",
    "$file",
    "$args"
  ],
  "selector": "^.*\\.(python|py)$",
  "env": {
    "PYTHONPATH": "$python_path"
  }
}

I was able to run C ++.

Reference URL: linuxserver/cloud9 Prepare the fastest and lightest IDE environment with docker + alpine + cloud9 Create an online IDE for free

code-server

cd /web-ide/code-server
mkdir projects
mkdir code-server
touch Dockerfile
touch docker-compose.yml

The Dockerfile and docker-compose.yml are as follows. I'm installing python3 easily.

Dockerfile

FROM codercom/code-server:latest

USER root

RUN apt-get update && apt-get install -y \
	python3

USER coder

docker-compose.yml

version: "3"
services:
  code:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    environment:
      PASSWORD: password
    ports:
      - 30001:8080
    volumes:
      - ./projects:/home/coder/project
      - ./code-server:/home/coder/.local/share/code-server

Try accessing it from your browser. I was able to access it by entering the password set in yml.

Run python from the terminal.

python3 test.py

• I didn't put venv, so I will put it later.

python worked, but I'm not sure how to debug. .. .. Like normal vscode, it seems possible with lanuch.json I'm not sure about the settings. If you can use it so far on a browser basis without a debugger, you can use it for a little development at all.

The strongest mobile development environment created with Docker Thorn road of code-server construction and its shortcut A story about trying to run Docker + Nginx + code-server on my home server codercom/code-server Build a CODE SERVER for VISUAL STUDIO CODE and access it from a browser

Jupyter Lab Refer to the following article. If you're trying a language, this is definitely your choice. I'm not sure about application development, but maybe I can do my best. I made a Docker image of Jupyter Lab with 17 languages HeRoMo/jupyter-langs (For myself) allow jupyterlab to run different languages ​​and C # mototoke/jupyter-langs

eclipse-che I will omit it because I could not build it well. sorrow.

General comment

I've only touched it a little, but I like cloud9 as a personal feeling of operation. Since code-server is almost vscode, it's the same as usual, but I felt that the intellisense of the terminal didn't work. I didn't mention eclisep-che, but it seems that the template of the project can be used, so it looks pretty good. In any case, it's just a wonderful word to be able to set up one server and develop with just a browser. I decided to use it if I had a chance next time.

Postscript: For now, eclipse-theia, which seems to be able to debug, may be the best. It seems that it is compatible with vscode extension, so I got the impression that it seems to be quite easy to use. For now, if you want to develop python apps on web-ide, you should choose eclipse-thiea.