Build a documented / type-safe API with hono, drizzle, zod, OpenAPI and scalar

[@roberth8737]

These walkthroughs from CJ are pure gold - he provides awesome tidbits and insights that go beyond the basics.🔥

[@ThomasLockney]

First time I can recall in a long while sitting all the way through 2+ hours of a tutorial. Very nice progression through the process.

[@ddrweb_]

Same for me, just eye candy all around

[@syntaxfm]

00:00 Intro 01:10 Quick Code Tour 02:51 stoker - a hono library 03:19 hono-open-api-starter 04:00 generate hono app 04:50 eslint / editor settings setup 07:11 typescript import alias 07:41 install @hono/zod-openapi 08:10 extract hono app to own file 09:43 notFound handler 11:30 onError handler 13:08 logger middleware 13:52 structured logging with pino and hono-pino 15:46 hono-pino pretty logs and customization 20:23 typesafe hono AppBindings 21:56 pino log level setting 23:35 dotenv setup 25:30 typesafe env with zod 32:25 serveEmojiFavicon middleware 33:33 clean up app creation 35:36 hono strict mode 36:16 configure openapi doc endpoint 38:36 createRouter helper 39:33 create index route 42:42 mount index router on application 44:02 open api overview 45:00 scalar documentation setup 46:30 package.json type module 47:00 scalar customization 49:21 OpenAPIHono defaultHook 50:48 stoker openapi helpers 54:01 group route definitions with tags 54:34 tasks router setup 55:32 tasks list route 57:22 tasks list handler 57:45 RouteHandler type setup 59:48 AppRouteHandler custom type 01:01:21 register tasks list route and handler 01:02:32 tasks route tags 01:02:55 drizzle setup 01:03:50 DATABASE_URL env setup 01:04:52 zod superRefine for better errors 01:05:42 setup drizzle schema 01:08:49 drizzle-kit config setup 01:09:59 generate drizzle migrations 01:10:51 using drizzle-kit studio 01:11:27 update schema date logic 01:12:44 query db from tasks list handler 01:14:28 drizzle-zod setup 01:16:06 tasks create route 01:20:01 tasks create handler 01:25:06 stoker createErrorSchema helper 01:27:46 customize drizzle-zod schema 01:29:37 tasks getOne route 01:33:17 tasks getOne handler 01:38:37 tasks patch route 01:44:08 tasks patch handler 01:47:41 tasks remove route 01:49:17 tasks remove handler 01:51:15 test setup / helpers with vitest 01:59:23 typed test client helper 02:05:33 full test setup walkthrough 02:07:20 hono RPC client type 02:09:57 hono client example 02:11:03 open api client generators 02:11:40 runtime and deployment considerations 02:12:17 Thanks!

[@prashlovessamosa]

CJ isn't pregnant but always delivers thanks to the CJ banger after banger.

[@jkbrodotdev]

Damn, Syntax made the right move bringing CJ to make content. He never disappoints. I remember years ago seeing a video by CJ as a sophomore CS student who wasn’t interested in programming and CS. CJ delivered a video on building a twitter clone showing the entire stack of builing the frontend backend and deploying. This sparked my interest and to keep going in CS and pursue Full stack web development. Now I’m a striving senior software developer who is just in love with his job and building cool shit.

[@jitxhere]

CJ you're the goat. First the server management then Nextjs and now hono. So much helpful content. Just I have a small request: Optimising database queries. Can't thank you enough. Also thanks to Syntax team.

[@DanielChaves-d7v]

Can't describe how grateful I am for finding you on the surface. I am truly thankful.

[@AlexanderBelov-y8o]

The amount of information in this video is huge! I've never heard of Scalar until now. Awesome tool.

[@thejoltjoker]

Awesome tutorial! Would love to see a practical example of implementing the RPC client in a monorepo!

[@asadmehboob1300]

Yes please

[@andyvdr]

CJ speedrun but the detail is so good I watched it twice. These are gold.

[@m.alisetiapratama6932]

