PyCharm and WebStorm projects in same directory

I'm working on an app with Django as a backend and Vue as a frontend, and therefore using the 2 IDEs seperately for their specific features.  I have my Django project in the root and manage git and docker through PyCharm with the Webstorm project being the "frontend" sub-directory.  So the directory structure is something like this:

project root
- .git
- .idea (PyCharm)
- backend
- docker-compose.yml
- docker_files
+ frontend
  - .idea (WebStorm)

This makes it so I have to have PyCharm running if I wish to use the IDE for git and/or docker.  I tried using the project root for WebStorm, but the configs interfere with each other.  Is there a way to do this so I can have 2 IDEs having their project root in the same directory?


Idea-based IDEs (PHPStorm, WebStorm, PyCharm, IDEA, etc) have the same project format (.idea) but different settings/module types that aren't always compatible; in particular, all PyCharm projects have "PYTHON_MODULE" type, whereas in WebStorm all projects are of "WEB_MODULE" type, WebStorm has no providers to handle Python modules. As a result, you see errors about unknown module type when opening your project folder in different IDE.

If you like to work on the same sources in different IDEs, I'd suggest sharing the sources folder(s) but keeping the .idea folders separated: just create a new empty WebStorm project in preferred WebStorm-specific location and add your shared sources root as additional content root to it in Settings | Directories, Add Content root. Same thing should be done for PyCharm. As a result, you will have IDE-specific .idea folders and shared sources


Note that PyCharm Professional includes all the features available in WebStorm. All you can do in WebStorm you can do equally well in PyCharm, so you don't actually need using 2 IDEs


I don't want to work on the same sources in different IDEs.  I want to be able to work on the frontend in WebStorm and backend in PyCharm, but also be able to manage git and docker from either IDE.

For example, currently if I want to review and commit code I have to do so through PyCharm since there occasionally changes outside the "frontend" directory which is the project root for WebStorm.

If use the project root as the WebStorm Project then it sees all the directories configured in PyCharm(backend as source root, backend/templates as template directory, etc.) and changing that in WebStorm changes it in the .idea directory and therefore also in PyCharm, so then PyCharm would think that "frontend/src" was the source root.


As I wrote, sharing the same .idea folder between IDEs is not recommended as each of them will make breaking changes to .idea files. I can only suggest storing the .idea folder outside of the project root



I had the same situation. 
The solution has worked to me.

You have one git repo for both back & front ends.
Both projects placed on one root directory.
Project name: prj
First directory for back-end project: “prj”
Second directory for front-end project: “prj-front”
Both of these folders are same, and cloned from project repo.

Back-end directory: “django”
Front-end directory: “vuejs”

→prj (dir)
→→django (dir)
→→vuejs (dir)

→prj-front (dir)
→→django (dir)
→→vuejs (dir)

Prepare your dev environment like this:
First directory is considered to work with your back-end code, git, docker, and etc, except front-end code (you will open it by Pycharm).
Second directory is considered only for making changes on the front-end code (you will open it by WebStorm).

Steps (truly not complicated):
Step 1: delete “vuejs” directory from second directory.
Step 2: make a symbolic-link of "prj/vuejs” from the first directory into second directory.

Symlink command:
cd path-to-prj-front-dir
ln -s path-to-prj-dir/vuejs .

Final structure for “prj-front” directory will be:
→ prj-front (dir)
→→ vuejs (linked-dir > prj/vuejs)


Please sign in to leave a comment.