Belajar HonoJS - Static Files, serve & JSX Rendering

#Pendahuluan

Setelah di episode 9 kita memahami RPC mode, pada episode ini kita akan memahami cara menyajikan static files dan rendering JSX di server — fitur penting untuk membangun full-stack app di mana Hono melayani both API dan frontend.

#Menyajikan Static Files

#serveStatic()

Setup static file serving

import { Hono } from 'hono'
import { serveStatic } from 'hono/bun'
 
const app = new Hono()
 
app.use('/assets/*', serveStatic({ root: './public' }))
app.use('/favicon.ico', serveStatic({ path: './public/favicon.ico' }))

#Cloudflare Workers

Untuk Cloudflare Workers, gunakan Workers Assets atau R2 bucket:

Static files di Cloudflare Workers

import { serveStatic } from 'hono/cloudflare-workers'
 
app.use('/assets/*', serveStatic({ root: './public' }))

#JSX Rendering

#Server-Side JSX

Hono mendukung JSX/TSX untuk server-side rendering:

JSX rendering di Hono

import { Hono } from 'hono'
import { html } from 'hono/html'
 
const app = new Hono()
 
app.get('/', (c) => {
  return c.html(`
    <!DOCTYPE html>
    <html>
      <head><title>My App</title></head>
      <body>
        <h1>Hello from Hono!</h1>
        <div id="app"></div>
      </body>
    </html>
  `)
})

#Tagged Template Literal

html tagged template untuk layout

import { html } from 'hono/html'
 
const layout = (title: string, content: string) => html`
  <!DOCTYPE html>
  <html>
    <head><title>${title}</title></head>
    <body>${content}</body>
  </html>
`
 
app.get('/', (c) => {
  return c.html(layout('Home', '<h1>Welcome!</h1>'))
})

#Full-Stack App di Cloudflare Workers

#Hono API + SPA Frontend

Full-stack: API + SPA

import { Hono } from 'hono'
import { serveStatic } from 'hono/cloudflare-workers'
 
const app = new Hono()
 
// API routes
app.get('/api/users', (c) => c.json([{ id: 1, name: 'John' }]))
app.post('/api/users', async (c) => {
  const body = await c.req.json()
  return c.json({ id: 2, ...body }, 201)
})
 
// Static files (SPA)
app.use('/assets/*', serveStatic({ root: './public' }))
 
// SPA fallback
app.get('*', serveStatic({ path: './public/index.html' }))
 
export default app

#Workers Assets

Cloudflare Workers Assets memungkinkan serve static files + API di satu Worker:

wrangler.toml: Workers Assets

[assets]
directory = "public"
binding = "ASSETS"

Tip

Untuk full-stack app, pertimbangkan menggunakan Hono untuk API dan framework frontend terpisah (React, Vue, Svelte) yang di-build ke static files. Hono melayani API routes dan SPA fallback.

#Penutup

Pada episode 10 ini, kalian telah memahami cara menyajikan static files dan rendering JSX di Hono.

Inti yang harus dibawa pulang:

serveStatic() untuk menyajikan file dari folder public.
JSX/TSX didukung untuk server-side rendering.
html tagged template untuk layout dan component.
Full-stack app: Hono API + SPA frontend di Cloudflare Workers.

Di episode 11 selanjutnya kita akan memahami CORS, security headers, dan rate limiting — mengamankan API Hono dari serangan umum. Sampai jumpa di episode 11!