Never seen a more packed tutorial before, even better when you consider documentation as the essential piece of the APIs itself. And yeah, I need to see that deployment video soon 👀

[@sagitta4291]

What a truly awesome tutorial CJ, bravo! Looking forward to more hono deep dives :)

[@voyager_ll]

I love building with hono, but you just took it to another level, love the starter project. Thanks!

[@ryan_roga]

One segment that could be super helpful for those of us who have never done it before would be creating relations in this Drizzle ORM schema using drizzle-zod. I'll definitely go do some digging, but it was something I thought I should note. No complaints, though. This video was awesome.

[@syntaxfm]

Good point! I will cover more complex relations in a future video. Now that we have this base setup, will be much easier without having to cover everything else.

[@BigSouthProductions]

Excellent video. I'm not a new developer, but I am new to writing my own http server. There was a ton of stuff in here that I just didn't know about that would have been missing from my server without this video and having started my server based off this video will benefit me greatly in the future (less refactors). Thanks CJ.

[@starrynight72]

This is a pretty helpful tutorial and practice!!! Thanks for your every effort!! I'm also looking forward to a comprehensive tutorial video to show how to build a backend for a real-world project (and if it's a monorepo combined with client side then that will be better). I'm super excited to see how you build all those real-world projects in a clean and elegant way.

[@kamino6382]

This was insanely good! Coded everything together with you. Please, please, please add auth to this in another video .

[@codernerd7076]

CJ's videos are the best and most useful!

[@devyb-cc]

back when you are making videos about featherjs on your original channel, till now you are exploring hono, i still find your videos to be the one that makes me know a lot of cool tools. keep it up and thank you as always CJ 🤞

[@ahmedAltariqi]

Super cool content, I'm just really glad CJ joined syntax!

[@uhl7792]

It's amazing how you synced the Wes Bos voiceover for the entire video

[@SriRangaSaiPagala]

SO BASICALLY THIS IS THE GIGACHAD LEVEL OF WRITING A TODO APP API

[@JokersLaught]

Awesome tutorial. These are the golden nuggets I am looking for on KZbin 🙌🏼 Thank you!

[@Benjamin-Chavez]

This was incredible. Thanks CJ and syntax fam.

[@graphicevolutionHD]

Great tutorial, I learned a lot. I really liked how you did type safety, I wouldn't have guessed that.

[@BaraaMansor]

please make a video about a full auth system! am struggling with it, thanks so much for this vid, really helpful

[@emilzonjeronimo8898]

For large applications, this is the most powerful approach to work with hono. I am using Hono recently, for my use cases (personal projects) this is too verbose and over-engineered, but I am really excited to build a large application with this stack.

[@50mm_]

Oh man, this is right on time. I'm converting an api to hono this week.

[@ArihantAV]

Same! I just started on a hono drizzle cloudflare workers project too 😁

[@mocastello9253]

Very great and well made course! thank you so much for your whole effort. I would be more than appreciated and happy to see how that could work on vercel and to solve that node path issue with "@" soon. Awesome like alwasy all best! 🔥

[@ptlogger]

CJ always delivers. Top tutorial! Thanks

[@dalanxd]

Awesome video and template!!! Thanks, I learned a ton. I would love to see a follow up on how to build auth on top of it

[@rust2411]

First of all thanks CJ, this is perfect, you have one of the best content and the way you explain and teach is much appreciated. If you could give us a quick tutorial of how we can generate that sdk with typed client that would be nice, I typically don’t work with mono repos and am curious of how i can share that client with separate client-side applications.

[@madmaxdev]

This could be a mini framework on its own. Amazing video btw.

[@scalar-com]

hey @syntaxfm! we are such huge fans of ya'll, Hono, Zod, & ofc OpenAPI! so this was such an honor! let us know if there is anything we could do better for the integration or our docs 🫶

[@syntaxfm]

