Configuring your project

It's worth reiterating what Slinkity really is here: the glue between the 11ty SSG and the Vite bundler. So, as you might expect, there are 3 things you could configure:

Let's break down configuration for each.

Read the rest of this doc for all options available to you! In our experience though, there are few easy recommendations we can make:

  1. Use the --incremental CLI flag when running slinkity in development. This helps to prevent any flashes of unstyled content (FOUC) while working. It'll also speed up your reloads quite a bit!
  2. Specify an input directory for 11ty to work from. 11ty defaults to the base of your project directory, which could cause 11ty to accidentally process config files, your README.md, etc (unless you update your 11ty ignores). You can do so using the --input="[dir]" CLI flag, or by exporting a dir from your .eleventy.js config:
// .eleventy.js
module.exports = function(eleventyConfig) {
return { dir: { input: '[dir]' } }
}
  1. Inject the React import when using React in your project. This prevents you from having to import React by hand in every component, in keeping with React's new JSX transform. You can do so using the jsxInject property in a vite.config.js:
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
esbuild: {
jsxInject: `import React from 'react'`,
},
})

For the most part, our CLI adds very little on top of the plain eleventy command you might be used to. We expose all of 11ty's existing flags without any changes! Our CLI merely exists to spin up Vite at the right time, and wire up everyone's configurations accordingly. Here are the main flags we support. Be sure to check slinkity --help in your CLI for the full list of options:

Full 11ty documentation here

You'll configure all 11ty-specific options in this file. There are quite a few configurable options here, but to name a few:

Head to their docs for the full list of options. And yes, everything should work as expected with Slinkity.

Full Vite documentation here

You'll configure all bundler-specific options in this file. If you aren't quite sure which options belong here over an 11ty or Slinkity config, here's a common set of use cases:

🚨 Note: We run Vite in "middleware mode" as part of our Browsersync server. This means server-specific options like server.watch and server.port will not take effect!

You'll configure everything relating to 11ty ↔️ Vite communication here. There aren't many options to configure at the moment, but we expect this list to grow in the future.

Configuration file format

We closely mirror Vite's config file format. You can write your config in any flavor of JS you want, including ESM:

// slinkity.config.js
// export either an object
export default {
...config,
}
// or a function (asynchronous works too!)
export default async function() {
return {
...config,
}
}

or CommonJS:

// slinkity.config.js
// either an object
module.exports = {
...config,
}
// or a function
module.exports = async function() {
return {
...config,
}
}

Autocomplete / Intellisense in your editor

We include a few handy tools for autocomplete as well. You can import our defineConfig function for suggestions + documentation as you apply configuration keys.

ESM:

// slinkity.config.js
import { defineConfig } from 'slinkity'

export default defineConfig({
...config
})

CommonJS:

// slinkity.config.js
const { defineConfig } = require('slinkity')

module.exports = defineConfig({
...config,
})

You can also apply a TypeScript type for the same effect. Feel free to use a .ts file extension here. Note that CommonJS is not supported for this format:

// slinkity.config.ts
import { UserSlinkityConfig } from 'slinkity'

const config: UserSlinkityConfig = {
...config,
}

export default config

Configurable options

eleventyIgnores

Expects: string[] or (ignores: string[]) => string[]

By default, Slinkity will ask 11ty to ignore certain files (or globs of files) to prevent unnecessary reloads during development. These should be files that Vite and Vite alone is in charge of processing.

The full list of ignores will vary as we add more renderers beyond React. So to make configuration easier, we expose all our ignores using a helper function like so:

// slinkity.config.js
module.exports = defineConfig({
eleventyIgnores(ignores) {
// to check which ignores are applied
console.log({ ignores })

// we discover 11ty will ignore all `.css` files in our `_includes` folder
// say we don't want that to happen, so we filter that ignore out of the list:
return ignores.filter(ignore => !ignore.endsWith('css'))
}
})

You can also apply a string array without using this helper function. However, we expect most people will use eleventyIgnores to filter out ignores when they run into build troubles, so use the code snippet above as your guide!