SSR Tailwind CSS with Hono JS on Cloudflare Workers

Ғылым және технология

Learn how to build a fast, server-side rendered, Tailwind site with no build step using Hono.js on Cloudflare Workers. See how to leverage AI for design and use Twind for performance.
00:00 Intro
00:52 Set up Hono app
01:21 Remove build process
01:53 Serve static assets
02:14 Cache assets
02:59 Return HTML
03:40 Configure Wrangler
04:04 Add images & JS
04:32 Cache middleware
05:07 Cache CSS
05:27 Add home route
05:51 Create home HTML
06:15 Populate head
06:33 Populate body
07:23 Cache styles
07:50 Import HTML
08:33 Import home HTML
08:57 Test locally
09:37 Fix issues
10:05 View site
10:22 Add main
10:49 Open site
11:04 Generate UI with AI
11:46 Get HTML from AI
12:12 Add HTML to site
12:35 View site
12:55 Fix missing styles
13:37 Install & config Twind
14:08 Create SSR helper
14:53 Config theme
15:21 Create SSR func
15:53 Extract styles
16:26 Inject styles
16:43 Return HTML
17:10 Inject CSS
17:34 Replace head tag
18:02 Wrap HTML in func
18:12 View site
18:36 Fix images
19:22 Deploy site
19:48 Test prod site
20:43 Check perf
21:19 Add HTMX
21:42 Test speed
22:33 Edit with Tailwind
23:11 Check pagespeed
23:57 Update menu
24:11 Conclusion

Пікірлер: 17

  • @MarkVolkmann
    @MarkVolkmann4 ай бұрын

    I love the combination of Hono, htmx, and Cloudflare workers!

  • @BraydenGirard

    @BraydenGirard

    4 ай бұрын

    It’s really nice!

  • @MarkVolkmann
    @MarkVolkmann4 ай бұрын

    I think I would rather have a build step that generates a CSS file containing the Tailwind classes that I’m using rather than generating CSS at runtime using a somewhat complicated set up.

  • @TheAliAhad
    @TheAliAhad2 ай бұрын

    Brother! You look like Henry Cavill from Superman. Need more Tutorial about Hono, htmx, and Cloudflare workers.

  • @zhanezar
    @zhanezar3 ай бұрын

    great little tutorial , im starting to like hono js , still use svelte for most things though

  • @s.adnansami5106

    @s.adnansami5106

    2 ай бұрын

    Ben Davis made a video on using svelte with Hono.js, like you can plug-in Hono.js as a backend if I understood correctly, so it pipelines the Svelte built in API backend to Hono.js

  • @MarkVolkmann
    @MarkVolkmann4 ай бұрын

    What are the benefits to specifying caching the way you did versus using a service worker to manage caching?

  • @BraydenGirard

    @BraydenGirard

    4 ай бұрын

    You can do either, I like using the built in HTTP functionality whenever I can, keeps things simple.

  • @berliangur
    @berliangur4 күн бұрын

    Do you recommend using this approach in production? How does it actually work? As I understand not only "ssrTwind" but also "install" function will be called on each request since its running on the edge?

  • @BraydenGirard

    @BraydenGirard

    4 күн бұрын

    Yes exactly, I haven’t benchmarked it, definitely is doing extra work on the cloudflare worker. Probably could reduce cost without SSR the Tailwind but I think for majority of apps the difference would be negligible and Cloudflare workers are so fast and cheap!

  • @berliangur

    @berliangur

    2 күн бұрын

    @@BraydenGirard unfortunately it wont work with daisyui

  • @berliangur

    @berliangur

    2 күн бұрын

    @@BraydenGirard also couldnt make it work with htmx, should i try to send out-of-band styles along with updated markup, and like to merge them on client?

  • @BraydenGirard

    @BraydenGirard

    2 күн бұрын

    @@berliangur Ah that sucks, I haven't tried myself too many CSS frameworks to keep track of :P

  • @BraydenGirard

    @BraydenGirard

    2 күн бұрын

    @@berliangur I haven't tried this approach but HTMX should work ? or do you mean the combination of HTMX with DaisyUI ?

  • @arystanbekjetisy7329
    @arystanbekjetisy732923 күн бұрын

    Bruh wth is this

Келесі