Deploying Hono Js App on Vercel

Hono is an ultrafast web framework for the edge and it's amazing. It's simple as express and the DX is mind-blowing. And now you can also serve JSX with it 🤯. Anyone in the industry for long enough knows that a setup like this can be quite tedious to manage and maintain. I might sound biased for Hono, and that's true, I love it ❤️.

While working on a project using Hono, I saw the need for a rate limiter, which was not present in the ecosystem. So I build one, hono-rate-limiter

GitHub - github.com/rhinobase/hono-rate-limiter
NPM - npmjs.com/package/hono-rate-limiter

As with every good project, you need a website that hosts examples to better understand your project. And I did make one, which you can check out here - hono-rate-limiter.vercel.app

Building the application was easy, I built everything in just 3 days (including the library, tests, and the example) but deploying it took me more than 3 days. The main reasons were -

1. Lack of documentation for deploying on vercel.
2. Pitfalls for deploying Hono on vercel.
3. Problem with getting the correct config for my library (i.e. getting the IP address).

Lack of Documentation

Hono does have a template application for Vercel, but in my case, my requirements were different (aren't they always 😅). I was working in a monorepo (using nx) because I wanted to manage my libs, tests, and examples all together in a single place, instead of having different repos.

For this, as there was no guide to do it, I had to set up a JS project and then add Hono and Vercel stuff from scratch in my monorepo. Hono was simple as there was not that much to configure but figuring out Vercel was tedious. Vercel as of right now doesn't have a template to deploy your Hono Js project, so you will need to set up all the things from scratch. Such a thing was the root dir of the project, which I needed to set up as the root of the example folder /apps/sandbox.

In my example, I was having a home page built using Hono's JSX so in place of hosting it on /api, I wanted to host it on /.

So to overcome this, you need some understanding of how Vercel deploys your application when using the vercel.json file.

This was my Vercel config file to host it on / instead of /api.

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

Pitfalls

Vercel doesn't have a template to deploy your Hono app, so there are some hops you have to go through.

For example, setting up env variables in your Vercel project NODEJS_HELPERS=0, I came to this from this conversation on Github. I am still not sure, why setting this up makes the difference, if anyone of you reading this does, do let us know in the comments.

My Config Issues

So after all these issues, I was able to deploy my application on Vercel 👍🏼. Everything was working, I double-checked it and finally deployed it. I tweeted about it on X

And then something weird happened, people who were coming on the weren't getting uniquely identified from their IP. I checked and figured that I was not getting their IP. So I branched out and checked the example again, It was working perfectly as intended.

After hours of debugging, it turned out that the headers I was getting on the branch deployment were different from the ones on the production. I corrected the header variable name, and it started working.

After the tweet it took me 4 - 5 hours to release, there was an issue and around 2 hours to resolve it. So I did lose the peak traffic time on the app when everyone wanted to try it out. And the package didn't receive the attention it was capable of.

Conclusion

I learned a lot and it was stressful and fun, especially contributing to something I love working with. If you are interested try out hono-rate-limiter and let me know if you find any bugs or have any feature requests. I will be more than happy to connect with you.

Hopefully, this might help someone, who wants to deploy a Honojs app on Vercel.

If you want to check out my lib from which I got all my learnings, here are the links -

hono-rate-limiter

GitHub - github.com/rhinobase/hono-rate-limiter
NPM - npmjs.com/package/hono-rate-limiter

Do let me know what you think about it and how we can boost the community in the future. Do show us your support by giving us a star and for more content like this in the future.