From 217483b45917244e2177a13bf5fc7e818e5c84ee Mon Sep 17 00:00:00 2001 From: Johannes Klatt <km1938@partner.kit.edu> Date: Tue, 4 Mar 2025 17:48:54 +0100 Subject: [PATCH] Update README.md and Docker config for remote development --- .devcontainer/Dockerfile | 2 ++ README.md | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index b3e22e3f1..dc0a9f50c 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -2,5 +2,7 @@ FROM node:23-bookworm WORKDIR /workspaces/my-project +EXPOSE 8080 + ENV PNPM_HOME=/workspaces/pnpm RUN corepack enable pnpm diff --git a/README.md b/README.md index a63cd7fc5..cdc6d8645 100644 --- a/README.md +++ b/README.md @@ -53,3 +53,38 @@ pnpm test:e2e tests/e2e/example.ts # Runs the tests in debug mode pnpm test:e2e --debug ``` +## Environment setup with Jetbrains gateway + +To set up a remote development environment using Jetbrains webstorm and gateway, perform the following steps: + +### gateway and connection setup +- clone the repository to a folder of your choice on the remote, and checkout the nextvs branch +- install Jetbrains gateway on the client machine +- start gateway. In the SSH tab, click on the dropdown next to "New Project", and select "connect to Host". +- enter your username and the address of the remote. These should be "root" and "dev-(your-name)-1.net.scc.kit.edu". +- in the next window, select the directory you cloned Netvs into as the project directory and webstorm as the IDE, and confirm. + +You should now see the connection in the list of available SSH connections. Clicking it will open webstorm on the remote. + +### dev container and run config setup +- after launching webstorm, right-click netvs-core/.devcontainer/devcontainer.json in the file browser, and select Dev Containers -> Create Dev Container and Clone Sources. +- To use the newly built dev container, open the IDE settings, and navigate to Languages & Frameworks -> Node.js. Change the Node Interpreter setting to docker://netvs-dev:latest/node. +- click on the dropdown of the current run config, and select "Edit Configurations". +- Add a new configuration using the npm template. Switch the command to "install" +- Add a second npm configuration. Switch the command to "run" and the script to "dev-host". +- Open the docker container settings of the dev-host run configuration by clicking the folder icon. In the popup, add a new port binding that maps container port 8080 to host port 8080 on host IP 0.0.0.0 + +These changes will let you run the project in the provided dev container, while letting you display the website on the client through the forwarded port. + +### running and testing +- To install the required npm dependencies, run the install configuration once. +- Afterwards, you can run and host the project by running the dev-host config. +- Open [http://localhost:8080](http://localhost:8080) in a browser of your choice to access the netvs website, including realtime updates after code changes. + +If you are unable to open the website because the host is unreachable or the connection resets, this is likely due to incorrect port forwarding settings. In that case: +- Click on the name of the remote in the top left corner of the IDE to open the Backend Status panel. Under "Ports", you should see port 8080 being forwarded from the remote to the host. If that is not the case, double check the docker settings in the dev-host configuration. Do NOT manually add the port forwarding rule in the Backend Status panel, as this will make gateway attempt to forward the same port several times. +- Restart the IDE and its service on the remote. + +If you are unable to launch the dev-host configuration with a "port already in use" or similar error: +- Ensure that in the dev-host configuration, under "Browser / Live Edit", the "Open Browser after Launch" option is NOT enabled. +- Manually check for any old instances of the dev container running on the remote, and terminate them as necessary. -- GitLab