Thanks! Scalar has been great to work with, thanks for making it! A few suggestions for the docs, I'm just one guy so take this with a grain of salt, but this was my experience trying to figure out how to integrate scalar and customize the api-reference instance: If you click "read more about configuration" on this page, the page it links to no longer has that anchor: github.com/scalar/scalar/tree/main/packages/hono-api-reference If you scroll down on the page it links to and click "pass props to customize the API reference", it takes you here: github.com/scalar/scalar/blob/main/documentation/configuration.md - but that is only part of the available configuration, there is also themes / layout but that page is here (also, just realized "layout" is not mentioned on the configuration page but probably should be!) github.com/scalar/scalar/blob/main/documentation/themes.md It might be best to just link to this table from everywhere else so the themes / configuration sections are both discoverable: github.com/scalar/scalar/tree/main?tab=readme-ov-file#documentation Also, that table was hard to find from the scalar home page, when you click documentation in the top nav bar it takes you here: guides.scalar.com/scalar/introduction - I see lots of integration guides (needs a hono page 😉), but didn't find an easy way to get to that documentation table in the github readme. Lastly, it would be nice to see some sort of "kitchen sink" example for the api-reference instance with all of the default options being passed in. Something like I wrote here, but every option shown so its easier to know what is available to customize: github.com/w3cj/hono-open-api-starter/blob/main/src/lib/configure-open-api.ts#L18 Also, you might want to PR adding a dedicated scalar page in the hono examples page / sidebar, there is a link to swagger ui in the sidebar, but you have to search around a bit to find scalar: hono.dev/examples/ Scalar is listed over here (but I had trouble finding it before I finally remembered what it was called 😅, scalar is in my vocabulary now but before that there were several instances where I was like whats that thing that's cooler than swagger ui???): hono.dev/docs/middleware/third-party

[@scalar-com]

@@syntaxfm omg thanks so much for the list of feedback! going to answer inline ✨ > If you click "read more about configuration"... fixed :) > If you scroll down on the page it links to and click "pass props to customize the API reference", ah this is great feedback, im gunna go through and find all links and point to the table like you mentioned! > Also, that table was hard to find from the scalar home page ... OMG we need our hono guide there!! yes we have lots of docs to write, this is great feedback!! > Lastly, it would be nice to see some sort of "kitchen sink an absolutely incredible idea! we have lots of cool features, and we even allow custom headers/footers and we need to do a better job showcasing all the capabilities! > Also, you might want to PR adding a dedicated scalar page in the hono examples page adding that today 😎 > ... scalar is in my vocabulary now ...

[@ekekw930]

YES! Was waiting for this, thank you!

[@guillermofrasquetcasas2694]

This is amazing, I'll implement in my next job project, Thank you!!

[@dashdoom8452]

Thanks a ton, I was just planning on using this exact stack and this helped a lot

[@elibolonur]

Amazing content and amazing stuff, crystal clear explanation, THANK YOU CJ! I don't even remember when I watched a tutorial for 2 hours last time without getting bored :) Great stuff man, keep it up! I also got a question, if going to production with this setup, I would probably use Cloudflare zero trust to secure /doc, /reference /schema endpoints. What strategy would you have to secure these endpoints apart from using an external tool? Thanks!

[@princejoogie]

Best hono tutorial out there! Kudos to you CJ!

[@monsieurBoutte]

This is sooooo good! Nice work CJ 🎉

[@Sezar_SZ]

Amazing Video 🔥 Learned A LOT! Thank you CJ

[@Mundlurron]

awesome content. was wondering if you could extend this with complex queries(drizzle-zod) involving joins, because the types of those queries would be complex, but great content, i am thoroughly enjoying this

[@yiannis_p]

This was just phenomenal! Can’t believe the value we are getting for literary free. I have been using this very stack for 6 months but I still learned a tone! Thank you so much! One quick question, how come you didn’t use the T3 Env library? It would do the same .env setup but it’s all done by the folks who make t3! Just thought to share in case it’s useful!

[@syntaxfm]

Since we are only parsing the server environment variables here, the code is about the same with 1 less dependency. I do like t3 env when working in nextjs though.

[@yiannis_p]

@@syntaxfm ah makes sense!

[@not_cool_dev]

