Framework

Configuration

Every root command loads the project's root.config.ts. This page covers the most common options. For the full list, see RootUserConfig in the API reference.

base

A path prefix for every URL on the site.

// @/root.config.ts

import {defineConfig} from '@blinkk/root';

export default defineConfig({
  // The site serves at example.com/about/...
  base: '/about/',
});

domain

The site's canonical domain, used for the sitemap, canonical URLs and other SEO tags.

// @/root.config.ts

import {defineConfig} from '@blinkk/root';

export default defineConfig({
  domain: 'https://example.com',
});

elements

Where Root.js looks for custom elements. By default, it looks in elements/. Add folders, e.g. from a shared design system, or exclude files.

// @/root.config.ts

import path from 'node:path';
import {URL} from 'node:url';
import {defineConfig} from '@blinkk/root';

const rootDir = new URL('.', import.meta.url).pathname;
const designSystem = path.resolve(rootDir, '../../packages/designsystem');

export default defineConfig({
  elements: {
    include: [path.resolve(designSystem, './elements')],
  },
});

i18n

The site's locales and the URL format for localized pages. See Localization.

// @/root.config.ts

import {defineConfig} from '@blinkk/root';

export default defineConfig({
  i18n: {
    locales: ['de', 'en', 'es', 'fr'],
    urlFormat: '/intl/[locale]/[base]/[path]',
  },
});

server.redirects

Redirects served by the server.

// @/root.config.ts

import {defineConfig} from '@blinkk/root';

export default defineConfig({
  server: {
    redirects: [
      // Redirect /foo to /bar.
      {source: '/foo', destination: '/bar', type: 301},
    ],
  },
});

server.sessionCookieSecret

The secret used to sign session cookies, e.g. for signing in to the CMS. Keep it out of source control, for example in an environment variable.

// @/root.config.ts

import {defineConfig} from '@blinkk/root';

export default defineConfig({
  server: {
    sessionCookieSecret: process.env.SESSION_COOKIE_SECRET,
  },
});

server.trailingSlash

By default, a page is served both with and without a trailing slash. Set trailingSlash to true to redirect URLs to add a trailing slash, or false to redirect URLs to remove it.

// @/root.config.ts

import {defineConfig} from '@blinkk/root';

export default defineConfig({
  server: {
    // Enforce a trailing slash.
    trailingSlash: true,
  },
});

sitemap

Set sitemap: true to add sitemap.xml to the build output, with hreflang links between localized pages. Set domain too, so the sitemap has full URLs.

vite

Settings passed to Vite. See Configuring Vite.

// @/root.config.ts

import path from 'node:path';
import {URL} from 'node:url';
import {defineConfig} from '@blinkk/root';

const rootDir = new URL('.', import.meta.url).pathname;

export default defineConfig({
  vite: {
    resolve: {
      alias: {
        '@': rootDir,
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          loadPaths: [path.resolve(rootDir, './styles')],
        },
      },
    },
  },
});