如何从 vercel 中的 static html 文件调用 expressjs 端点

Question

i have a very simple app with 1 /api/index.js server and 1 index.html file at the root.

index.js has a route app.get("/api/mystuff", () => {...})

index.html calls pings this route from a <script> with:

const result = await fetch("/api/mystuff")

all of this works locally, but when deployed to Vercel i get hit with a 404 from my request. the endpoint it's hitting is https://myvercelapp.vercel.app/api/mystuff and i'm getting a The page could not be found NOT_FOUND error. I don't know how to get this working, can someone steer me in the right direction?

thanks!

Answer 1

Based on the used tags I'm understanding you are using express with node.js.

Without seeing any of your code, I am guessing either your vercel.json isn't setup correctly (the guide explains this) or your index.js isn't setup correctly.

---

Vercel Guide on using Express

In that case, Vercel has a great guide on Using Express.js with Vercel .

In vercel's guide they have a section addressing using Standalone Express .

In this guide they use an index.js inside of an api folder.

The index.js file:

const app = require('express')();
const { v4 } = require('uuid');

app.get('/api', (req, res) => {
  const path = `/api/item/${v4()}`;
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate');
  res.end(`Hello! Go to item: <a href="${path}">${path}</a>`);
});

app.get('/api/item/:slug', (req, res) => {
  const { slug } = req.params;
  res.end(`Item: ${slug}`);
});

module.exports = app;

and the vercel.json which is what makes the whole project work.

{
  "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
}

And finally, Adding a Public Directory which may explain more on how you can properly use Vercel with Express.

---

The Problem

The reason I assume that it's the vercel.json is the problem is due it working locally and not on Vercel. A good way to test this locally is using vercel dev .

---

Working Example

I've created a public example which may help you. Please check https://github.com/Crispy-Cream/vercel-with-express for the source code example

and the public website https://vercel-with-express.vercel.app/api