The Pros and Cons of Working Locally

The motivation to work locally is clear: you work with your preferred tools, configured just the way you like it, with the quickest response time.

When working locally with Next.js development mode, any update you make to code or content files is instantly reflected in your local server, the same as in the online visual editor. However, there's a disadvantage:

The local server does not provide you with the visual on-page highlighting and editing tools that you have in the visual editor. These tools are a layer that the online editor adds over the pages your code renders. To see the effect on your change on the visual editor, you'll need to commit and push your changes back to the preview branch. The editor will update automatically!

The choice whether to work locally or not is up to you, and may also depend on the context:

  • For complex React work, local development may be best.
  • When adding annotations or updating models, work fully online - or work locally side-by-side with the visual editor open, and push as needed.
  • To make large code changes without affecting the preview branch, work locally under a side branch and only merge it when done.

Set Up

Head over to the project settings in the visual editor (through the cog icon at the top left). You will find there the exact commands to run locally for your project's Git repository. Note: if you haven't moved the project repository to your own GitHub account, you will have to do so first.

These commands should look similar to this example:

git clone<user>/<repository-name>
cd <repository-name>
git checkout preview
npm install
npm run develop

Note: if your default version of Node.js is different from the major version specified in the project configuration, you may get a different behavior when running locally than in the visual editor and your live website. You can opt to use a tool such as nvm to set the correct Node version just in the scope of your project.

Validate Models Locally

When you've made changes locally to either content or the content model and run the local server using npm run develop, you may see warning messages in the log regarding model and content validation. However, these validations are not exhaustive.

To run the most verbose set of validations, use the Stackbit CLI tool:

  • To install it at the user level (needing no sudo), run npm install -u @stackbit/cli.
  • Then, run stackbit validate from the project directory to performe validations and review any warnings.