Great video! Keep an eye on valibot's 1.0 release as a zod alternative. Unless zod's up and coming v4.0 is 20x faster valibot is the best choice for those that care about efficiency

[@VK-xw6ky]

Would be great to Dockerize app in the end. Love the video!

[@Plaswin]

He's killing it. Awesome job.

[@Tysian]

Great tutorial CJ! Love it so much! ❤Are you planning on making some videos about Nitro & vinxi?

[@syntaxfm]

No plans right now, but I have played around with them a bit. Nitro is great and vinxi is being used by solid start and tanstack start! I was exposed to nitro through nuxt, I really like the simplicity, openapi support is still experimental, but I will give it a closer look when it goes stable. I spent some time trying out vinxi before making this video: kzbin.info/www/bejne/pqammHScfbKYpbs It is much lower level than people are used to, mainly reserved for framework authors.

[@Tysian]

@@syntaxfm Thanks! I'll definitely check it out :)

[@rahulsriram6295]

Amazing content CJ. Thank you!

[@winfredj9820]

what is the best way to do cron task with hono

[@Hhong_1120]

Thx i learn more for zode, hono and .env

[@essamal-mansouri2689]

Small correction: swagger is not based on open API, it's the other way around. Swagger is the ancestor

[@ErmandDurro]

Amazing video. Thanks a lot 🙏🏻

[@christianzorkler7939]

Nice work, nice tutorial 👍 Could you please create a follow-up tutorial on JWT authentication using Bearer tokens, with an example using Clerk as the provider?

[@St0rMsk]

I see new video from CJ i like 👍. Simple, videos are Great. Could you maybe a video on Remix, strater (like next) also add Hono for server and middleware

[@mistykal]

42:22 if I add another response (200 and 401) the type error no longer works. I can return any status code. how can i fix this ?

[@martinaarhusgregersen935]

Excellent video! I'm very curious to learn more about how to properly transpile typescript to javascript when aliases are in use. I've struggled with this in multiple codebases and never found a good solution. The official Typescript compiler seems to be painfully bad at making these conversions, even in projects that have nothing to do with NextJS (or Vercel).

[@tran_hai_dg]

Thank you for a great video. I hope you can make a video about how to deploy this application. 😄

[@ibnurasikh]

CJ has always blown my mind. The consistency in delivering complete, robust, end-to-end production-level work is outstanding! It's very underrated, your videos deserve more views on any channel or platform you're on. 🫡

[@valera518]

Amazing video! Are you planning to explore Hono with Auth.js maybe? So we have a full circle with Hono Auth.js and Next

[@syntaxfm]

Yes! I will cover this in a future video.

[@rokitgg]

Lovely stuff, CJ. Do you think it is actually possible to integrate tRPC in this kind of setup?

[@syntaxfm]

I haven't used it, but this project lets you document each of your trpc endpoints with openapi: github.com/jlalmes/trpc-openapi

[@2sam2]

38:38 What Chrome extension is this?

[@rtorcato]

no auth route example?

[@DevD-q9c]

Hey CJ want more and more honojs tutorial with real world project 🚀

[@ryan_roga]

Early in the video you say we'll "set it up so that if we choose to deploy this to somewhere else later one, we will be able to do that" but I'm not 100% sure it was shown where/how to change those settings later in the video. I'm thinking Vercel was an interesting option, as I plan to connect a Vercel Postgres db later on.

[@syntaxfm]

I touch on this at 02:11:40 - but I will cover this in a video soon. For instance, @hono/node-server/vercel exports a "handle" function - pass your hono app into this and set it as the main entry point for your vercel API - hono.dev/docs/getting-started/vercel#node-js

[@statuschannel8572]

how about authentication?

[@syntaxfm]

I will cover this in a future video.

[@statuschannel8572]

@@syntaxfm thank you, i find it helpful that hono provides basic auth and token based auth helpers. but a video about something advance like OAuth 2.0, MSAL would be really helpful, thanks

[@scvramella]

@@syntaxfm If you can also cover authorization (RBAC), it'd be great!

