How to deploy the backend (hono) server on vercel?

[digoburigo]

When trying to deploy to Vercel it's building normally

But getting this type error after build

Tried a lot of different ways but nothing works.

References
honojs/hono#1256
vercel/examples#1213

[nktnet1]

hmm - the demo site (https://rtstack.nktnet.uk) only deploy the Web Frontend to vercel.

The backend server in the demo site uses Docker deployment to fly.io.

---

Regardless, I can reproduce this locally using vercel build:

It appears that vercel build runs into a lot of type errors - potentially due to not using @types/node definition of Request and Response (and thus request.headers or response.body breaks).

To hackily patch the type errors with as any, you can make the following changes:

click to view

diff --git a/apps/server/src/index.ts b/apps/server/src/index.ts
index 725fd4c..afd9d37 100644
--- a/apps/server/src/index.ts
+++ b/apps/server/src/index.ts
@@ -74,7 +74,7 @@ app.use(
   async (c, next) => {
     const { matched, response } = await api.handler(c.req.raw);
     if (matched) {
-      return c.newResponse(response.body, response);
+      return c.newResponse((response as any).body, response);
     }
 
     await next();
diff --git a/packages/api/src/server/index.ts b/packages/api/src/server/index.ts
index 51c42b7..c65bf3d 100644
--- a/packages/api/src/server/index.ts
+++ b/packages/api/src/server/index.ts
@@ -68,7 +68,7 @@ export const createApi = ({
         context: await createORPCContext({
           db,
           auth,
-          headers: request.headers,
+          headers: (request as any).headers,
         }),
       });
     },
diff --git a/packages/db/src/schemas/posts.ts b/packages/db/src/schemas/posts.ts
index 139baa6..cb9e3f4 100644
--- a/packages/db/src/schemas/posts.ts
+++ b/packages/db/src/schemas/posts.ts
@@ -5,8 +5,8 @@ import { user } from './auth';
 
 export const post = pgTable('post', (t) => ({
   id: t.uuid().primaryKey().defaultRandom(),
-  title: t.varchar({ length: 256 }).notNull(),
-  content: t.text().notNull(),
+  title: t.varchar({ length: 256 }).notNull() as any,
+  content: t.text().notNull() as any,
   createdAt: t
     .timestamp({ mode: 'string', withTimezone: true })
     .notNull()
@@ -22,5 +22,5 @@ export const CreatePostSchema = v.omit(
     title: v.pipe(v.string(), v.minLength(3), v.maxLength(256)),
     content: v.pipe(v.string(), v.minLength(5), v.maxLength(512)),
   }),
-  ['id', 'createdAt', 'createdBy'],
+  ['id', 'createdAt', 'createdBy'] as any,
 );

This will allow vercel build to succeed.

Naturally, you will get many runtime errors when deploying and running in production, but hopefully that helps with further investigation into the issue.

---

I've also reported this to vercel:

• https://community.vercel.com/t/hono-turborepo-typescript-errors-in-vercel-build/21970
• vercel build TS errors (hono/turborepo/drizzle) vercel/vercel#13892

[nktnet1]

@digoburigo I've done some investigation and with this commit here:

• 78fb75b

The command

vercel build

Should now compile without errors. More context on it here.

However, you will still get runtime errors - this is caused by:

• Hono app fails in production on Vercel vercel/next.js#81346
• Vercel serverless functions doesn't seem to support turborepo internal packages vercel/turborepo#4631
• https://community.vercel.com/t/i-cant-seem-to-import-local-modules/1270

[nktnet1]

Workaround Overview

Use Vercel Primitives in combination with prebuilt deployment.

This means we will be building the backend server application outside of Vercel (e.g. on your local machine or using GitHub Actions/another CI tool), rather than linking a git repository directly to the Vercel project.

A potential benefit is that only the transpiled code is sent to Vercel instead of the full source code.

I've added an example of the vercel-server-deploy branch - most of the logic is encapsulated in the ./deploy-vercel-server.sh shell script.

Other changes are:

• for environment variables, PUBLIC_SERVER_URL will fallback to VERCEL_URL
• for tsdown, use the entry point src/index.ts (the exported hono app, which is compatible with serverless)
  • instead of src/server.ts in the main branch which imports and run the app using the NodeJS runtime for Docker Deployment

Deployment Steps Walkthrough

1. Clone rt-stack and use the branch vercel-server-deploy:

   git clone https://github.com/nktnet1/rt-stack
   git switch vercel-server-deploy
   

2. Install Vercel CLI globally

   corepack enable pnpm
   pnpm i -g vercel

3. Create a new Vercel project, e.g. rt-stack-hono-server

   vercel project add rt-stack-hono-server

4. Open the project in vercel and add the following environment variables:

   SERVER_AUTH_SECRET=9041e08e6594c97126b1e3fcd5a7b2db
   SERVER_POSTGRES_URL=postgres://postgres:postgres@localhost:5432/postgres
   PUBLIC_SERVER_URL=https://rt-stack-hono-server.vercel.app
   PUBLIC_SERVER_API_PATH=/api
   PUBLIC_WEB_URL=https://rtstack.nktnet.uk

   • NOTE: make sure to replace the secrets and URLs above with appropriate values
   • In this branch, PUBLIC_SERVER_URL was set to fall back to https://${VERCEL_URL} if not defined (see Vercel > System Environment Variables)
   • you may also want to set up a Postgres database, but I'll omit that step here since we don't need it to confirm a successful deployment

5. Deploy to vercel using the given script:

   sh ./deploy-vercel-server.sh

   When prompted for whether you want to link a project, type y (yes) and type in your project name (e.g. rt-stack-hono-server)

   

6. If you've set up all of your environment variable correctly, the hono server should be up and running with the following preview:

   

---

Solution was inspired by an answer provided on Stackoverflow RE: How do I configure Vercel to treat a compiled index.js as a serverless function instead of a static file?