On this page
Configuration
When the Root.js CLI is run, it will load the project's root.config.ts file for configuration options.
Below are a few details for the most common configuration options are available for Root.js. For the full list of options, check out the source code on GitHub.
base
Sets the base URL path that prefixes all route URLs.
Example:
// @/root.config.ts
import {defineConfig} from '@blinkk/root';
export default defineConfig({
// The site serves on example.com/about/...
base: '/about/',
});domain
Canonical domain the website will serve on. Useful for things like the sitemap, SEO tags, etc.
Example:
// @/root.config.ts
import {defineConfig} from '@blinkk/root';
export default defineConfig({
domain: 'https://example.com',
});elements
Configures the automatic custom element detection used by the Root.js renderer. By default, Root.js will search for matching custom element files found in the elements/ folder. You can add additional folders, or exclude specific files.
Example:
// @/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
Localization and internationalization settings for the site. Allows you to set which locales the site is available on, and the URL structure for locale-specific paths.
Example:
// @/root.config.ts
import {defineConfig} from '@blinkk/root';
export default defineConfig({
i18n: {
locales: ['de', 'en', 'es', 'fr'],
urlFormat: '/intl/[locale]/[base]/[path]',
},
});server.redirects
Configures redirects for the server.
Example:
import {defineConfig} from '@blinkk/root';
export default defineConfig({
server: {
redirects: [
// Redirect /foo to /bar.
{source: '/foo', destination: '/bar', type: 301},
],
},
});server.trailingSlash
Sets the trailing slash configuration for the server. By default, trailing slash is optional, and the server will render the same route with or without the trailing slash.
If set to "true", paths that do not have a trailing slash will automatically redirect to enforce the trailing slash.
Conversely, if set to "false", paths with a trailing slash will redirect to the path with the trailing slash removed.
Example:
import {defineConfig} from '@blinkk/root';
export default defineConfig({
server: {
// Enforce trailing slash.
trailingSlash: true,
},
});vite
Configures Vite-specific settings. See Configuring Vite for more details.
Example:
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: {
includePaths: [
path.resolve(rootDir, './styles'),
],
},
},
},
},
});