Docs

Frameworks

Configuration properties that tell Stackbit which framework you're using.

When using an officially-supported framework, Stackbit can better control features like automatic content reloading. However, you also have the option to bring your own framework.

If you have questions about a framework you don't see mentioned here, talk to us.

Global Properties

customContentReload

Specifies whether your code takes care of refreshing pages on content changes by itself.

Required
No
Allowed Values

false: Stackbit automatically detects content changes made by any content editor and refresh the page, attempting to do so in a efficient manner specific to your framework. You can augment or override this behavior via client-side code.

true: It is your code must detect content changes and handle refreshing the page.

Default
false
Stackbit Version
>= 0.5.0
  • 1
  • 2
  • 3
  • 4
export default {
  customContentReload: true,
  // other properties ...
}
  • Projects using older Stackbit versions typically depend on the Sourcebit package to implement this functionality.
To learn more, see the Automatic Content Reload feature guide, along with the stackbitObjectsChanged event reference.

nodeVersion

Specifies the major version of Node.js to use when running your site in Stackbit's web application.

Required
No
Allowed Values
12, 14, 16, 18 (as a string)
Default
'16'
  • 1
  • 2
  • 3
  • 4
export default {
  nodeVersion: '18',
  // other properties ...
}
  • This property is not used in local development, as your project is being run locally on your machine using its Node version.
  • Stackbit uses the latest stable patch for the major version.

ssgName

The web framework used in your project.

Required
Yes
Allowed Values
angular, gatsby, nextjs, or custom
  • 1
  • 2
  • 3
  • 4
export default {
  ssgName: 'nextjs',
  // other properties ...
}

Custom Frameworks

When ssgName is set to custom, there are a few additional options you have for configuring your project.

devCommand

Set a custom command to run your development server.

Required
If ssgName is set to custom.
Allowed Values
String specifying the command that runs your website's server in development mode.
Default
Inferred from ssgName, unless ssgName is set to custom, in which case this property must be specified.
  • 1
  • 2
  • 3
  • 4
export default {
  devCommand: './node_modules/.bin/ng serve --port {PORT} --disable-host-check`',
  // other properties ...
}
  • The current working directory is your code's root directory. This means that various scripts installed by NPM packages are to be found in ./node_modules/.bin/.
  • Your server should accept requests from hosts other than localhost (or 127.0.0.1).
  • The port to listen on should always be configurable. In the command you specify include the {PORT} placeholder, which will be substituted when we run the command.

experimental

The experimental property is an object that contains various properties that Stackbit uses to provide a tighter integration to site frameworks before officially supporting them.

Experimental properties are subject to change.

ssg

Provides a means for customizing how Stackbit interacts with your framework's development server.

Required
No
Allowed Values

name: A string representing the name of the SSG you are using.

logPatterns.up: An array of strings, where each string is printed to the console when the server is ready.

passthrough: An array of strings representing directory paths that Stackbit should not interfere with.

Default
Inferred from ssgName, unless ssgName is set to custom, in which case this property must be specified.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
export default {
  experimental: {
    ssg: {
      name: 'sveltekit',
      logPatterns: {
        up: [' ready in '],
      },
      passthrough: ['/vite-hmr/**'],
    },
  },

  // other properties ...
}
  • To prevent the visual editor from making requests to the server too soon and causing errors or timeouts, set the logPatterns.up property to the log message that is printed when the server is ready, or any portion of it which is always printed to console exactly in the same way.
  • Set the passthrough property to the relative path of the websocket endpoint on the server to prevent the container from any interference with it. You may also need to define this path in your Webpack's/Vite's configuration.
  • Refer to framework guides for more information about specific configurations. Or contact us if you don't see the framework you're working with.