[@arthursiloka7437]

This is great content. Much appreciated. Can you do the same with expressjs, drizzle, zod, and postgres

[@boh419]

Great video , I would appreciate if you cover the topic of caching with a KV database like redis cheers!

[@AlbertoVasquez1]

What an amazing walkthru

[@sealone777]

This is very cool. I still got 1 more hour to go. I notice that response zod validation only occurs in 'compilation' time which is fine. However, say I have a third party API to get the response and I still want to run the validation in run time. How would I do this in a slick way? I can manually call the safeParse on a return method but curious how you would handle this. Thanks!

[@MichealEssuman-n9n]

Hey CJ, is there a better way to add Bear token authentication to the existing scalar documentation setup? I have been trying for a while now but I am still getting errors.

[@mogo6798]

Great content CJ

[@syntaxfm]

I have npm aliased to pnpm so when I run npm I'm actually running pnpm

[@nr7343]

Hello, I would really be interested in this library... but really, in the end, what is the reason to use it and not Express? The only advantage I really found is the speed...second question...can you make a video about server side render in hono and all security stuff, in fact i already do that i use edge template but i didnt sure its right way

[@the42nd]

Would be great to add some protected routes with authjs or similar.

[@merkdev]

hey thanks for tutorial. which nodejs version do you use locally and which one do you recommend?

[@syntaxfm]

In this video I was using version 20. Now I use version 22. I typically use the current LTS version locally. nodejs.org/en/about/previous-releases

[@blancartembl]

Awesome tutorial, just one little thing I wanted to change was to have in the path "/api/task", I modified the create route and it works well on scalar side and calling the api directly but with the hono client, im not getting the in the type "/api"

[@syntaxfm]

On the hono client side, you might just try settings the base url with /api like: const client = hc('localhost:8787/api')

[@cant_sleeeep]

you gotta love this dude

[@xiaohaihuang4890]

content for authentication, database mock up during tests. plz

[@JayaprakashE-s7j]

Hi, Do we have to do build and start the server in production? like we used to do bun run build , bun run start?

[@syntaxfm]

Yes a build is required. I made a video about deployment that shows how to update the build settings here: kzbin.info/www/bejne/h3XKlYiqmZuNiNU

[@ayushshende4290]

Are there any limitations of using hono, for-eg: can a hono backend handle compute-heavy backend like video-processing maybe ?

[@syntaxfm]

Compute heavy processing is more a limitation of wherever you host / deploy to. For a scenario like video processing, a Hono API could be used to trigger a job / add a message to a queue for some other app / or process to pickup the work.

[@sarma_sarma]

I got this error bro for run test Error: EBUSY: resource busy or locked, how to fix this

[@ekekw930]

Can you show an integration with NextJS?

[@syntaxfm]

Yes I will show this in a future video, but the hono docs explain how to do it as well: hono.dev/docs/getting-started/vercel#_2-hello-world

[@m4500d]

Great tutorial, but how we can enforce not allowing fields in response? for example a password field from user schema. i used omit with createSelectSchema but the handler is fine with having password field alongside others, it basically allows any random fields exist alongside defined schema which i don't like :D

[@syntaxfm]

To omit the fields from the drizzle query, you will need to update the select or query statement. Drizzle has a built in helper called "getTableColumns" - you can see examples here: orm.drizzle.team/docs/guides/include-or-exclude-columns I wrote an example helper here that combines getTableColumns with the zod schema to remove the omitted columns, there is probably a better way to do it, but this was just my first try - gist.github.com/w3cj/45968c44c5a2bcd64352e0ffce60357c#file-drizzle-select-omit-ts-L21 Another option is to query the database first with drizzle, then iterate over the results and pass into the zod schema, which will remove the extra columns. This is more work for the DB and application code though.

[@omedakram8970]

Thx, is helpful, please make a video about encore ts, i understand you every video with a little english

[@josephsendra1228]

Great video CJ! I've been using Joi, anyone have any insight to Zod being better? Looks clean.

[@syntaxfm]

