WebStorm
 
2024.1
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Write and edit source code
  2. Dev Containers

Dev Containers

Last modified: 17 June 2024

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.

tip

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

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

warning

Before starting to work with Dev Containers, make sure you have read Prerequisites and limitations.

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.

    note

    Keep in mind that the Docker connection supports only the key-pair ssh authorization. If you connect to a remote server using a password, generate the key-pair locally and then forward it to a remote server.

  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:

    note

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

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

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

    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.