Problems with `api/index.js` source code when deploying Express app

Summary

Hello, I’m trying to deploy a server of a particular package in monorepo using vercel. When I test it with vercel dev in my local environment, my api work fine. But after I deploy the production, when I go to the deployed link, I always see only the api/index.js source code. And Runtime Log doesn’t show anything. Any tips for solving it?

Example

Deploy Link : https://all-about-dog-server.vercel.app/

Steps to Reproduce

I have configured the server code as below:

  1. vercel.json
{ "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/api" }] }
  1. package.json
  • I understand that Vercel’s deployment path should be under the /api directory. So I wrote a vercel-build script to bundle the source code of the app directory and store it in the api directory.
    => Could there be a problem with this method?
{
  "name": "@all-about-som/server",
  "version": "1.0.0",
  "description": "All about dog server",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec ts-node -r tsconfig-paths/register app/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsup app --clean --format cjs,esm --env.NODE_ENV production",
    "vercel-build": "tsup app --clean --format cjs --env.NODE_ENV production --env.DEPLOYMENT_ENV vercel --out-dir api"
  },
  1. mongo db Setting
  • I confirmed that the link between MongoDB Atlas and Vercel is also working well.
    • IP Address set to 0.0.0.0/0
    • MongoDB Atlas is linked to Vercel’s Integrations
    • MONGODB_URI is set in Vercel’s Environment Variables (id, pw match)
  1. Vercel Build & Development Settings
  • Output Directory : .

Fortunately, since it is a private project, I share the entire code as below:

Github : younyikim-playground/apps/all-about-som/server at main · younyikim/younyikim-playground · GitHub

Since there is no explanation in English on how to execute the project, I leave a separate guide here.

  • You can go to Project Root, clone the repository, install dependency through pnpm i and run it.
  • The project can be accessed directly from Root using the pnpm all-about-some:server command.
    • ex) pnpm all-about-som:server start, pnpm all-about-som:server vercel dev
    • Alternatively, you can access it by going directly to cd apps/all-about-some/server.

Any ideas?

Thanks for sharing these details! Express.js apps need to be modified slightly to adapt to a serverless environment. I recommend following the Using Express.js with Vercel guide for the structure of your server project. Switching from an /app directory to an /api directory will indicate the index.ts file is the a serverless function instead of a static file.

You can see what Serverless Functions were detected for a deployment from the dashboard. Go to the overview page for the deployment, then expand the Deployment Summary, and expand Functions to see the paths for all functions that were created. If none are shown, then there were none detected when the site was building.

You can also check the structure of the deployed site by navigating over to the Source tab, then toggling over to the Output file tree. Symbols next to the file names indicate whether something is a static file, a serverless function, or middleware.

I hope it will help those who are experiencing similar problems and leave my solution.

First of all, as mentioned in the above comment, I changed the app directory to the api directory. And, moving the /routes directory from root to api solved the problem. (/routes/api/routes)

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.