Dev Containers

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

Open the devcontainer.json file in the editor.

In the left gutter, click , select Create Dev Container and Mount Sources and select the backend IDE with which you want to work inside the container.

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.

  

• Manage Dev Container Backends: use this option to remove the unnecessary ones from Docker shared volumes.

  

• Add Modified Settings from IDE: use this option to add your IDE settings to the IDE backend that is running inside your Dev Container. The settings are added to the devcontainer.json file as a customizations section. It might be useful if you want to synchronize both settings or choose some other customization option.

  

  You can also add the non-default application-level settings, modify the added settings options, sort them, or add properties from the JSON schema. Press Alt+Enter in the settings section of the devcontainer.json file and select the appropriate option.

  

The process of creating a Dev Container is displayed in the Services tool window.

After the Dev Container is created, click Connect.

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

Open a project in WebStorm.

In the Project view, right-click the name of your project and select New | Dev Container Config.

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

Click OK.

WebStorm generates the .devcontainer directory with the devcontainer.json file that contains the container description. You can customize the configuration as needed.

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

On the IDE Welcome Screen, click the Remote Development node.

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

On the page that opens, the connection to the local Docker is found automatically. If there is no connection, check whether your local Docker is active.

Specify the name of the backend IDE that will be used for the Dev Container.

By default, it is the IDE that you currently use. If you want to change the selected IDE, click and select the one you need from the list.

Select which project you want to use either from the VCS or from the local file system and fill out the necessary fields.

Click Build Container and Continue.

After the Dev Container is built, the project is opened with JetBrains Client.

Launch WebStorm.

From the welcome screen, click Remote Development, and from the options on the right, click Create Dev Containers.

On the page that opens, click to connect to Docker on a remote machine by SSH.

If your remote server is not configured, click and on the page that opens add the necessary options.

Select the IDE backend that you want to use for the project.

If you want to change the selected IDE, click and select the one you need from the list.

Select a project for which you want to build a Dev Container by clicking the appropriate tab:

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

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

This option lets you specify a project residing on GitHub. Specify the following options:

• Git Repository: specify the path to your project on GitHub.

• Automatic: select this option if you want WebStorm to detect the .json file automatically.

• Specify Path: select this option if you prefer to specify the path to the .json file manually.

Click Build Container and Continue.

After the Dev Container is built, the project opens in the JetBrains Client.

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