Made in Builder

Made in Builder

Webinar 👉 Visually Build at Scale with Builder.io & Netlify on 12/1

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Enabling Environments for a Space

coming soon

private beta

enterprise plans

When you're developing and iterating on your product, you need a place to work freely while leaving your production code untouched. You might have a variety of environments such as Dev, Staging, QA, and Prod and push from one to the next as you work through the production cycle.

With Builder's environments, you can create environments to meet your company's workflow and sync environments, models, and content as needed.

This document covers the following:

Turning Live Sync off for a model

Turning Live Sync on for a model

Turning Live Sync off for content

Turning Live Sync on for content

Pushing model changes: push changes from unlinked models to the main environment

Pushing content changes: push changes from unlinked content entries to the main environment

Prerequisites

To get the most out of this tutorial, you should have already have the following:

Creating an environment

  1. Go to Account Settings.
  2. On the Environments tab, click the + New Environment button.
  3. In the dialogue that opens, enter a name for the new Environment.
  4. Click Create Environment. You can close the Creating your new environment notification as the process runs in the background. When the environment is ready, the Synced status changes to Completed.
  5. Click Enter to go into the new environment.

Tip: When you create an environment, make sure to integrate in the same way you integrate the main Space. For detailed instructions, refer to Integrating Pages.

The following video demonstrates creating an environment.

Click Enter to go into the new environment. To return to your main environment, select the main space from the top left sidebar or go to the Account Settings Environments tab and click Enter.

Syncing environments with Live Sync

With Live Sync, models and content are by default linked across environments. Linked models and content sync in real time so if you make model updates in the parent environment, the other environments reflect those changes.

However, you can turn off Live Sync for a model or content and work on that model or content independent of your main environment. Then you can push your changes to the main environment when you're ready.

To get changes from a child environment to the main environment, see Pushing changes from a child environment.

The following diagram shows that Live Sync only goes one way, from the main environment to child environments. When Live Sync is on, child environments reflect changes in the main environment.

Turning off Live Sync for a model

  1. Go to Account Settings.
  2. On the Environments tab, enter the environment where you'd like to turn off Live Sync. Note that you can only turn off Live Sync in child environments.
  3. In the environment, go to Models.
  4. Click on the Model you'd like to unlink.
  5. On the upper right of the Model, click the down arrow next to the Linked indicator and select Turn Off Live Sync.
  6. In the confirmation dialogue that opens, click the Turn Off Live Sync button. The Linked indicator changes to Unlinked.

The following video demonstrates turning off Live Sync for a model.

Turning on Live Sync for models

  1. Go to Account Settings.
  2. On the Environments tab, enter the environment where you'd like to turn on Live Sync. Note that you can only turn on Live Sync in non-prod environments.
  3. In the environment, go to Models.
  4. Click on the Model you'd like to unlink.
  5. On the upper right of the Model, click the down arrow next to the Unlinked indicator and select Turn On Live Sync.
  6. In the confirmation dialogue that opens, click the Turn Off Live Sync button. The Unlinked indicator changes to Linked.

The following video demonstrates turning on Live Sync for a model.

Turning off Live Sync for content

You can turn off Live Sync to work on content and models independent of your main environment. Then you can push your changes to the main environment when you're ready.

To turn off Live Sync for content, do the following:

  1. Go to Account Settings.
  2. On the Environments tab, enter the environment where you'd like to turn off Live Sync.
  3. In the environment, go to Content.
  4. Click on the content entry you'd like to unlink.
  5. In the Visual Editor, at the top, click the down arrow next to the Linked indicator and select Turn Off Live Sync.
  6. In the confirmation dialogue that opens, click the Turn Off Live Sync button. The Linked indicator changes to Unlinked.

The following video demonstrates turning off Live Sync for a content entry.

Turning on Live Sync for content

  1. Go to Account Settings.
  2. On the Environments tab, enter the environment where you'd like to turn off live sync.
  3. In the environment, go to Content.
  4. Click on the content entry you'd like to link.
  5. At the top of the Visual Editor, click the down arrow next to the Unlinked indicator and select Turn on Live Sync.

In the confirmation dialogue that opens, click the Turn On Live Sync button. The Unlinked indicator changes to Linked.

Tip: When you turn on Live Sync, all unpushed changes in the child environment are overwritten. If you want to keep your changes in the child environment, you must push to your main environment first.

The following video demonstrates turning on Live Sync for a content entry.

Pushing changes from a child environment

Pushing is the manual process of copying updates in the following ways:

  • from a child environment to the main environment
  • from a child environment to another child environment

If you push unlinked content to the main environment, Builder links the two environments. If however, you push from one unlinked sibling environment to another, the environments remain unlinked.

If you create or edit content or models in a child environment and want those changes in main, you must push in order of dependency:

  1. Push all changed models.
  2. Push dependent content, such as Symbols.
  3. Push the content.

Tip: You have to manually push changes from a child environment to the main environment—Builder does not push automatically from child environments to main.

The following diagram shows that pushing goes from a child environment to another child environment or to main:

Pushing model changes

When you have an unlinked model with changes that are ready for the main environment, you can push them from a non-prod environment to the main or a sibling environment.

If you push unlinked models to the main environment, Builder links the two environments. If however, you push from one unlinked sibling environment to another, the environments remain unlinked.

  1. Go to Account Settings.
  2. On the Environments tab, enter the environment with the updated model whose changes you'd like to push up.
  3. In the environment, go to Models.
  4. Click on the Model you'd like to edit.
  5. Edit the model.
  6. On the upper right of the Model, click the down arrow next to the Unlinked indicator and select Push to environment.
  7. In the confirmation dialogue that opens, click the Yes, Push Now button. Notice that the Unlinked indicator changes to Linked.

The following video demonstrates pushing changes from an environment named Dev to an environment named Prod and then shows going to Prod to display the changes.

Pushing content changes

  1. Go to Account Settings.
  2. On the Environments tab, enter the environment with the updated model whose changes you'd like to push up.
  3. In the environment, go to Content.
  4. Click on the content entry you'd like to push.
  5. In the Visual Editor, at the top, click the down arrow next to the Unlinked indicator and select Push to Main.
  6. In the confirmation dialogue that opens, click the Yes, Push Now button. Notice that the Unlinked indicator changes to Linked.

Tip: If you've created a model in a child environment rather than your main environment, be sure to push the model first, then the content.

The following video demonstrates pushing content changes from an environment named Dev to an environment named Prod and then shows going to Prod to view the changes.

Re-syncing an Environment

Re-syncing is the process of resetting an environment to mirror its parent space. By re-syncing, you delete all models and content in the environment and re-copy the models and content in the parent space to the environment. However, Builder retains the Public API Key, so you don't have to integrate again.

  1. Go to Account Settings.
  2. On the Environments tab, click the three dots to the far right of the Environment you'd like to re-sync.
  3. In the menu that opens, select Resync.
  4. Confirm that you'd like to re-sync the environment.

The following video demonstrates re-syncing an environment.


Need Expert help?

Reach out to us, and we will match you with a Builder expert.

Connect with us

Was this article helpful?