WebStorm
 
2023.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Write and edit source code
  2. Remote development
  3. Connect to Dev Container

Connect to Dev Container

Last modified: 04 October 2023

A Development Container (dev container) is a Docker container that is configured to be used as fully functional development environment.

WebStorm lets you use such container to edit, build, and run your projects.

tip

You can use to quickly check the process of creating a dev container.

Prerequisites

Before you start, make sure the following prerequisites are met:

  • You have a project that contains the .devcontainer folder with the devcontainer.json file that describes the actual dev container.

    note

    Currently, we don't support the code completion for the devcontainer.json file, so creating such file from scratch might be complicated.

  • You have access to GitHub.

  • Your have the Git 2.25 version or later installed on your machine.

  • You have Docker installed on the machine where a dev container will reside.

  • Your Docker resources meet the minimal system requirements for the backend.

You can start a dev container inside the IDE. You can also start it locally or remotely from either JetBrains Gateway or WebStorm.

Start Dev Container inside the IDE

You can open a project that has the .devcontainer folder with the devcontainer.json file in the root inside WebStorm and start a dev container from the IDE by using Docker.

Create Dev Container from the IDE

  1. Open your project with the devcontainer.json file inside the IDE.

    You can open the project locally or remotely.

  2. Open the devcontainer.json file in the editor.

  3. In the left gutter, click Clouds docker gateway icons docker and select Create Dev Container (mount sources).

    note

    If you want to see the Create Dev Container (clone sources), enable the Enable creating Dev Containers from the Gateway (Remote Development) welcome screen option in Advanced Settings.

  4. After the dev container is created, click Continue.

    The container is created and the project is opened in JetBrains Client.

Start Dev Container from the JetBrains Gateway welcome screen

You can start a dev container from JetBrains Gateway either locally or connect to a remote server using SSH.

Start Dev Container from JetBrains Gateway

  1. Launch JetBrains Gateway.

  2. Click the Options menu and from the context menu select Settings.

  3. Select Advanced Settings from the list of available options and from the options on the right, under the Dev Containers section, select Enable creating Dev Containers from the Gateway (Remote Development) welcome screen and click OK.

  4. Restart JetBrains Gateway to make the Dev Containers option available on the welcome screen.

  5. From the available options on the right, click Create Dev Container.

  6. In the Git Repository field, specify the path to your project on GitHub.

    The project to which you are referring should have a devcontainer.json file that contains the dev container configuration.

    If you want to build the dev container locally, click Build Container and Continue.

    If you want to build the dev container on the remote machine, open the Connect via SSH section, specify the necessary configuration and then click Build Container and Continue.

  7. After the dev container is built, click Continue to open the project with JetBrains Client.

    At this point, you can work with your project further.

Start Dev Container from the WebStorm welcome screen

You can start a dev contain right from WebStorm either locally or remotely via SSH.

Start Dev Container from WebStorm

  1. Launch WebStorm.

  2. Press CtrlAlt0S to open Settings.

  3. Select Advanced Settings from the list of available options and from the options on the right, under the Dev Containers section, select Enable creating Dev Containers from the Gateway (Remote Development) welcome screen and click OK.

  4. Restart WebStorm to enable the Dev Containers option.

  5. From the welcome screen, select Remote Development and click Create Dev Container.

  6. In the Git Repository field, specify the path to your project on GitHub.

    The project to which you are referring should have a devcontainer.json file that contains the dev container configuration.

    If you want to build the dev container locally, click Build Container and Continue.

    If you want to build the dev container on the remote machine, open the Connect via SSH section, specify the necessary configuration and then click Build Container and Continue.

  7. After the dev container is built, click Continue to open the project with JetBrains Client.

    At this point, you can work with your project further.

Recent projects

When you close your project, you can choose how to handle the dev container. You can close the project and keep the dev container active, or you can close the project and also stop running the dev container.

All the recent dev containers are displayed on the welcome screen under the Local node for local projects or under the remote server name. You can start and stop recent dev containers right from the welcome screen of JetBrains Gateway or WebStorm.