Implementeren op Netlify

Netlify biedt uitstekende hosting voor statische sites met een royale gratis laag.

Implementeren met één klik

Handmatig implementeren

Stap 1: Repository koppelen

1. Log in bij Netlify
2. Klik op "Add new site" → "Import an existing project"
3. Koppel je GitHub-account
4. Selecteer je BentoPDF-fork

Stap 2: Buildinstellingen configureren

Instelling	Waarde
Build command	npm run build
Publish directory	dist
Node version	18+

Stap 3: Implementeren

Klik op "Deploy site" en wacht tot de build klaar is.

Configuratiebestand

Maak netlify.toml aan in de hoofdmap van je project:

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

# Required security headers for SharedArrayBuffer (used by LibreOffice WASM)
[[headers]]
  for = "/*"
  [headers.values]
    Cross-Origin-Embedder-Policy = "require-corp"
    Cross-Origin-Opener-Policy = "same-origin"
    Cross-Origin-Resource-Policy = "cross-origin"

# Pre-compressed LibreOffice WASM binary - must be served with Content-Encoding
[[headers]]
  for = "/libreoffice-wasm/soffice.wasm.gz"
  [headers.values]
    Content-Type = "application/wasm"
    Content-Encoding = "gzip"
    Cache-Control = "public, max-age=31536000, immutable"

# Pre-compressed LibreOffice WASM data - must be served with Content-Encoding
[[headers]]
  for = "/libreoffice-wasm/soffice.data.gz"
  [headers.values]
    Content-Type = "application/octet-stream"
    Content-Encoding = "gzip"
    Cache-Control = "public, max-age=31536000, immutable"

# Cache other WASM files
[[headers]]
  for = "*.wasm"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"
    Content-Type = "application/wasm"

# SPA routing
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Belangrijk

De headers Cross-Origin-Embedder-Policy en Cross-Origin-Opener-Policy zijn vereist voor conversies van Word/ODT/Excel/PowerPoint naar PDF. Zonder deze headers is SharedArrayBuffer niet beschikbaar en kan de LibreOffice WASM-engine niet worden geïnitialiseerd.

De Content-Encoding: gzip-headers op de bestanden .wasm.gz en .data.gz zorgen ervoor dat de browser ze automatisch decomprimeert. Zonder deze headers ontvangt de browser ruwe gzip-bytes en mislukt de WASM-compilatie.

Omgevingsvariabelen

Stel deze in via Site settings → Environment variables:

Variabele	Beschrijving
SIMPLE_MODE	Stel in op true voor een minimale build
VITE_BRAND_NAME	Eigen merknaam (vervangt "BentoPDF")
VITE_BRAND_LOGO	Logopad relatief ten opzichte van public/ (bijv. images/my-logo.svg)
VITE_FOOTER_TEXT	Eigen footer-/copyrighttekst
VITE_DEFAULT_LANGUAGE	Standaardtaal van de interface (bijv. fr, de, es)

Eigen domein

1. Ga naar Site settings → Domain management
2. Klik op "Add custom domain"
3. Volg de DNS-configuratie-instructies

Grote media

Overweeg voor grote WASM-bestanden Netlify Large Media in te schakelen:

netlify lm:setup
git lfs track "*.wasm"

Probleemoplossing

Word/ODT/Excel naar PDF blijft hangen op 55%

Als documentconversies blijven hangen op 55%, open dan de DevTools-console en controleer:

console.log(window.crossOriginIsolated); // should be true
console.log(typeof SharedArrayBuffer); // should be "function"

Als crossOriginIsolated false is, worden de COEP/COOP-headers uit je netlify.toml niet toegepast. Zorg dat het bestand in de hoofdmap van je project staat en implementeer opnieuw.

Als je expected magic word 00 61 73 6d, found 1f 8b 08 08 in de console ziet, ontbreken bij de .wasm.gz-bestanden de Content-Encoding: gzip-headers. Zorg dat de [[headers]]-blokken voor soffice.wasm.gz en soffice.data.gz in je netlify.toml staan.

Build mislukt

Controleer de compatibiliteit van de Node-versie:

[build.environment]
  NODE_VERSION = "20"

Trage eerste lading

Schakel assetoptimalisatie in via Site settings → Build & deploy → Asset optimization.