DocumentationBlog
Documentation
Guide
Getting StartedRoutesStylesMetadataLoadersActionsCookiesDeployment
API
_layout.jspage.jspage.mdxhandler.jsfirebolt.config.js.envuseRouteuseCookieuseLoaderuseActionuseCache<Link><ErrorBoundary>Contextcsscls
Utilities
@firebolt-dev/cors@firebolt-dev/icons@firebolt-dev/snap

firebolt.config.js

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

firebolt.config.js
export const config = {
  // your config here
}

Port

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.

firebolt.config.js
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:

firebolt.config.js
export const config = {
  productionBrowserSourceMaps: true,
}

Context

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

firebolt.config.js
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:

firebolt.config.js
import remarkGFM from 'remark-gfm'
import rehypeShiki from '@shikijs/rehype'

export const config = {
  mdx: {
    remarkPlugins: [remarkGFM],
    rehypePlugins: [rehypeShiki],
  },
}

Cookie Defaults

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.

firebolt.config.js
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.

firebolt.config.js
export const config = {
  publicEnvPrefix: 'ANOTHER_PREFIX_',
}

Learn more about environment variables on the .env page.

Build

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

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

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

Start

The start function is run each time your app starts.

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

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

Middleware

Use middleware to intercept requests and handle them as needed

firebolt.config.js
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

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

firebolt.config.js
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>.

© 2024 Firebolt