Deploy ke Vercel

Vercel menawarkan pengalaman deploy paling mudah untuk situs statis.

Deploy Sekali Klik

Deploy Manual

Langkah 1: Fork Repositori

Fork bentopdf/bentopdf ke akun GitHub Anda.

Langkah 2: Impor ke Vercel

1. Buka vercel.com/new
2. Pilih repositori hasil fork Anda
3. Konfigurasikan proyek:

Pengaturan	Nilai
Framework Preset	Vite
Build Command	npm run build
Output Directory	dist
Install Command	npm install

Langkah 3: Variabel Lingkungan (Opsional)

Tambahkan jika diperlukan:

Variabel	Deskripsi
SIMPLE_MODE	Atur ke true untuk UI minimal
VITE_BRAND_NAME	Nama merek kustom (menggantikan "BentoPDF")
VITE_BRAND_LOGO	Path logo relatif terhadap public/ (mis. images/my-logo.svg)
VITE_FOOTER_TEXT	Teks footer/hak cipta kustom
VITE_DEFAULT_LANGUAGE	Bahasa UI default (mis. fr, de, es)

Langkah 4: Deploy

Klik "Deploy" dan tunggu build selesai.

Domain Kustom

1. Buka pengaturan proyek Anda
2. Buka "Domains"
3. Tambahkan domain kustom Anda
4. Konfigurasikan DNS sesuai petunjuk

Batasan

File Besar

Fungsi serverless Vercel memiliki batas 50MB. Karena BentoPDF adalah situs statis, ini seharusnya tidak memengaruhi Anda, tetapi modul WASM berukuran besar (total ~100MB). Pastikan modul tersebut dilayani dari folder /public.

Pemecahan Masalah

Batas Waktu Build

Jika build mengalami timeout, coba:

// vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist"
}

404 Saat Refresh

Tambahkan vercel.json untuk routing SPA:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Word/ODT/Excel ke PDF Tidak Berfungsi

Konversi LibreOffice WASM memerlukan SharedArrayBuffer, yang membutuhkan header respons berikut pada semua halaman:

• Cross-Origin-Embedder-Policy: require-corp
• Cross-Origin-Opener-Policy: same-origin

File .wasm.gz dan .data.gz yang sudah dikompresi juga memerlukan Content-Encoding: gzip agar browser mendekompresinya.

Tambahkan ini ke vercel.json Anda:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" },
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Resource-Policy", "value": "cross-origin" }
      ]
    },
    {
      "source": "/libreoffice-wasm/soffice.wasm.gz",
      "headers": [
        { "key": "Content-Type", "value": "application/wasm" },
        { "key": "Content-Encoding", "value": "gzip" }
      ]
    },
    {
      "source": "/libreoffice-wasm/soffice.data.gz",
      "headers": [
        { "key": "Content-Type", "value": "application/octet-stream" },
        { "key": "Content-Encoding", "value": "gzip" }
      ]
    }
  ]
}

Untuk memverifikasi, buka Konsol DevTools dan jalankan console.log(window.crossOriginIsolated), hasilnya seharusnya true.