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
I love the combination of Hono, htmx, and Cloudflare workers!
@BraydenGirard
4 ай бұрын
It’s really nice!
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.
Brother! You look like Henry Cavill from Superman. Need more Tutorial about Hono, htmx, and Cloudflare workers.
great little tutorial , im starting to like hono js , still use svelte for most things though
@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
What are the benefits to specifying caching the way you did versus using a service worker to manage caching?
@BraydenGirard
4 ай бұрын
You can do either, I like using the built in HTTP functionality whenever I can, keeps things simple.
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
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
2 күн бұрын
@@BraydenGirard unfortunately it wont work with daisyui
@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
2 күн бұрын
@@berliangur Ah that sucks, I haven't tried myself too many CSS frameworks to keep track of :P
@BraydenGirard
2 күн бұрын
@@berliangur I haven't tried this approach but HTMX should work ? or do you mean the combination of HTMX with DaisyUI ?
Bruh wth is this