RavensMove

By Vivek - June 1, 2024

How to Deploy a SvelteKit App to Firebase

This guide walks through deploying a SvelteKit app to Firebase Hosting with Firebase’s web framework support. You will install the Firebase CLI, connect a project, initialize hosting, deploy, and know where to look if the server-rendered function fails.

Table of Contents

  1. Firebase CLI Setup
  2. Enable Firebase Experimental Hosting
  3. Initialize and Configure Hosting
  4. Deploy the App
  5. Deployment checks
  6. Troubleshooting
  7. Related SvelteKit guides

Firebase CLI Setup

1. Install Firebase Tools CLI

Use the command below to install Firebase tools:

npm i -g firebase-tools

This installation is necessary for accessing Firebase commands.

2. Connect to Firebase

After you’ve installed the CLI, run this command to connect your Firebase account to it. This step is only required the first time.

firebase login

Enable Firebase Experimental Hosting

As of now, SvelteKit hosting on Firebase is experimental. Enable it using:

firebase experiments:enable webframeworks

Initialize and Configure Hosting

Run the following command to initialize the firebase hosting:

firebase init hosting

It will automatically detects your SvelteKit project and links it to your Firebase project.

After that choose a data center for hosting your cloud functions.

you’ll find a firebase.json file in the root of your project, similar to the following config:

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1"
    }
  }
}

Deploy the App

At this point, you’re ready to deploy your app. Run the following command:

firebase deploy

This builds production files for hosting and sets up a cloud function for server-side rendering. It’ll take a few minutes, but once it’s done, you can check the Firebase console and see a cloud function listed under the functions tab.

This function acts as the primary gateway for your server code. If you run into any problems with rendering, you’ll find related error logs in Google Cloud, which is directly linked to the cloud function.

Congratulations! Your SvelteKit app is now successfully deployed on Firebase.

Deployment checks

After the deploy completes, verify these basics:

  • Open the Firebase Hosting URL and confirm the homepage returns HTML.
  • Refresh a nested route directly to make sure routing works outside client-side navigation.
  • Check that static assets load without 404 errors.
  • Run your production build locally before deploying again.
npm run build

Troubleshooting

Firebase does not detect SvelteKit

Make sure @sveltejs/kit is installed and the project has a normal SvelteKit structure with src/routes.

Server-rendered routes fail after deploy

Open the Firebase console and inspect the generated Cloud Function logs. Most runtime failures come from missing environment variables, package compatibility, or code that assumes browser-only APIs are available on the server.

Static files return 404

Files that must be served from the site root should live in the SvelteKit static directory before deployment.

Related Posts