Docs

Bring Your Own Framework

Configuring Stackbit to work with any framework

Here's how to configure Stackbit to work with any framework for which we do not have built-in support.

Start with Local Development

First, make sure your website is editable via our visual editor in local development mode.

  1. Set ssgName: custom in your Stackbit configuration file (see reference).
  2. Implement content reload when your website is open within the visual editor, by capturing the stackbitObjectsChanged window event. The guides section below links to concrete examples with various web frameworks.

Define how we run your site

Once visual editing is working well locally, it's time to configure how your website should run as a hosted Stackbit project.

Define the command to launch your website's server in development mode via the devCommand property (reference).

For a smooth experience in the visual editor, you may also need to define additional properties which are currently experimental:

  1. experimental.ssg.logPatterns.up
    • When we run your website's server, it typically takes some time (from as few seconds to a few dozen seconds) before the server process is ready to accept requests. Set this property to the log message (or any part of it) that is printed when the server is ready.
  2. experimental.ssg.passthrough
    • Many frameworks use a Websocket connection in development mode between the client and server, to trigger a client-side refresh on code changes (a.k.a. HMR or Hot Module Replacement). The relative path to the websocket endpoint on the server should be specified in this attribute, so our container does not interfere with it.

Managed hosting

If you're using our Managed Hosting for your live site, you also need to include a Netlify configuration file (netlify.toml) in your repository.

Pay close attention to the following:

  • Under [build], define the build command and its output directory.
  • If Netlify has a dedicated plugin for the framework you're using, make sure to reference it under [[plugins]].

For example, see here.

Guides

The following frameworks are implemented with ssgName: custom:

If you see a need for another framework not listed yet, talk to us!