Best practice for multi-module Typescript projects
Hi, I'm looking for guidance on how to structure multi-module projects using Typescript. I often have projects where there is a react web project, a node server project and a common project with code shared by the front and back end. At the moment I am transpiling the common project and including it using relative path in the `package.json` for the two other projects. To make this work I need to run a Typescript 'watch' command on the common project, and quite often IDEA doesn't correctly update the index when sources in the common project change -- my IDE turns red even though things are running correctly!
I've looked into this a few times over the years including looking at lerna but never found a good solution. Perhaps someone has a sample github project they are willing to point me at. Thanks
Please sign in to leave a comment.
>quite often IDEA doesn't correctly update the index when sources in the common project change -- my IDE turns red even though things are running correctly!
Please could you elaborate on this? what kind of errors can you see (the compiler or inspection errors)? what do you have to do to fix the issue? Steps to repeat/sample project would be helpful
I notice this mainly when I move functions around in the common project (from one sub-module to another). Even though files are correctly re-transpiled by the watch process and I can "follow" the trail in the IDE and see that functions have been moved in the .js and .t.ds files, references show in red in the editor. Issue has gone for now and I did not check the Typescript compile window so am not sure if the errors appear there (I suspect they do).
I have been trying to set up a small repro project for you but I cannot seem to make the issue happen on demand!
Another issue that might somehow be related is that when I type a symbol name in, for example, the frontend project (CRA) and use the auto-correct "Add import statement", I get a line like this in my imports...
My common project (bgh-common in this case) has a 'dist' directory for transpiled output but doesn't have 'dist/src' - this directory does not exist! I have to manually change this to just be "bgh-common" (as you can see in line above).
This issue doesn't happen in my small repro project so there must be something odd in my production project.
Unfortunately I can hardly help unless I have a project the issue can be repeated with:(
Have you've found any solution? I think clean architecture might be the answer. Like have your common project at the domain layer, and the nodejs/typescript at the presentation layer?