How to configure Webstorm for docker container node_modules?

The TLDR answer:

The path inside the container has to be /opt/project (exact path) where you are loading the project file and also installing the node_modules. Unfortunately, it is not well documented, and also no way to update the path as of now.

The Detailed Answer:

If you ask developers with more than 10+ years of experience you might find most of them glued into vim and the secret powers of the command line. But in today's scenario, we can't expect to work on vim. In fact, I only know 3 main command in vim which helps me to work - :wq, \find-the-keyword, dd . That brings us to the main topic, IDEs in development. I am a big fan of Jet Brains, whenever I pick a new language I don't have the struggle to google the best IDE for the given language, rather I would go to the JetBrains website and find the IDE.

• Pycharm for Python
• Webstrom for JS
• GoLand for GOLang
• IntelliJ for Java
• and so on.

We all can agree to the fact that introduction to docker into development has changed the whole developer experience. Now any developer can easily bring up a new tech stack in a matter of minutes. Right from bringing up a database, to a new coding language environment to anything and everything one requires for local development.

So now the question comes how to use docker with IDEs, specially WebStorm. This is the question I stumbled upon, recently when I join my new company, and we were using SailJS for the backend, and we did have docker setup for production, but not for local development. I took up the task to migrate our local setup to docker to ease the initial development environment. Well, that was easy, all I needed was to create a docker-compose file and the dockerfile with the steps required to set up the environment with all the services. But nothing is easy until you get your hands dirty with coding. Soon I realized Webstorm was not able to detect the installed packages and also I was not able to run the application in debug mode. Though I solved one problem of the initial setup of the development environment, I introduce another, now we didn't have the debugger support.

I started to go through the documentation of WebStorm to figure out a solution, followed the exact steps mentioned in the guide below. But nothing seemed to work.

After hours of searching into the guide mentioned by WebStorm and numerous blogs, I stumbled upon a StackOverflow question. And we all know what is the worst nightmare for a developer - To find the exact question in StackOverflow which you are looking for but it remains unanswered for years.

I posted a comment on the question, and my worst fear came alive, the issue was still not resolved. :(

Now I had only 2 options, I switch my IDE or drop the docker idea. Both were unacceptable to me. Somehow later that day I came across a small support ticket in JetBrains, which mentioned something about /opt/project, with almost no hopes thought of trying it out.

Voila!!! It worked! So the trick was to make sure that the project path was /opt/project not anything else. I don't know why JetBrains would not add this one line in their documentation to make our life easier. :(

Here is an example of DockerFile you should use. Do make sure to mount the code inside /opt/project else WebStorm is not able to find the node modules. And you have to work using only the command-line.

# pull official base image
FROM node:12.11-buster

# set working directory
# We select this directory because webstorm requires this path for remote debugging setup.
WORKDIR /opt/project

# Docker images are created layer by layer, so when we are just coping package.json files it would not get build everytime
# we do any update on the files apart from package.json. It only gets rebuild when we add a new package or we change something on the package.json file.
# We generally create the package required layer first and then load the code file, so that the build get triggered only when we do any update on requirements.
# If we copy the whole codebase then the image will have to rebuild always since the layer on which we are loading the files updates on every code update.
COPY ./package.json ./package-lock.json /opt/project/

RUN npm install
RUN npm install -g nodemon

Here is an example of docker-compose.yaml

version: "3.7"
services:
  node-service:
    build:
      dockerfile: ./Dockerfile.local
      context: ./
    command: nodemon app.js
    volumes:
      - ./:/opt/project
      - /opt/project/node_modules/
    ports:
      - 6060:6060
    environment:
      - RUN_ENV=docker_dev_env

  mysql:
    image: mysql:5.7
    ports:
      - 3306:3306
    volumes:
      - ./api/schema.sql:/docker-entrypoint-initdb.d/schema.sql
    environment:
      - MYSQL_USER=root
      - MYSQL_ALLOW_EMPTY_PASSWORD=true
      - MYSQL_DATABASE=db_test