Initial MonoRepo With Express

Help
1

I am just trying to setup a monorepo with express that actual can deploy to Vercel. Next, I will setup a module for gui, another for native, another for shared, and others later. Obviously shared will be shared across all, but presently I am only working on the API and Vercel doesn’t appear to be working correctly.

vercel dev

  • Expected: When I run vercel dev from [root]/api, it should not fail.
  • Actual: fails either with [root]/api/api not found error (too many api) or yarn: not found (I’m not using yarn.

push to git

  • Expected: Hello world express application is runs.
  • Actual: The deployment is successful, but when I visit the page the raw application is served… i.e. I see js code instead of the hello world output of said code.

Vercel.json

{ "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/public/index.js" }] }

Project

image
image3155×649 189 KB

Am I supposed to be using turbo repo or something for this? Thought this was supposed to be easy with vercel, I’ve had no success. Is there a better way? None of the templates looked ideal.

2

Hi, @gunslingor-gmailcom! Welcome to the Vercel Community :raised_hands:

Thanks for your patience with this. Did you manage to figure out a solution?

It looks like you could make some improvements to your project structure. Perhaps something like:

 [root][root]
├── api
│   ├── index.js (your Express app)
│   └── package.json (dependencies for your API)
├── vercel.json
└── package.json (root package.json for the monorepo)

Your vercel.json file should look something like:

 {{
  "version": 2,
  "builds": [
    {
      "src": "api/index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "api/index.js"
    }
  ]
}

This configuration tells Vercel to use the Node.js runtime for your API and routes all requests to your Express app.

Don’t forget to make sure your Express app in api/index.js is set up correctly. For example:

 const express = require('express');const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

// Important: listen on `process.env.PORT` for Vercel
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

module.exports = app;

Other issues you ran into:

  1. Run vercel dev from the root of your project, not from the api directory. Make sure you have the Vercel CLI installed globally (npm i -g vercel).
  2. If you’re not using Yarn, make sure your package.json files (both in the root and in the api directory) have a "type": "commonjs" field. This ensures that Node.js treats your files as CommonJS modules.
  3. The updated vercel.json configuration should resolve this issue. It properly routes requests to your Express app instead of serving static files.

To set up your monorepo for future expansion (GUI, native, shared modules), you can create additional directories at the root level:

 [root][root]
├── api
│   ├── index.js
│   └── package.json
├── gui
├── native
├── shared
├── vercel.json
└── package.json

You don’t necessarily need to use Turborepo for this setup, although it can be beneficial for larger monorepos. The current structure should work well with Vercel.

Let us know how you get on!