CODEWITHSUNDEEP
node.jsvue.jsyarnpkgpackage.json
Kawd
Kawd

Reputation: 4450

Can the frontend and backend share the same package.json?

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?

UPDATE: I tried it and it's pretty clean and straightforward and works fine. I'm posting this here in case anyone is interested:

- /root
  - /back (contains server files & folders)
  - /front (contains Vue.js files & folders)
  - package.json
  - .eslintrc.cjs
  - .gitignore
  - vite.config.js
  - yarn.lock

// contents of package.json
{
  ......,
  ...,
  "type": "module",
  "scripts": {
    "back:start": "nodemon --experimental-modules --es-module-specifier-resolution=node ./back/server.js",
    "front:start": "vite",
    "front:build": "vite build",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "start": "yarn front:build && yarn back:start"
  },
  "dependencies": {
    .....,
    ...
  },
  "nodemonConfig": {
    "ignore": [...]
  },
  "engines": {
    "node": "^16.14.0"
  }
}

I'm deploying the above on Heroku as is and Heroku simply calls yarn start and the app is built and deployed. (You'll notice I have no "devDependencies" and that's because Heroku ignores everything under "devDependencies", including vite)

Upvotes: 15

Views: 11073

Answers (1)

slebetman
slebetman

Reputation: 113896

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.

Upvotes: 14

Related Questions