Add a Preview Environment

You can preview your entry before publishing it on the production environment of your website or app in a few simple steps. Previewing your content is a two-step process that involves the creation of a Preview environment and then publishing content on this created environment.

In this guide, you need to create a preview environment that will point to the location where a demo version of your application is hosted. Then, publish your content to this preview URL and view how your content will display on the live site.

Let’s look at the steps in detail.

  1. Add a Preview Environment

    To add a preview environment, perform the steps given below:

    1. Click on "Settings" cog on the top and select Environments. You will see the list of all the previously created environments for the stack.
    2. Click + New Environment to create a new one. The Create Environment dialog box that appears allows you to add details about the destination.
    3. Enter a Name for the environment (in this case, "preview"). You can alternatively provide a name of your choice (maybe "development").
    4. Specify the Base URL for the environment. The Base URL is the consistent part of the destination’s web address. To preview your content, you need to provide the address of your localhost as the base URL of the environment, for example, http://localhost:4000.
    5. Leave the Deploy Content to Server(s) checkbox under the "Advanced" link unchecked if you do not wish to deploy content onto your local system.

    This creates your preview environment. 

    Additional Resource: To know more about environments and how to work with them, check out the Environment section.

    Let’s see how to publish your content on this preview environment.

  2. Publish Content on the Preview Environment

    Publishing your content on the preview environment can be done in two ways: Manual and Automatic.

    In Manual method, users need to manually publish content on the preview environment in order to view their content. Whereas, in the Automatic method, users can write a script that will publish content every time an entry is either created or updated.

    A. Manual Method

    In this method, all you need to do is publish the item (entry or asset) in your preview environment whenever you want to view your content. This method gives you the flexibility to publish your content on your preview environment only when it’s required.

    B. Automatic Method

    You can create a setup such that whenever you create or update an entry in your stack, it will be automatically published to the preview environment.

    In this method, you’ll need to create a webhook that triggers whenever content is either created or updated. So, whenever a new item (entry or asset) is created or existing items are updated, this webhook will be triggered to send a notification each time to the URL of your choice.

    B. 1. Create a Webhook

    To create a webhook, perform the steps given below:

    1. Click on 'Settings' cog on the top and select Webhooks. A list of all previously created environments for the stack will be displayed.
    2. Click on either Let’s go make one! (if no webhooks are generated) or the + New Webhook link at the top-right side of the page.
    3. Add the required details in all the fields. In Step 2. B. 2 given below, you will learn how to generate the URL for the URL to notify field. As of now, you can put a placeholder and proceed with the remaining steps. However, make sure you replace the placeholder URL with the actual URL once you create one in the next step.
    4. Add the parameters as given below.
      • Any: ‘Any’ (no change)
      • Select Module: ‘Entry’
      • Select Content Type (Optional): Select a content type only if needed, else leave it blank
      • Select Action: ‘Created’
      Click on the ‘+’ (plus) icon at the right-hand side corner to add another condition, and enter the following details:
      • Any: ‘Any’ (no change)
      • Select Module: ‘Entry’
      • Select Content Type (Optional): Select a content type only if needed, else leave it blank
      • Select Action: ‘Updated’

    Once this is done, save the webhook, and repeat the same process for adding webhooks for assets. Read more on Webhooks.

    With this step, you have ensured that whenever you create or update an entry or asset, the webhook will be triggered. The details of the triggered event will be notified to the URL that you have specified in the webhook.

    B. 2. Script to Publish Content on the Preview Environment

    You need to set up a server and add a POST call to it that publishes content to the Preview environment. The URL of the POST call should be the URL to notify in your webhook. So, whenever you save content, the webhook will be triggered and the POST call will be executed.

Additional Resource: For websites developed using Gatsby and Contentstack, the Gatsby Preview extension lets you preview the content changes as soon as you make them.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

top-arrow