The main benefit of using zod is first class support for TypeScript - you can infer a typescript type directly from a schema with no generation step or extra library. There is also a big ecosystem of libraries that integrated with zod - github.com/omar-dulaimi/awesome-zod

[@AaronLippold]

Didn’t dinner default to false?

[@snufflessmith]

can you please add how we can use cloudflare d1 database in the cloudflare branch?

[@syntaxfm]

There is a good example for how to add this here: developers.cloudflare.com/d1/examples/d1-and-hono/ Essentially you will need to update the bindings type to include the DB here: github.com/w3cj/hono-open-api-starter/blob/main/src/lib/types.ts#L4

[@saidyeter]

hey, it may be a silly question but when you run npm i (which means you run npm instead of pnpm), it does not create package lock json. how do you do that

[@CodingGarden]

I have an alias in my .zshrc file: alias npm=pnpm On windows you can use doskey

[@SriRangaSaiPagala]

How can you do this in few weeks 🧐. All the research, finding the ecosystem of tools that makes dev exp great....

[@everythingisfine9988]

Node & tsx can natively import .env files now --env-file=.env

[@syntaxfm]

Yes! Good to know, but it does not support env expansion and some of the tools in our chain like drizzle-kit and vitest still need an external way to load environment variables or expanded variables.

[@everythingisfine9988]

​@@syntaxfm didn't realize vitest didn't support this. And thanks for the detailed response✌️ really appreciate it

[@AllexRadu]

This is tutorial is awsome.

[@prashlovessamosa]

Hey I have completed it I got some errors during drizzle stuff but was able to build it.

[@syntaxfm]

Great! Drizzle just had a new release, so the docs are a little bit different than what I showed now and there are some changes to how to create a client and the drizzle config - see the release notes here: github.com/drizzle-team/drizzle-orm/releases

[@prashlovessamosa]

@@syntaxfm Yeah 👍 I have seen your tweet was reading your PR got the idea what's the issue thanks for the top notch education sir.

[@TinyDev-f4b]

is it without bun env right ?

[@syntaxfm]

Yes. Hono supports many different runtimes.

[@TinyDev-f4b]

@@syntaxfm yeah, thx for ur tutorials it's very useful 🥰 i mean actual this stack like drizzle \ zod \ hono \ ... etc can we run with bun runtime ? do u test this stuff or maybe know is it supporting cuz as i know not all npms packages works well with bun or deno runtime

[@AllexRadu]

1:27:45 When Creating you should return a 201 not 200

[@syntaxfm]

Good point. Thank you.

[@JarheadCrayonEater]

Feathersjs does a lot of this out-of-the-box, including a generated TS client. That or Adonisjs.

[@syntaxfm]

I'm a big fan of featherjs and have built a lot of things with it! They had some really great ideas with the release of v5 and schemas, but it was a bit too much of a departure from the way things were done in v4. v6 looks like it will be considerably different as well - github.com/feathersjs/feathers/discussions/3498 My impressions of v5 were that it requires way too much boilerplate. Even though it is "out-of-the-box", it requires much more up front code to do many of the same things I'm doing in this video. Adonisjs is great too, but it uses OOP like patterns with classes / controllers / annotations. This is more of a code opinion / preference, but I much prefer the compositional approach of hono.

[@ryan_roga]

If I git clone the repo, what is the ethical thing to do with the .github > funding.yml file? Is that just for me as a dev cloning to toss a few bucks in the hat, or is it something I should keep in my own repo as I develop the thing I plan to ultimately work with?

[@syntaxfm]

Feel free to delete! This is just there to let people know how to support me if they'd like to.

[@yoskokleng3658]

please, make course about elysia js with drizzle

[@succatash]

Anyone getting a type error on valid("json"). Type of string doesn't work with never

[@ReuelTeodoro]

Video of how to deploy

[@syntaxfm]

Available here: kzbin.info/www/bejne/h3XKlYiqmZuNiNU

[@iamparmjeetmishra]

Amazing sir,,, amazing

[@sarma_sarma]

create video for check logs in production