Deploy A Hono API to Render, fly.io, Vercel and Cloudflare Workers

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ต.ค. 2024
  • In this video CJ shows how to deploy a hono API to several platforms including render.com, fly.io, vercel and cloudflare workers. He shows things you should consider for the typescript build settings and also shows how to connect to a sqlite db deployed to turso.
    View the hono starter template here: github.com/w3c...
    View the deployment examples here: github.com/w3c...
    See how to build this API here: • Build a documented / t...
    01:21 typescript build output
    02:33 import extensions / aliases issue
    03:35 tsc-alias setup
    04:22 add start script to package.json
    05:12 template with build settings
    05:25 create turso db
    06:53 add database env variables
    07:49 drizzle-kit config / turso update
    08:26 push schema to turso db
    09:09 deploy to render.com
    11:24 deploy to fly.io
    14:41 deploy to vercel edge runtime
    22:58 deploy to vercel node.js runtime
    30:17 deploy to cloudflare workers
    33:01 environment variable access updates
    38:39 logger middleware updates
    41:00 database connection updates
    43:54 create runtime env
    46:05 fixing wrangler specific errors
    47:27 creating cloudflare .dev.vars
    48:25 local dev with turso
    51:25 deploy to cloudflare
    53:14 Thanks!
    tsc-alias | github.com/jus...
    turso | turso.tech/
    render.com | render.com/
    flyctl install | fly.io/docs/fl...
    vercel runtimes | vercel.com/doc...
    hono vercel example | hono.dev/docs/...
    hono node.js vercel example | hono.dev/docs/...
    cloudlfare wrangler | developers.clo...
    cloudflare secrets | developers.clo...
    hono starter templates | github.com/hon...
    hono bindings / variables | hono.dev/docs/...
    cloudflare secrets | developers.clo...
    turso local development | docs.turso.tec...
    cloudflare keep_vars | developers.clo...
    ------------------------------------------------------------------------------
    Hit us up on Socials!
    www.syntax.fm/...
    Brought to you by Sentry - Use code "tastytreats" to get 2 months free - sentry.io/syntax
    #nodejs #deployment #devops

