The Firebolt config file allows you to configure how your app runs.

export const config = { // your config here }


By default your app will attempt to use the PORT environment variable, otherwise it will use the port in your config file which defaults to 3000.

export const config = { port: 4000, }

Source Maps

Production builds don't include source maps in client bundles by default, but you can enable them with this setting if needed:

export const config = { productionBrowserSourceMaps: true, }


You can decorate the Context object that is passed to middleware, loaders, actions and handlers

import db from './db' export const config = { context: { db, }, }

In this example, all Context objects will be provided a ctx.db value

MDX Plugins

Firebolt uses MDX and you can configure plugins for it here:

import remarkGFM from 'remark-gfm' import rehypeShiki from '@shikijs/rehype' export const config = { mdx: { remarkPlugins: [remarkGFM], rehypePlugins: [rehypeShiki], }, }

By default, if you don't provide options when setting cookies they will expire after the current session.

It can be useful to set your cookie defaults globally so that you don't have to provide options repeatedly throughout your app.

export const config = { cookie: { expires: 30, // expire in 30 days }, }

See useCookie for all available options.

Public Env Prefix

By default any environment variables with the PUBLIC_ prefix will be available on the client. You can change this prefix if needed.

export const config = { publicEnvPrefix: 'ANOTHER_PREFIX_', }

Learn more about environment variables on the .env page.


The build function can be used to do any kind of work at build time, such as generating sitemaps or icons.

export const config = { async build() { // ... }, }

The function is called just once when running npm run dev or npm run build.


The start function is run each time your app starts.

export const config = { async start() { // ... }, }

The function is called just once when running npm run dev or npm run start.


Use middleware to intercept requests and handle them as needed

export const config = { middleware: [ (ctx) => { // example middleware that tags all requests with an ID ctx.headers.set('X-Request-ID') = ctx.uuid() }, (ctx) => { // example middleware that intercepts /foobars and returns some text if (ctx.req.pathname === '/foobars') { return new Response('foo-bars', { headers: { 'Content-Type': 'text/plain', }, }) } }, ], }

Middleware is provided a Context object that provides the Web API Request and utilities to manage cookies, headers and custom values (such as a database) that you configured in your firebolt.config.js.


Plugins augment your config to intercept and handle requests among other things.

import icons from '@firebolt-dev/icons' export const config = { plugins: [icons()], }

The @firebolt-dev/icons plugin generates all of your favicons and icons from a single svg and injects them into your <head>.