SSR Tailwind CSS with Hono JS on Cloudflare Workers #nobuild

preview_player
Показать описание

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
  1. Brayden Girard
  2. hono.js
  3. cloudflare workers
  4. serverless
  5. tailwind css
  6. no build
Рекомендации по теме
SSR Tailwind CSS 0:24:29

SSR Tailwind CSS with Hono JS on Cloudflare Workers #nobuild

Tailwind CSS is 0:03:55

Tailwind CSS is the worst…

#47 JSX Middleware 0:23:04

#47 JSX Middleware of Hono Framework

How I style 0:10:42

How I style HTMX apps with Tailwind CSS

Vite in 100 0:02:29

Vite in 100 Seconds

Ampt Live: Building 1:23:31

Ampt Live: Building a dynamic Server-Side Rendered (SSR) site on AWS with Hono & HTMX

Why I Don't 0:06:51

Why I Don't Use NextJS For My Side Project Anymore

Which JS framework 0:01:30

Which JS framework is best for fast loading pages?

Why People Aren't 0:05:55

Why People Aren't Deploying to Vercel Anymore

Next.js API with 0:24:28

Next.js API with Hono: The Best Route Handler Alternative!

JavaScript Framework Tier 0:40:57

JavaScript Framework Tier List

vue is the 0:00:29

vue is the best web js framework, change my mind

htmx in 100 0:02:27

htmx in 100 seconds

Unbelievable hydration error 0:00:39

Unbelievable hydration error in #nextjs

I might be 0:11:02

I might be enjoying Remix more than Next

Astro just Launched.... 0:03:17

Astro just Launched.... Could it be the ultimate web framework?

More UI with 1:40:02

More UI with Tailwind CSS | Ruby on Rails Livestream

SvelteKit in 100 0:02:46

SvelteKit in 100 seconds

Svelte 5 Is 0:19:33

Svelte 5 Is Like React, But Better

Nodejs VS Expressjs 0:01:19

Nodejs VS Expressjs VS Nextjs - See the differences 🌟

Nuxt in 100 0:02:50

Nuxt in 100 Seconds

React server components 0:19:43

React server components from scratch!

Deploy your Website 0:10:54

Deploy your Website for free Cloudflare Pages

Next.js 15 Is 0:19:34

Next.js 15 Is Here (Vercel Ship Breakdown)

Комментарии
Автор

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

MarkVolkmann
Автор

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

zhanezar
Автор

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

TheAliAhad
Автор

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.

MarkVolkmann
Автор

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

MarkVolkmann
Автор

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?

galaxygur