Separating package.json for frontend and backend with shared code

Question

I have a project that has a separate frontend(webpack) and backend(express/mongodb) which I would like to separate the package.json while being about to share some logic/utility code between them. How can I organize my file structure such that I could separate their dependencies appropriately.

Right now this is my file structure which both the frontend and backend share the same node_modules

app
|
| - frontend
|    | - index.js
|    | - src
|
| - backend
|    | - index.js
|    | - models
|    | - api
|    | - statics (webpack builds into here)
|
| - lib
|    | - logic here (may require npm dependency)
| 
|- package.json
|- webpack.config.js

I could easily separate them into 2 npm projects if they did not both require the lib directory, but that would essentially mean I have to copy the code to both folders. Is there a better way to achieve this?

Answer 1

I ended up turning my project into a monorepo and uses https://lernajs.io/ to connect them. Having each folder as a separate npm project.

The downside I found is that package installation process (npm install) takes much longer as each sub-project much be installed separately, many of which contains duplicate packages.