🔥 hai selamat datang di laboratorium ^{Versi Beta}

Topik : Cara Menangani Masalah Refresh Route SvelteKit Apache dengan .htaccess JS

Jika kamu menggunakan SvelteKit dengan adapter-static lalu hasil build di-upload ke hosting Apache (cPanel/Plesk), mungkin pernah mengalami masalah berikut:

? Saat mengakses halaman seperti /admin/client lalu di-refresh, browser malah menampilkan 403 Forbidden atau 404 Not Found.

Kenapa ini terjadi?

Penyebab Masalah

Hasil build SvelteKit akan menghasilkan file seperti berikut:

build/
??? index.html
??? about.html
??? admin/dashboard.html
??? admin/client.html

Ketika user membuka https://domain.com/admin/client, Apache mencoba mencari:

• /admin/client/index.html (tidak ada)

• /admin/client/ sebagai folder (tidak ada)

Akhirnya Apache menolak akses ? 403 Forbidden.

Solusi dengan .htaccess

Untuk mengatasi ini, kita harus membuat Apache:

• ? Mengarahkan folder seperti /admin/client ke admin/client.html

• ? Jika tidak ada, fallback ke index.html (SPA mode)

Options +FollowSymLinks
DirectoryIndex index.html

# Aktifkan mod_rewrite
RewriteEngine On

# Redirect folder ke .html jika ada file dengan nama yang sama
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ $1.html [L]

# Serve file jika ada
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Selain itu fallback ke index.html
RewriteRule ^ index.html [L]