Shared files in Server and Client JS

I have developed client side and server side library for several of my projects and I want to use tha main copy of them in several of my projects. The problem is unlike Java JS depends on path.

So I decided to put all projects and libraries in one project so refactoring libraries affects all projects,  for NodeJs modules it's possible to use root library directly although path becomes so ugly, but for client side it get so confusing because imports become like this "../../../../lib/file.js", so I decided to add required symlink from project sub directories to libraries folder. But there are several problems:

  1. Webstorm treats them as a copy not just a link and suggest adding the import path from all of them.
  2. If I exclude the symlinks Webstorm will add import path from library several directory up instead of symlink.
  3. If I exclude lib directory refactoring is broken.

There must be a mechanism in WebStorm to work with shared files like Java.





Typically such applications are set up as monorepos - you can try yarn workspaces, for example:


I looked at yarn workspace, It just add another layer of complexity to thing and probably won't solve my problem because I think this must be handled in IDE. What I want is something like Java Gradle packages. When I was developing in Intellij for android I could define a library module in Gradle and link all other libraries  to that one and everything works fine, but damn JS use path resolution.

I think there must be a way in WebStorm to define several project and library module and define dependency with path mappings which automatically add symlink (so Node can work). This way it would much be easier to work with big projects.


i want to re-suggest yarn workspaces. you can define a name for each js project and link between them by that name. so instead of `import {Component} from "../../../../lib/file.js"` you would `import {Component} from "@client/fun-components"`


Please sign in to leave a comment.