[Support Guide] Protecting Visual Editor Against Broken Code in Netlify Create

A strategy for working around bugs that appear in the branch that content editors use to visually edit their site.

Netlify Create’s visual editing experience uses the code from a configured working Git branch. This is rarely the production branch, and it is often used to stage changes prior to releasing to production.

As a result, it’s possible that a bug gets introduced which prevents content editors from making further changes to the site until the issue is resolved.

Intermediary QA Environment

To protect against this (and improve quality), you can establish an intermediary environment where all code changes considered ready to deploy by developers can be reviewed easily by content editors (or dedicated QA) before being approved and deployed.

Setting Up a QA Project

Assuming you have a site called awesome-site with typical configuration, you can set up a QA environment with the following steps:

  1. Create a branch in your repository for the site (e.g. qa, acceptance, etc.).
  2. Create a new project by selecting Use my repository, and choose preview as the target branch and your new branch (qa) as the working branch. Append “QA” to the end of the project name (e.g. awesome-site (QA)).

QA Project Workflow

The new workflow could then move like this:

  1. Once this site is established, developers would merge their code from feature branches into qa (and not into preview).
  2. Those who have access to the new awesome-site (QA) project can then visually review new code in the qa branch.
  3. Users with an Owner or Developer role for that project will be able to publish, which would merge the code from qa into preview. (This could also be done on GitHub.)
  4. Once these changes are merged, editors working in the awesome-site project can then edit with confidence that the code in the branch is production-ready.

Accounting for Headless CMS

If your project uses a headless CMS, you can decide whether to have the QA project connect to the same CMS content. Or it could use staging or placeholder content that you configure using the project creation wizard.