ความคิดเห็น • 34

  • @syntaxfm
    @syntaxfm  3 วันที่ผ่านมา +3

    Main sections are here. See the description for more detailed timestamps.
    01:21 typescript build setup
    05:25 configure turso for sqlite cloud db
    09:09 deploy to render.com
    11:24 deploy to fly.io
    14:41 deploy to vercel edge runtime
    22:58 deploy to vercel node.js runtime
    30:17 deploy to cloudflare workers

  • @pietraderdetective8953
    @pietraderdetective8953 วันที่ผ่านมา +1

    a similar video but covering Bun would be amazing!
    Great video! Liked!

  • @statuschannel8572
    @statuschannel8572 2 วันที่ผ่านมา +3

    thank you CJ..! more hono contents would be awesome since i don't see much here on TH-cam

  • @ryan_roga
    @ryan_roga 2 วันที่ผ่านมา +2

    Turso looks awesome! I'm glad you covered this because I want to give it a try.

  • @claudedaiga5897
    @claudedaiga5897 2 วันที่ผ่านมา +2

    Thank you CJ! Please can you do a tutorial on how to use hono sessions to enforce authorization on some routes.

    • @syntaxfm
      @syntaxfm  2 วันที่ผ่านมา +3

      The easiest way to do this is with Auth.js -github.com/honojs/middleware/tree/main/packages/auth-js
      I will be working on showing my own auth example but it might take a while, I want to show an example that doesn't use cookies so it can be used across domains.

  • @VincentFulco
    @VincentFulco วันที่ผ่านมา +1

    FWIW, deploying to AWS using SST is a breeze!

  • @NeerajLagwankar
    @NeerajLagwankar 2 วันที่ผ่านมา

    Would love to see a comparison with Nitro as well

  • @ShaikMuzakkirHussain
    @ShaikMuzakkirHussain 8 ชั่วโมงที่ผ่านมา

    when ever i am using bun run dev:db i am getting this error "bun: command not found: turso" please help to install turso

  • @dtlvan
    @dtlvan 2 วันที่ผ่านมา

    Everytime I see a thunbnail of CJ, I click to play video right away 😅😂

  • @ziyabnajeeb
    @ziyabnajeeb 2 วันที่ผ่านมา

    Awesome work, thanks! Can you please give us an option to select db of your choice kind of, like if I wanted to go with MongoDB so how will it go with this or should we use typegoose?

    • @syntaxfm
      @syntaxfm  2 วันที่ผ่านมา +2

      I don't plan to update the template but swapping out drizzle for mongo should be straight forward.
      The DB code to replace is here: github.com/w3cj/hono-open-api-starter/tree/main/src/db
      The DB queries to replace are in the handlers here: github.com/w3cj/hono-open-api-starter/blob/main/src/routes/tasks/tasks.handlers.ts
      I haven't worked with mongo in a while, but mongoose was the best way to work with it and is still maintained: mongoosejs.com/docs/typescript.html - the official mongodb driver also supports typescript (click the typescript tab on examples) - www.mongodb.com/docs/drivers/node/current/usage-examples/findOne/

    • @ziyabnajeeb
      @ziyabnajeeb 2 วันที่ผ่านมา

      @@syntaxfm Thanks!

  • @biovawan
    @biovawan 2 วันที่ผ่านมา

    CJ did you try elysiajs? I like the trpc approach which is implemented in eden. Works pretty well.

    • @syntaxfm
      @syntaxfm  2 วันที่ผ่านมา +3

      I have not tried elysia - but eden looks very similar to hono rpc / hono client. elysia only runs on bun, hono runs on any js runtime.

  • @vpetryniak
    @vpetryniak 2 วันที่ผ่านมา

    Man, you don’t need tsc alias, you can directly compile typescript to esm. Just use correct tsconfig, set module and moduleResolution to NodeNext

    • @syntaxfm
      @syntaxfm  2 วันที่ผ่านมา

      Man, believe me I tried.
      An import alias beginning with @ is not supported by node.js - need to use some other character like # or $ - would have to find / replace the whole code base
      You then need an "imports" section in package.json this needs to match up with the paths setting in tsconfig
      Also need a rootDir added to tsconfig.
      Even with all of this I couldn't get import extensions added in the resulting build.
      Feel free to PR the template if you know of an easier way: github.com/w3cj/hono-open-api-starter

  • @danijelprskalo3675
    @danijelprskalo3675 วันที่ผ่านมา

    Nice job! thanks

  • @ryan_roga
    @ryan_roga 2 วันที่ผ่านมา

    Oh man. I am so not deploying to cloudflare. If you hadn't explained all this, do you know how many months it would take me to figure it all out on my own? 😅

    • @syntaxfm
      @syntaxfm  2 วันที่ผ่านมา +1

      I probably should have made the base template use those settings to begin with 😅

  • @notrab
    @notrab 2 วันที่ผ่านมา +1

    Awesome video, Turso ♥

  • @someDudeOnYtb
    @someDudeOnYtb 2 วันที่ผ่านมา

    Wouldn’t it be easier with esbuild instead of just tsc ? I had to do something similar for a hackathon and it worked perfectly

    • @syntaxfm
      @syntaxfm  2 วันที่ผ่านมา +1

      Easier is relative 😅. Some of our dependencies don't play nice with esm requires and our db dependency has some caveats to use esm as well. It took me about 20 minutes to figure out the config required to get it working: gist.github.com/w3cj/0cfcc31e1243f7513414b51755b44693

  • @St0rMsk
    @St0rMsk 2 วันที่ผ่านมา

    Call 🚒🧑‍🚒, CJ is on 🔥

  • @markus_dev_cwb
    @markus_dev_cwb 2 วันที่ผ่านมา

    Awesome CJ! Tks to share.

  • @2u841r
    @2u841r 2 วันที่ผ่านมา

    This guy is 🔥

  • @mirandagonebald
    @mirandagonebald 2 วันที่ผ่านมา

    Why not railway as well CJ? Just wondering

    • @syntaxfm
      @syntaxfm  2 วันที่ผ่านมา

      I've only used railway for easy deploy of databases, but looking at their docs, it should be pretty straightforward, very similar to the render and flyio setup.

    • @mirandagonebald
      @mirandagonebald 2 วันที่ผ่านมา

      @@syntaxfm Alright, thank you!

  • @codeVictor
    @codeVictor 2 วันที่ผ่านมา

    You're the best, CJ!

  • @prashlovessamosa
    @prashlovessamosa 2 วันที่ผ่านมา

    Thanks CJ 😁.

  • @spietrza
    @spietrza 2 วันที่ผ่านมา

    Where is Hetzner with Coolify?

    • @syntaxfm
      @syntaxfm  2 วันที่ผ่านมา +1

      The nixpacks deployment I show in my coolify video can be used in the same way with this hono template - th-cam.com/video/taJlPG82Ucw/w-d-xo.html