Open Code in Dev Environment

Opening the project code in a dev environment looks different depending on the IDE you use: IntelliJ-based IDEs (like IntelliJ IDEA, PyCharm, WebStorm, etc.) or Visual Studio Code (VS Code).

IntelliJ-based IDEs

If you use an IntelliJ-based IDE, you can open the project code in a dev environment either via CodeCanvas or via JetBrains Gateway.

Prerequisites

You have an account in CodeCanvas, and it has permissions to access the project repository and the corresponding dev environment template.
You have the read/write access to the project's repository on the Git hosting service.
You have JetBrains Gateway installed on your machine.
See other recommendations for the local machine

Open JetBrains Gateway.
If not yet connected to CodeCanvas:
1. In the list of Connections, select JetBrains CodeCanvas.
2. Click Connect to CodeCanvas.
3. Specify the URL of your CodeCanvas instance and click Continue in Browser.
4. In the browser, click Accept to grant JetBrains Gateway access to your CodeCanvas account.
5. Return to JetBrains Gateway.
Сlick New environment.
Specify the environment name and other settings:
- Template – the template that will be used as a base for the environment. The template defines dev environment resources, the Git repository, the IDE, and other settings. Learn more about templates
- Branch – the branch of the project repository that will be checked out in the environment.
- Warm-up snapshot – a warm-up snapshot that will be used to initialize the environment. Typically, warm-up snapshots contain project indexes, caches, dependencies, and other data that can significantly speed up the environment start. Learn more about warm-up snapshots
- Personal parameters – if the project requires sensitive parameters (like API keys, passwords, etc.), you should provide them here. There can be Required parameters (obligatory) and Optional parameters (you can skip them). You can't provide a plain text value, instead, you should use a reference to parameter in your personal parameter storage. Learn how to create parameters in your personal storage
Click Create Environment.
This will start creating the environment. Once the environment is ready, Gateway will automatically open the IDE.

In CodeCanvas, open the My dev environments page.
Click New Environment.
On the Select template tab, select the template that will be used as a base for the environment. The template defines dev environment resources, the Git repository, the IDE, and other settings.
Learn more about templates
If the project requires sensitive parameters (like API keys, passwords, etc.), switch to the Provide personal parameters tab and provide them here.
There can be Required parameters (obligatory) and Optional parameters (you can skip them). You can't provide a plain text value, instead, you should use a reference to parameter in your personal parameter storage.
Learn how to create parameters in your personal storage
On the Other settings tab, specify the environment name and other settings:
- Branch – the branch of the project repository that will be checked out in the environment.
- Warm-up snapshot – a warm-up snapshot that will be used to initialize the environment. Typically, warm-up snapshots contain project indexes, caches, dependencies, and other data that can significantly speed up the environment start.
  Learn more about warm-up snapshots
Click Create.
This will open JetBrains Gateway and start creating the environment. Once the environment is ready, Gateway will automatically open the IDE.

Visual Studio Code

To work with VS Code dev environments, CodeCanvas uses the 'Remote Development using SSH' feature of VS Code. It allows working with files and folders on a remote machine using SSH.

Prerequisites

You have an account in CodeCanvas, and it has permissions to access the project repository and the corresponding dev environment template.
You have the read/write access to the project's repository on the Git hosting service.
You have VS Code with the Remote - SSH extension installed.
(Windows) You've enabled the SSH agent service. Learn how to do this
You have SSH keys set up: the public key is added to your CodeCanvas account, and the private key is added to the SSH agent on your local machine. Learn how to perform such setup

Create a new dev environment either via CodeCanvas or via JetBrains Gateway.
1. In CodeCanvas, open the My dev environments page.
2. Click New Environment.
3. On the Select template tab, select the template that will be used as a base for the environment. The template defines dev environment resources, the Git repository, the IDE, and other settings.
  Learn more about templates
4. If the project requires sensitive parameters (like API keys, passwords, etc.), switch to the Provide personal parameters tab and provide them here.
  There can be Required parameters (obligatory) and Optional parameters (you can skip them). You can't provide a plain text value, instead, you should use a reference to parameter in your personal parameter storage.
  Learn how to create parameters in your personal storage
5. On the Other settings tab, specify the environment name and other settings:
  - Branch – the branch of the project repository that will be checked out in the environment.
  - Warm-up snapshot – a warm-up snapshot that will be used to initialize the environment. Typically, warm-up snapshots contain project indexes, caches, dependencies, and other data that can significantly speed up the environment start.
    Learn more about warm-up snapshots
6. Click Create.
  This will start creating the environment.
7. Go to the dev environment page and open the Timeline tab.
8. Copy the connection string.
1. Open JetBrains Gateway.
2. If not yet connected to CodeCanvas:
  1. In the list of Connections, select JetBrains CodeCanvas.
  2. Click Connect to CodeCanvas.
  3. Specify the URL of your CodeCanvas instance and click Continue in Browser.
  4. In the browser, click Accept to grant JetBrains Gateway access to your CodeCanvas account.
  5. Return to JetBrains Gateway.
3. Сlick New environment.
4. Specify the environment name and other settings:
  - Template – the template that will be used as a base for the environment. The template defines dev environment resources, the Git repository, the IDE (VS Code), and other settings. Learn more about templates
  - Branch – the branch of the project repository that will be checked out in the environment.
  - Warm-up snapshot – a warm-up snapshot that will be used to initialize the environment. Typically, warm-up snapshots contain project indexes, caches, dependencies, and other data that can significantly speed up the environment start. Learn more about warm-up snapshots
  - Personal parameters – if the project requires sensitive parameters (like API keys, passwords, etc.), you should provide them here. There can be Required parameters (obligatory) and Optional parameters (you can skip them). You can't provide a plain text value, instead, you should use a reference to parameter in your personal parameter storage. Learn how to create parameters in your personal storage
5. Click Create Environment.
  This will start creating the environment.
6. In the popup window, copy the connection string by clicking Copy SSH command and close.
Open VS Code and press F1 (Windows/Linux) or ⌘+Shift+P (macOS) to open the command palette.
Type Remote-SSH: Add new SSH host and select it.
Paste the connection string you copied from CodeCanvas or JetBrains Gateway.
Specify the path to your SSH config file. On Windows, it is usually C:\Users\{username}\.ssh\config. On macOS and Linux, it's ~/.ssh/config
The dev environment host will be added to the list of SSH hosts in VS Code.
In Remote Explorer, refresh the list of Remotes. Then connect to the newly added dev environment host.
When asked about the host platform, select Linux. Then select Continue.
Your VS Code is now connected to the dev environment.
Open your project folder located at /mnt/jetbrains/work/{repository-name}

Last modified: 02 July 2024