Add latest changes from gitlab-org/gitlab@master

2 files changed, 139 insertions, 85 deletions

diff --git a/doc/user/project/remote_development/connect_machine.md b/doc/user/project/remote_development/connect_machine.md
new file mode 100644
index 00000000000..9f4c7fc45c7
--- /dev/null
+++ b/doc/user/project/remote_development/connect_machine.md
@@ -0,0 +1,107 @@
+---
+stage: Create
+group: Editor
+info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
+---
+
+# Tutorial: Connect a remote machine to the Web IDE **(FREE)**
+
+This tutorial shows you how to:
+
+- Create a development environment outside of GitLab.
+- Connect a remote machine to the [Web IDE](../web_ide_beta/index.md).
+
+To connect a remote machine to the Web IDE, you must:
+
+1. [Generate Let's Encrypt certificates](#generate-lets-encrypt-certificates).
+1. [Connect a development environment to the Web IDE](#connect-a-development-environment-to-the-web-ide).
+
+## Prerequisites
+
+- A remote virtual machine with root access
+- A domain address resolving to that machine
+- Docker installation
+
+## Generate Let's Encrypt certificates
+
+To generate Let's Encrypt certificates:
+
+1. Create an `A` record to point a domain to your remote machine (for example, from `example.remote.gitlab.dev` to `1.2.3.4`).
+1. Install [Certbot](https://certbot.eff.org/) to enable HTTPS:
+
+   ```shell
+   sudo apt-get update
+   sudo apt-get install certbot
+   ```
+
+1. Generate the certificates:
+
+   ```shell
+   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:
+
+   ```shell
+   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-org/remote-development/gitlab-rd-web-ide-docker:0.2-alpha \
+     --log-level warn --domain "${DOMAIN}" --ignore-version-mismatch
+   ```
+
+   The new development environment starts automatically.
+
+1. Fetch a token:
+
+   ```shell
+   docker exec my-environment cat TOKEN
+   ```
+
+1. [Configure a remote connection](#configure-a-remote-connection).
+
+### Configure a remote connection
+
+To configure a remote connection from the Web IDE:
+
+1. Open the Web IDE.
+1. On the menu bar, select **View > Terminal** or press <kbd>Control</kbd>+<kbd>`</kbd>.
+1. In the terminal panel, select **Configure a remote connection**.
+1. Enter the URL for the remote host including the port (for example, `yourdomain.com:3443`).
+1. Enter the project path.
+1. Enter the token you've fetched.
+
+Alternatively, you can pass the parameters from a URL and connect directly to the Web IDE:
+
+1. Run this command:
+
+   ```shell
+   echo "https://gitlab-org.gitlab.io/gitlab-web-ide?remoteHost=${DOMAIN}:3443&hostPath=/projects"
+   ```
+
+1. Go to that URL and enter the token you've fetched.
+
+You've done it! Your development environment now runs as a remote host that's connected to the Web IDE.
+
+## Related topics
+
+- [Manage a development environment](index.md#manage-a-development-environment)
diff --git a/doc/user/project/remote_development/index.md b/doc/user/project/remote_development/index.md
index 29711b89d23..31c0a8eb51c 100644
--- a/doc/user/project/remote_development/index.md
+++ b/doc/user/project/remote_development/index.md
@@ -4,7 +4,7 @@ group: Editor
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 
-# Remote Development **(FREE)**
+# Remote development **(FREE)**
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/95169) in GitLab 15.4 [with a flag](../../../administration/feature_flags.md) named `vscode_web_ide`. Disabled by default.
 
@@ -22,70 +22,40 @@ As with all projects, the items mentioned on this page are subject to change or
 The development, release, and timing of any products, features, or functionality remain at the
 sole discretion of GitLab Inc.
 
-You can use the [Web IDE](../web_ide/index.md) 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](../web_ide_beta/index.md) with a Remote Development environment that has been properly configured to run as a host.
+## Web IDE as a frontend
 
-## Connect a remote machine to the Web IDE
+You can use the [Web IDE](../web_ide_beta/index.md) to make, commit, and push changes to a project directly from your web browser.
+This way, you can update any project without having to install any dependencies or clone any repositories locally.
 
-Prerequisites:
+The Web IDE, however, lacks a native runtime environment where you could compile code, run tests, or generate real-time feedback.
+With remote development, you can use:
 
-- A remote virtual machine with root access
-- A domain address resolving to that machine
-- Docker installation
+- The Web IDE as a frontend
+- A separate machine as a backend runtime environment
 
-To connect a remote machine to the Web IDE, you must:
+For a complete IDE experience, connect the Web IDE to a [development environment](#workspace) that's configured to run as a remote host.
+For more information, see [connect a remote machine to the Web IDE](connect_machine.md).
 
-1. [Generate Let's Encrypt certificates](#generate-lets-encrypt-certificates).
-1. [Connect a development environment to the Web IDE](#connect-a-development-environment-to-the-web-ide).
+## Workspace
 
-### Generate Let's Encrypt certificates
+A workspace is a virtual sandbox environment for your code that includes:
 
-To generate Let's Encrypt certificates:
+- A runtime environment
+- Dependencies
+- Configuration files
 
-1. [Point a domain to your remote machine](#point-a-domain-to-your-remote-machine).
-1. [Install Certbot](#install-certbot).
-1. [Generate the certificates](#generate-the-certificates).
+You can create a workspace from scratch or from a template that you can also customize.
 
-#### Point a domain to your remote machine
+When you configure and connect a workspace to the [Web IDE](../web_ide_beta/index.md), you can:
 
-To point a domain to your remote machine, create an `A` record from `example.remote.gitlab.dev` to `1.2.3.4`.
+- Edit files directly from the Web IDE and commit and push changes to GitLab.
+- Use the Web IDE to run tests, debug code, and view real-time feedback.
 
-#### Install Certbot
+## Manage a development environment
 
-[Certbot](https://certbot.eff.org/) is a free and open-source software tool that automatically uses Let's Encrypt certificates on manually administered websites to enable HTTPS.
+### Create a development environment
 
-To install Certbot, run the following command:
-
-```shell
-sudo apt-get update
-sudo apt-get install certbot
-```
-
-#### Generate the certificates
-
-```shell
-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](#manage-a-development-environment).
-1. [Fetch a token](#fetch-a-token).
-1. [Configure a remote connection](#configure-a-remote-connection).
-
-#### Manage a development environment
-
-**Create a development environment**
+To create a development environment, run this command:
 
 ```shell
 export CERTS_DIR="/home/ubuntu/.certbot/config/live/${DOMAIN}"
@@ -103,54 +73,31 @@ docker run -d \
 
 The new development environment starts automatically.
 
-**Stop a development environment**
+### Stop a development environment
+
+To stop a running development environment, run this command:
 
 ```shell
 docker container stop my-environment
 ```
 
-**Start a development environment**
+### Start a development environment
+
+To start a stopped development environment, run this command:
 
 ```shell
 docker container start my-environment
 ```
 
-The token changes every time you restart the development environment.
+The token changes every time you start the development environment.
 
-**Remove a development environment**
+### Remove a development environment
 
 To remove a development environment:
 
-1. Stop the development environment.
-1. Run the following command:
+1. [Stop the development environment](#stop-a-development-environment).
+1. Run this command:
 
    ```shell
    docker container rm my-environment
    ```
-
-#### Fetch a token
-
-```shell
-docker exec my-environment cat TOKEN
-```
-
-#### Configure a remote connection
-
-To configure a remote connection from the Web IDE:
-
-1. Open the Web IDE.
-1. In the Menu Bar, select **View > Terminal** or press <kbd>Control</kbd>+<kbd>`</kbd>.
-1. In the terminal panel, select **Configure a remote connection**.
-1. Enter the URL for the remote host including the port (for example, `yourdomain.com:3443`).
-1. Enter the project path.
-1. Enter the [token you fetched](#fetch-a-token).
-
-Alternatively, you can pass the parameters from a URL and connect directly to the Web IDE:
-
-1. Run the following command:
-
-   ```shell
-   echo "https://gitlab-org.gitlab.io/gitlab-web-ide?remoteHost=${DOMAIN}:3443&hostPath=/projects"
-   ```
-
-1. Go to that URL and enter the [token you fetched](#fetch-a-token).