• Connect a remote machine to the Web IDE
  • Generate Let’s Encrypt certificates
    • Point a domain to your remote machine
    • Install Certbot
    • Generate the certificates
  • Connect a development environment to the Web IDE
    • Manage a development environment
    • Fetch a token
    • Configure a remote connection
• Related topics

Remote Development

You can use the Web IDE to commit changes to a project directly from your web browser without installing any dependencies or cloning any repositories. The Web IDE, however, lacks a native runtime environment on which you would compile code, run tests, or generate real-time feedback in the IDE. For a more complete IDE experience, you can pair the Web IDE Beta with a Remote Development environment that has been properly configured to run as a host.

Connect a remote machine to the Web IDE

Prerequisites:

• A remote virtual machine with root access
• A domain address resolving to that machine
• Docker installation

To connect a remote machine to the Web IDE, you must:

1. Generate Let’s Encrypt certificates.
2. Connect a development environment to the Web IDE.

Generate Let’s Encrypt certificates

To generate Let’s Encrypt certificates:

1. Point a domain to your remote machine.
2. Install Certbot.
3. Generate the certificates.

Point a domain to your remote machine

To point a domain to your remote machine, create an A record from example.remote.gitlab.dev to 1.2.3.4.

Install Certbot

Certbot is a free and open-source software tool that automatically uses Let’s Encrypt certificates on manually administered websites to enable HTTPS.

To install Certbot, run the following command:

sudo apt-get update
sudo apt-get install certbot

Generate the certificates

export EMAIL="YOUR_EMAIL@example.com"
export DOMAIN="example.remote.gitlab.dev"

certbot -d "${DOMAIN}" \
  -m "${EMAIL}" \
  --config-dir ~/.certbot/config \
  --logs-dir ~/.certbot/logs \
  --work-dir ~/.certbot/work \
  --manual \
  --preferred-challenges dns certonly

Connect a development environment to the Web IDE

To connect a development environment to the Web IDE:

1. Create a development environment.
2. Fetch a token.
3. Configure a remote connection.

Manage a development environment

Create a development environment

export CERTS_DIR="/home/ubuntu/.certbot/config/live/${DOMAIN}"
export PROJECTS_DIR="/home/ubuntu"

docker run -d \
  --name my-environment \
  -p 3443:3443 \
  -v "${CERTS_DIR}/fullchain.pem:/gitlab-rd-web-ide/certs/fullchain.pem" \
  -v "${CERTS_DIR}/privkey.pem:/gitlab-rd-web-ide/certs/privkey.pem" \
  -v "${PROJECTS_DIR}:/projects" \
  registry.gitlab.com/gitlab-com/create-stage/editor-poc/remote-development/gitlab-rd-web-ide-docker:0.1-alpha \
  --log-level warn --domain "${DOMAIN}" --ignore-version-mismatch

The new development environment starts automatically.

Stop a development environment

docker container stop my-environment

Start a development environment

docker container start my-environment

The token changes every time you restart the development environment.

Remove a development environment

To remove a development environment:

1. Stop the development environment.

2. Run the following command:

   docker container rm my-environment
   

Fetch a token

docker exec my-environment cat TOKEN

Configure a remote connection

To configure a remote connection from the Web IDE:

1. Open the Web IDE.
2. In the Menu Bar, select View > Terminal or press Control+`.
3. In the terminal panel, select Configure a remote connection.
4. Enter the URL for the remote host including the port (for example, yourdomain.com:3443).
5. Enter the project path.
6. Enter the token you fetched.

Alternatively, you can pass the parameters from a URL and connect directly to the Web IDE:

1. Run the following command:

   echo "https://gitlab-org.gitlab.io/gitlab-web-ide?remoteHost=${DOMAIN}:3443&hostPath=/projects"
   

2. Go to that URL and enter the token you fetched.

Related topics

• Web IDE Beta