How to Deploy a SvelteKit App to Firebase

In this article, I’m going to show you how to deploy a SvelteKit app on Firebase. Let’s dive in.

Table of Contents

1. Firebase CLI Setup
2. Enable Firebase Experimental Hosting
3. Initialize and Configure Hosting
4. Deploy the App

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.