I have a small personal project which I'm developing in one single repo.

The backend is a Node.js server and the front is a Vue.js application.

I want both of them to share the same package.json

The only reason I want to do that is because I want to use the "scripts: {}" of that one common package.json to execute commands that refer to either backend or frontend modules.

Is this possible ?

Would this structure make sense and work:

- my-project
  - front
    - {Vue.js files & folders}
  - back
    - {files & folders for my server}
  - package.json (containining dependencies and yarn scripts for both front and back)

But does that also mean that when e.g. Vite/Vue compiles the .js files for production it will also "accidentally" include irrelevant node_modules that were actually there only for the backend to use?

CodePudding user response：

Yes this is possible and in fact quite common. This usage pattern is often called the monorepo in the JS community. The usual way of doing it is exactly the folder structure you describe.

Most frontend frameworks including Vue are designed to handle this however most of the usual tools assume your frontend is separate from your backend. You may need to manually configure your frontend framework to do this.

Some things to consider:

• Frontend development server (eg. webpack) may need to be configured to search for files in a subdirectory (eg. "frontend").
• You may want to install all frontend modules as --save--dev so they can be skipped when you deploy your backend.

There are of course additional advantages to this beyond shared package.json file (thus, a common npm run workflow). One advantage is that you can have shared libraries between frontend and backend. I usually have this structure:

├ .git
├ package.json
├ frontend/         - frontend project
│    ├ src/         - source files
│    └ public/
├ backend/          - backend project
│    ├ controllers/ - endpoint modules
│    └ lib/         - backend models/modules
└ lib/              - shared modules

In my package.json I usually have at least something like this:

{
  "scripts": [
    "frontend": "cd frontend; webpack serve",
    "backend": "cd backend; nodemon main.js"
  ]
}

The npm commands even look natural:

npm run backend
npm run frontend

I normally use a javascript script to run both backend and frontend together to reduce issues for my Windows using colleagues. So my start script is usually just:

{
  "scripts": [
    "start": "node ./scripts/start.js"
  ]
}

.. however writing such start scripts will more than double the length of this answer (which is already quite long as is) so I leave it to your creativity.

CodePudding user response：

No, Both Applications (FE, BE) should have independent package.json files. if you want to avoid two node_module files (due to large app bundle size), use mono repo. npm or yarn build should build both application.

or use Docker via docker-compose up script, build and run both apps from single cmd.