Deploying a SvelteKit Static Site to Firebase Hosting

2023-01-17

Introduction

Recently, I wanted to explore Svelte, so I decided to rewrite my portfolio site using SvelteKit. After completing the changes to the homepage, I deployed it to Firebase Hosting.

In this article, I’ll share the steps I followed to deploy the site.

Prerequisites

Use the latest version of @sveltejs/kit (currently 1.1.1).
Make sure you have already created a SvelteKit project (e.g., using npm create svelte@latest).
Ensure Firebase is set up by running firebase init.
- Refer to the official documentation for detailed instructions.

Steps

Install the Adapter

To deploy a SvelteKit app, you need an adapter that is compatible with the deployment target. In this case, since we’re deploying a static site, we’ll use the @sveltejs/adapter-static adapter.

npm i -D @sveltejs/adapter-static

Note: When searching for “sveltekit adapter firebase” and similar terms, you may come across jthegedus/svelte-adapter-firebase. However, this adapter is primarily used for running sites on Cloud Functions.

Configure the Svelte Adapter

Next, open the svelte.config.js(ts) file and configure the adapter. Update the import statement to use @sveltejs/adapter-static as shown below:

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

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

export default config;

By default, the build output directory is set to build. If you need to change the output directory, you can pass the desired path as an argument to adapter(). Refer to the documentation for more details. For now, let’s proceed with the default configuration.

Prerendering Configuration

Since we’re deploying a static site, we need to configure prerendering in the root layout file. Open the root layout file (e.g., src/routes/+layout.js(ts)) and add the following lines:

// src/routes/+layout.js(ts)

export const prerender = true;
export const trailingSlash = 'always';

Additionally, the trailingSlash option determines the behavior for trailing slashes in URLs. By default, SvelteKit removes trailing slashes from URLs. With the trailingSlash option set as shown above, requests to /hoge will return /hoge/index.html instead of /hoge.html.

For more details on trailingSlash, refer to the documentation and configure it based on your site’s needs.

https://kit.svelte.jp/docs/page-options#trailingslash

Configure firebase.json

Here is an example of the firebase.json configuration generated by the firebase init command. Ensure that the hosting.public property matches the output directory of SvelteKit.

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Build and Deploy

After completing the above configurations, run the following command to generate the build artifacts in the build directory:

npm run build

You can deploy the site directly using the firebase deploy command. If you have set up GitHub Actions using firebase init, committing and pushing the changes will trigger an automatic deployment.

Conclusion

Now my portfolio site is built with Svelte/SvelteKit. I was able to explore the features of SvelteKit by referring to the official documentation, which is available in Japanese. I’ve accomplished my initial goal of working with Svelte. Now I just need to finish rewriting the profile and contact pages.