Belajar ElysiaJS - Static Files, serve & Serialization

#Pendahuluan

Setelah di episode 9 kita memahami Eden Treaty untuk type safety end-to-end, pada episode ini kita akan memahami cara menyajikan static files, menangani file upload, dan mengontrol serialization response — fitur penting untuk API yang melayani aset atau menerima upload dari client.

#Menyajikan Static Files

Gunakan plugin @elysiajs/static untuk menyajikan file dari folder public:

bun add @elysiajs/static

import { Elysia } from 'elysia'
import { staticPlugin } from '@elysiajs/static'
 
const app = new Elysia()
  .use(staticPlugin({
    prefix: '/public',
    assets: 'public',
  }))
  .listen(3000)

Sekarang file di folder public/ bisa diakses melalui /public/nama-file.ext.

#Response Serialization

#Custom Serializer

ElysiaJS secara otomatis menentukan Content-Type berdasarkan return value. Untuk kontrol penuh:

const app = new Elysia()
  .serializer((data) => JSON.stringify(data, null, 2))
  .get('/data', () => ({ users: [{ name: 'John' }] }))

#Binary Response

Untuk mengembalikan data binary seperti file atau stream:

import { read } from 'bun'
 
const app = new Elysia()
  .get('/file', async () => {
    const file = await read('document.pdf')
    return new Response(file, {
      headers: {
        'Content-Type': 'application/pdf',
        'Content-Disposition': 'attachment',
      }
    })
  })

#File Upload

#Menerima File via Multipart/Form-Data

ElysiaJS secara otomatis mem-parsing multipart form data:

import { Elysia, t } from 'elysia'
 
const app = new Elysia()
  .post('/upload', async ({ body }) => {
    const file = body.file
    if (file instanceof File) {
      const buffer = await file.arrayBuffer()
      await Bun.write(`./uploads/${file.name}`, buffer)
      return { success: true, filename: file.name }
    }
    return { error: 'No file provided' }
  }, {
    body: t.Object({
      file: t.File(),
      description: t.Optional(t.String()),
    })
  })

#Streaming Large File ke Storage

Untuk file besar, gunakan streaming alih-alih membaca seluruh file ke memori:

.post('/upload-stream', async ({ body }) => {
  const file = body.file
  if (file instanceof File) {
    const stream = file.stream()
    // Stream ke S3, R2, atau storage lain
    return { success: true }
  }
})

#Penutup

Pada episode 10 ini, kalian telah memahami cara menyajikan static files, mengontrol serialization, dan menangani file upload di ElysiaJS.

Inti yang harus dibawa pulang:

• Plugin @elysiajs/static menyajikan file dari folder public.
• Custom serializer memberikan kontrol penuh atas response format.
• File upload diterima otomatis sebagai File object.
• Streaming large file lebih efisien daripada membaca ke memori.

Di episode 11 selanjutnya kita akan memahami CORS, Helmet, dan basic security — konfigurasi CORS, security headers, dan rate limiting untuk melindungi API dari serangan umum. Sampai jumpa di episode 11!