Monorepo hosting

[leegee]

I’m new to Vercel, and not sure if what I seek to do can indeed be done…

I have a Typescript npm monorepo that contains packages for a TS React SPA packaged by Vite, some Vercel serverless functions, as well as packages for shared types and configuration, and some more that are not relevant.

Is it possible for a Vercel project to run an npm build command for the whole project whilst specifying different locations for the React app and the SF package?

My project works locally with vercel dev, but I can’t see how to integrate that with the Project Dashboard:

{
  "version": 2,

  "build": {
    "env": {
      "NODE_ENV": "production",
      "VITE_HTTP_PORT": 3000,
      "VITE_ENDPOINT_SEARCH": "/api/search",
      "VITE_ENDPOINT_DETAILS": "/api/details",
      "DATABASE_URL": "postgres://username:password@localhost:1234/dbname"
    },
    "commands": {
      "build": "cd packages/client && npm run build"
    }
  },

  "builds": [
    {
      "src": "packages/client/dist/**/*",
      "use": "@vercel/static"
    },

    {
      "src": "packages/vercel/build/**/*",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/search",
      "dest": "packages/vercel/build/search.js"
    },

    {
      "src": "/api/hello",
      "dest": "packages/vercel/build/hello.js"
    },

    {
      "src": "/(.*)",
      "dest": "packages/client/dist/$1"
    }
  ]
}

[amyegan]

Hey @leegee! Vercel has some documentation on using monorepos. It usually helps people get their monorepo projects deployed. Can you give that a try and let me know if it works for you?

Using Monorepos

[leegee]

Thank you very much for the link to the docs, which gives me the understand that I need to have a separate project for each package in the monorepo that I wish to deploy, which makes perfect sense.

My root package.json has a devDependency on rimraf, and the Vercel build says sh: line 1: rimraf: command not found, despite rimraf being listed in the package.json devDependencies.

rimraf is not listed in the package.json of the monorepo package being installed, because that would seem to be best practice, but perhaps it is a requirement of Vercel…?

Thanks in anticipation of any pointers,
Lee

[amyegan]

Thanks for your patience. Did you find a solution?

If not, a minimal reproducible example would help me see what you see so I can help you debug.

[leegee]

I am making progress, thanks.

Currently I am trying to find a way to have my npm monorepo share dependencies from node_modules on Vercel as it does locally.

That is, the root package.json declares dependencies and they are housed in node_modules/, but it seems the way I am (mis-) configuring vercel.json means that I would have to redeclare dependencies in every package.json, which makes me think I am doing something wrong!

{
  "version": 2,

  "build": {
    "env": {
      "NODE_ENV": "production",
      "VITE_HTTP_PORT": "3000",
      "VITE_ENDPOINT_SEARCH": "/api/search",
      "VITE_ENDPOINT_DETAILS": "/api/details",
      "DATABASE_URL": "postgres://testac:testpassword@localhost:5432/ufo"
    }
  },

  "builds": [
    {
      "src": "packages/client/dist/**/*",
      "use": "@vercel/static"
    },

    {
      "src": "packages/vercel/build/**/*",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/search",
      "dest": "packages/vercel/build/search.js"
    },

    {
      "src": "/api/hello",
      "dest": "packages/vercel/build/hello.js"
    },

    {
      "src": "/(.*)",
      "dest": "packages/client/dist/$1"
    }
  ]
}

[leegee]

That is, I’ve followed the instructions in the link kindly provided above, but although I see that dependencies are installed by the root package.json, they are not found the sub-package when it builds in packages/client.

[neerajkumar61]

@leegee

Did you try setting a base directory and running npm run build (for example) you might try leaving the base directory empty and setting the build command to (for example)

cd path/to/app && npm run build

and setting the publish directory to path/to/app/BUILD there BUILD is the name of the output directory (e.g build, or dist.)

The best way would still be to create multiple package.json in the entire repo. Then when you actually start the build, either:

1. cp ../package.json ./package.json && npm i && npm run build OR
2. cd ../ && npm i && cd ./sub-folder/ && npm run build

Basically, you will have to change your command to manually install your packages. So you can either do that by copying your package.json to your cwd or cd into the parent directory, install packages, cd back into your project directory and run the build.

Give it a try and let me know if it helps.

[leegee]

Thanks for your reply.

My conclusion is that I do not think Vercel supports npm monorepos, so I’m looking at using Turborepo now, though the Vercel docs are not clear on its use, that is another ticket…!

Thanks again, both.