Deploy SvelteKit to Firebase Hosting (Static Guide)

The most predictable way to deploy SvelteKit to Firebase Hosting is to generate a static site with @sveltejs/adapter-static, then deploy the generated build directory through the Firebase CLI. This path works well for public pages that do not require per-request server rendering.

Firebase’s framework-aware Hosting integration is still a preview and its official framework list does not currently name SvelteKit. Do not assume firebase init hosting will automatically create a supported SvelteKit SSR backend.

Table of Contents

1. Choose static or server-rendered deployment
2. Install the SvelteKit static adapter
3. Configure SvelteKit
4. Install and connect the Firebase CLI
5. Initialize Firebase Hosting
6. Build, preview, and deploy
7. Troubleshooting
8. Related SvelteKit references

Choose static or server-rendered deployment

Use this static Hosting setup when your routes can be generated at build time. Static output is a good fit for documentation, blogs, portfolios, and tools that run entirely in the browser.

This setup is not enough when your app relies on server-only form actions, private environment variables at request time, authenticated server routes, or pages that must render fresh data for every request. For those apps, use a supported server runtime such as Cloud Run with a suitable SvelteKit adapter, or verify a maintained community Firebase adapter before committing to it.

Firebase’s framework integration overview describes the current preview status and supported framework paths.

Install the SvelteKit static adapter

From the SvelteKit project directory, install the official static adapter:

npm install --save-dev @sveltejs/adapter-static

Configure SvelteKit for static output

Update svelte.config.js to use adapter-static and write the generated site to build:

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build'
    })
  }
};

export default config;

Then enable prerendering from the root layout in src/routes/+layout.js:

export const prerender = true;

Every route included in this deployment must be prerenderable. If the build reports that a route cannot be prerendered, either remove its server-only behavior or use a server deployment for that route.

Install and connect the Firebase CLI

Install Firebase Tools and sign in:

npm install --global firebase-tools
firebase login

Create a Firebase project in the Firebase console if you do not already have one. Then connect the local directory:

firebase use --add

Initialize Firebase Hosting

Run the Hosting setup from the SvelteKit project root:

firebase init hosting

Use these answers for a static SvelteKit build:

• Select the Firebase project you want to deploy.
• Set the public directory to build.
• Choose No when asked to configure the project as a single-page app if all routes are prerendered.
• Do not overwrite an existing generated build/index.html after running the SvelteKit build.

The resulting firebase.json should point Hosting at the build directory:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

Build, preview, and deploy

Create the production build:

npm run build

Check that the build directory contains index.html, route output, and static assets. Preview the Firebase configuration locally:

firebase emulators:start --only hosting

Open the local URL printed by the CLI and test the homepage plus at least one nested route. When those checks pass, deploy:

firebase deploy --only hosting

Firebase Hosting publishes the static files to its CDN and returns the live Hosting URLs. The official Firebase Hosting quickstart covers project setup, preview channels, and deployment controls.

Troubleshooting

The build says a route cannot be prerendered

That route depends on request-time server behavior or cannot be discovered during prerendering. Make it static, add valid prerender entries for parameterized routes, or move the app to a server runtime.

Firebase deploys the default welcome page

Set hosting.public to build, run npm run build again, and make sure Firebase initialization did not replace the generated build/index.html.

A nested route returns 404

Confirm the route produced an HTML file in build. For a fully client-rendered SPA, configure adapter-static with a fallback and add an appropriate Firebase rewrite, but do not add a catch-all rewrite to a normally prerendered site without a reason.

Static assets return 404

Files that must be served from the site root belong in SvelteKit’s static directory. Rebuild after adding them and verify their paths in the generated output.

The app needs SSR after all

Static Firebase Hosting cannot execute SvelteKit server code. Reassess the deployment target instead of forcing server features into a static build.

Related SvelteKit references

• Install Bootstrap 5 in SvelteKit
• Dockerize a Svelte app
• Svelte reference notes
• Use free browser-based developer tools