WebStorm 2024.1 Help

Dev Containers

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

WebStorm lets you use such containers to edit, build, and run your projects. If you need to see a specification for a development container, refer to Dev Container properties.

WebStorm also supports multiple container connections that can be configured with Docker Compose properties.

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 Create Dev Container and select Create Dev Container and Mount Sources.

    The following options are also available in the context menu:

    • Create Dev Container and Clone Sources: use this option to clone your project into a dev container.

    • Show Dev Containers: use this option to check a list of existing dev containers. You can see which ones are active and running, stop them, or restart them.

      See dev containers
    • Manage Dev Container Backends: use this option to manage the dev container backends such as select and remove the unnecessary ones from a dev container.

      Manage backends
  4. After a 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. From the available options on the right, click Create Dev Container.

  3. If you want to build the dev container on a remote machine, click Show option menu next to the docker field to open the Docker dialog.

    the Docker dialog

    Specify the necessary configuration and click OK.

  4. 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.

  5. 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 container right from WebStorm either locally or remotely via SSH.

Start Dev Container from WebStorm

  1. Launch WebStorm.

  2. From the welcome screen, click Remote Development and then Dev Containers.

  3. Click New Dev Container.

  4. On the page that opens, select a type of the project for which you want to build a dev container:

    This option lets you choose a project residing on your local machine.

    Specify a path to the .json file of the project.

    This option lets you specify a project residing on GitHub.

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

    You can also select the way the .json file will be detected. Select Automatic for the automatic detection or Specify Path for the manual one.

    Click Build Container and Continue.

  5. 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 a Dev Container from scratch

You can create the new dev container using devcontainer.json file and the configuration it offers.

The easiest way to start is to pull an image (a predefined template) for your devcontainer.json file from a container registry (the collection of repositories with predefined images).

Create a dev container

  1. Open a project in WebStorm.

  2. In the project view, right-click the name of your project and select New | .devcontainer.

  3. In the dialog that opens, select the needed template in the Dev Container Template field.

    Create new dev container
  4. Click OK. WebStorm generates the .devcontainer directory with the devcontainer.json file that contains the container description. You can customize the configuration as needed.

    Dev Container result
  5. In the left gutter, click Create Dev Container and select Create Dev Container and Mount Sources to build your dev container.

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 Dev Containers 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.

Last modified: 17 June 2024