Home App Docs Blog Github

How do I show different content in my development, qa, and production environments using Builder?

Sometimes you might want to publish content that is only visible on your development or QA environment in order to test it fully end to end before promoting it to production. Or maybe you want to publish content that you do not want to appear on your production site, but you want to test it on another environment. To do that, we suggest using custom fields to specify what content should appear where.

Side note: we don’t recommend the traditional dev-> qa ->production flow for every single tiny content change, since that sort of slows down part of the power of Builder: content changes without any deploys! However, this flow is very helpful when testing new components, or doing site overhauls, or any sort of larger project where you want to do more in depth testing

Start by picking a model that you want to have appear in specific enviroments when you query for entries. In this example I am going to use a model named custom-fields-example. Navigate to that model’s settings page (visit builder.io/models) and select the model you want to add the field to.

Next, click + new custom field

Next, name the field and add in the other information for each field. Then click on show more options to make the field an enum in order to give it preset options instead of making the user type in the field each time they update it:

After adding this information to our field, save the model:

The next step is to create a new entry for this model, or navigate to an existing entry of this model type and add the desired field value to it. NOTE: This field value is not retroactive, so you will need to set it for any entries that were created before you add this field in order for your querying to work in your app.

Open the desired content entry in the Builder editor, and then look in the options tab. You should now see the environment field as an option. Set it to the desired value for your content and hit publish.

That’s it for setup within Builder. The next step is to update your app to only show the desired content based on the environment. To do this, you need to query the Builder API and include the value of the tag that you want to show content for. For example, if you want to find the first 10 entries of your model that are labeled as qa, you can do the following query:

https://cdn.builder.io/api/v2/content/<YOUR-MODEL-NAME>?apiKey=<YOUR-API-KEY>&query.data.environment=qa

Notice the query.data.environment part, that is what is telling the Builder API to only return results that are labeled qa. If you wanted the production results, you would just change that value to query.data.environment=production. Learn more about querying our API here.

Querying also works if you are using one of our SDKs. You can pass the query via the options you pass to Builder like this:

  <BuilderComponent
     model="YOUR-MODEL-NAME"
     options={{ query: { data: { environment: 'production }}}} />

or

builder
  .get(YOUR_MODEL_NAME, {
    query: {
      data: {
        environment: 'production',
      }
    },
  })
  .promise()
  .then(({ data }) => {
    // Do something with the data
  });

And that’s it! As a bonus - this same setup of creating custom fields and and queries can work great for other use cases, such as localization (field for locale), multitenancy (e.g. field to distinguish a separate site or business unit), etc.

Next steps

The techniques described above work great in combination with custom views and custom roles