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.

Note: We now offer the Live Preview feature to preview your content changes in real-time without saving or publishing them to an environment. Contact our Support team to add the Live Preview feature to your Contentstack (organization) account subscription.

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.

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.

Note: Contentstack no longer supports the ability to add multiple content deployment servers while setting up a specific publishing environment in Contentstack. We recommend that you instead make use of Webhooks to trigger deployment to multiple web servers whenever you publish content to an environment.

Let’s look at the steps in detail.

1. Add a Preview Environment

   link

   To add a preview environment, log in to your Contentstack account, navigate to your stack, and perform the steps given below:

   1. Click on the "Settings" icon (press “S”) on the left navigation panel and select Environments (or press “alt + E” for Windows OS, and “option + E” for Mac OS). 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 under the "Base URLs" section. 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.

   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

   link

   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

   link

   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

   link

   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 the “Settings” 'icon on the left navigation panel and select Webhooks. A list of all previously created environments for the stack will be displayed.
   2. Click on 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 in the When section 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 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.

3. Preview the Published Content

   link

   After publishing your content on the preview environment, open your browser and point to http://localhost:4000. You should be able to see a basic structure of your content without any styling. If this content looks good to go ahead, you can then publish the content on the actual live site where your CSS stylesheet would make your content presentable.