sveltekit-adapter-firebase

SSR on Cloud Functions
Supports CloudFunctions v2!
- Concurrency
- Easier CORS
- Built on CloudRun
- New trigger types
- Up to 1hr timeout
Local production testing with Firebase Emulator

Getting started

In your standard SvelteKit project:

npm i -D sveltekit-adapter-firebase
add adapter to svelte.config.js:

+import adapter from "sveltekit-adapter-firebase";

/** @type {import('@sveltejs/kit').Config} */
export default {
  kit: {
+   adapter: adapter(),
  },
};

add firebase.json next to build folder:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "**/.firebase/**"
    ],
    "cleanUrls": true, //needed to serve prerendered pages without adding .html in the url
    "rewrites": [
      {
        "source": "**",
        "function": "handler",
      }
    ]
  },
  "functions": [
    {
      "source": "build",
    }
  ]
}

Configuration

The following snippet shows the default configuration.
V2 is used by default because it allows for concurrency which should drastically reduce costs and cold-starts.
For further documentation on the functionOptions parameter visit the official Firebase documentation .

/** @type {import('@sveltejs/kit').Config} */
export default {
  kit: {
    adapter: adapter({
      outDir: 'build',
      functionName: 'handler', //needs to correspond to function hosting.rewrites[0].function property in firebase.json
      nodeVersion: '16', // '16' or '14'
      version: 'v1', // 'v1' or 'v2'
      functionOptions: { // functionOptions are only available in v2
        concurrency: 500 // max. 1000
      }
    }),
  },
};

Region

To configure a region for the SvelteKit Server the firebase.json also needs to be adapted as follows
svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
export default {
  kit: {
    adapter: adapter({
      functionOptions: {
        region: "europe-west1"
      }
    }),
  },
};

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "**/.firebase/**"
    ],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "function": "handler",
        "region": "europe-west1"
      }
    ]
  },
  "functions": [
    {
      "source": "build",
    }
  ]
}

Monorepo

Through the outDir configuration option the adapter should provide monorepo support (tested with Nx).
For monorepos with a workspace package.json like Nx you would need some form of scripting to generate the correct package.json with all dependencies.
svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
export default {
  kit: {
    adapter: adapter({
      outDir: "../../dist/apps/frontend"
    }),
  },
};

firebase.json in project root:

{
  "hosting": {
    "public": "dist/apps/frontend",
    "ignore": [
      "**/.firebase/**"
    ],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "function": "handler",
      }
    ]
  },
  "functions": [
    //api is added here to present how a backend service might be integrated
    {
      "codebase": "api",
      "source": "dist/apps/api",
      "runtime": "nodejs16"
    },
    {
      "codebase": "frontend",
      "source": "dist/apps/frontend",
    }
  ]
}

Beware

functionOptions are currently only available on v2 functions. If functionOptions for v1 are in high demand this might get added later on (open to PR).

V2 also requires the Blaze subscription but offers a free tier of 2 million requests per month.

Firebase Web Frameworks are currently not supported.