Stackbit Configuration

Adding Stackbit's local visual editor application to an existing site takes just a few quick steps.

Install CLI#

Install the Stackbit CLI, which we'll use to launch the local visual editor application.

npm install -g @stackbit/cli@latest

Run Visual Editor#

With the Next.js development server still running, open a new terminal session to run the visual editor using the CLI's dev command.

stackbit dev

Now, if you visit localhost:8090, you'll see the Next.js site that is also running on port 3000. The application running on port 8090 is a local Stackbit application that proxies to the development server, and also contains a few assets and routes to facilitate visual editing.

Register Your Project#

One such route is /_stackbit. This will redirect to the authentication process that makes it possible to work with Stackbit locally.

Open localhost:8090/_stackbit in your browser and create an account. You'll be redirected to a new URL that is unique to your local editing environment. The preview here is the application running on localhost:8090.

Configure Content Source#

Next, we have to add our configuration file to tell Stackbit how content is stored. First, install a couple development dependencies. (Stackbit does not require any production dependencies.)

npm install -D @stackbit/cms-contentful @stackbit/types

Then, add a stackbit.config.ts configuration file that specifies the source of content as Contentful. This is the minimum configuration needed to work with this project locally.

import { ContentfulContentSource } from '@stackbit/cms-contentful'
import { defineStackbitConfig } from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [
    new ContentfulContentSource({
      spaceId: process.env.CONTENTFUL_SPACE_ID!,
      environment: process.env.CONTENTFUL_ENVIRONMENT || 'master',
      previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN!,
      accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN!,
    }),
  ],
})

Basic Content Editing#

Notice that the content tab is populated with the content in your Contentful space. This is editable via a two-way content sync.

You can edit in Stackbit and it will be saved in Contentful. Or you can edit in Contentful, and the new values will be pulled into Stackbit automatically.