Debug angular in webstorm how to#
Debug angular in webstorm update#
Debug angular in webstorm code#

# 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.ĬOPY.

Debug angular in webstorm update#

# 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. It only gets rebuild when we add a new package or we change something on the package.json file. # we do any update on the files apart from package.json. # Docker images are created layer by layer, so when we are just coping package.json files it would not get build everytime # We select this directory because webstorm requires this path for remote debugging setup. And you have to work using only the command-line. Do make sure to mount the code inside /opt/project else WebStorm is not able to find the node modules. Here is an example of DockerFile you should use. I don't know why JetBrains would not add this one line in their documentation to make our life easier.

Voila!!! It worked! So the trick was to make sure that the project path was /opt/project not anything else. 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. Now I had only 2 options, I switch my IDE or drop the docker idea. I posted a comment on the question, and my worst fear came alive, the issue was still not resolved. I started to go through the documentation of WebStorm to figure out a solution, followed the exact steps mentioned in the guide below. Though I solved one problem of the initial setup of the development environment, I introduce another, now we didn't have the debugger support. 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. But nothing is easy until you get your hands dirty with coding. 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.

I took up the task to migrate our local setup to docker to ease the initial development environment. 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.

Debug angular in webstorm how to#

So now the question comes how to use docker with IDEs, specially WebStorm. Right from bringing up a database, to a new coding language environment to anything and everything one requires for local development.

Now any developer can easily bring up a new tech stack in a matter of minutes. We all can agree to the fact that introduction to docker into development has changed the whole developer experience. 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. That brings us to the main topic, IDEs in development. In fact, I only know 3 main command in vim which helps me to work - :wq, ind-the-keyword, dd. But in today's scenario, we can't expect to work on vim. 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. Unfortunately, it is not well documented, and also no way to update the path as of now. 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.