In this lesson, you will configure a preview URL for the Product model. Once configured, every product entry in the content editor displays an Open live preview button in its sidebar. Clicking it opens a preview of that product page in your local frontend using the draft content token configured in lesson 8.2.

The preview URL uses a secret key to prevent unauthorized access to draft content. Only requests that include the correct secret can trigger a draft preview. Generate a strong secret and do not commit it to version control.

#Configure the preview URL

1. Navigate to the Schema and select the Product model.

2. Click the Sidebar tab.

3. Select the Preview widget.

4. Provide the following details:

   • Preview Name: Product preview
   • URL template: http://localhost:3000/api/draft?slug={productSlug}&model=products&secret=YOUR_SECRET_HERE

   {productSlug} is handlebars notation. Hygraph replaces it with the productSlug field value of the entry being previewed. The API ID productSlug was set when you created the Product Slug field in lesson 1.2.

5. Click Save.

#Add the preview secret

1. Generate a secret key using a key generator of your choice. Use a strong random string.

2. Replace YOUR_SECRET_HERE in the URL template with the generated secret.

3. Open .env.local and add the secret as HYGRAPH_PREVIEW_SECRET:

   HYGRAPH_PREVIEW_SECRET=YOUR_SECRET_HERE

   Copy

4. Restart the local development server to load the new environment variable:

   npm run dev

   Copy

#Your complete .env.local

At this point, all three environment variables should be populated. Your .env.local file should look like this:

HYGRAPH_ENDPOINT=YOUR_CONTENT_API_ENDPOINT_HERE
HYGRAPH_DEV_AUTH_TOKEN=YOUR_DRAFT_TOKEN_HERE
HYGRAPH_PREVIEW_SECRET=YOUR_SECRET_HERE

If any of the three are missing or incorrect, the preview will not work.

#Verify the preview URL

1. Navigate to the Content editor and open any product entry.

2. Click Open live preview.

   The product page should open in a new browser tab at http://localhost:3000 showing the draft version of that product.

#What's next

Or, go to the Tutorial overview for the full lesson list.