Conditional Adapters in SvelteKit

What?

SvelteKit is a JavaScript framework meant to run in many contexts. This design strategy requires it to use an adapter during its build step, before it can be deployed and hosted.

Because each adapter is technology specific, deploying to different platforms requires the use of different adapters. There are many reasons someone might want to do this, I wrote about my personal reasons for deploying to both Netlify and surge.sh in this post from May 2021.

How?

Adapters can be used contextually by passing environment variables and catching them with the dotenv package. The ENV variable can then be passed to an if statement, a ternary, or a switch to determining the adapter to use.

import dotenv from 'dotenv'
dotenv.config()

import adapterNetlify from '@sveltejs/adapter-netlify'
import adapterStatic from '@sveltejs/adapter-static'

const config = {
  kit: {
    adapter: PROCESS.ENV.ADAPTER === 'static'
      ? adapterStatic({...})
      : adapterNetlify(),
    ...
  },
  ...
}

export default config

Passing the ENV variable into an NPM script command can be done by setting variables on a platform, such as Netlify. ENV variables can also be passed directly into an NPM script by using the cross-env package.

{
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "static": "cross-env ADAPTER=static npm run export && ..."
  },
  "dependencies": {
    "dotenv": "^8.2.0",
    "cross-env": "^7.0.2",
    ...
  },
  "devDependencies": {
    "@sveltejs/adapter-netlify": "^1.0.0-next.17",
    "@sveltejs/adapter-static": "^1.0.0-next.13",
    ...
  },
  ...
}

npm run build will return null for PROCESS.ENV.ADAPTER and trigger a build with adapterNetlify(). npm run static will meet the condition of the ternary and run with adapterStatic().

What?

Why?

How?