Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

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

in beta

enterprise plans

After Setting Up Environments for a Space, you can determine which models and content entries are synced to your main environment.

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

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.

Tip: Make sure to manually migrate webhooks so that you can ensure that the environment-specific URLs are correct.

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.

  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.

  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.

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.

  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, which is a manual process, gives you full control over when and how your changes are propagated so that you can carefully review updates before pushing them to the production environment.

Pushing is a 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:

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.

Note that if more than one person is working on a model and someone pushes the changes in that content entry, all changes by all users are simultaneously pushed.

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.

When you're ready to push content changes, be aware that if more than one person is working on a content entry and someone pushes the changes in that content entry, all changes by all users are simultaneously pushed.

  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 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.

If you're working with environments, make sure to read Environments and Permissions so you can specify which users can push from one environment to another.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy