What is the difference between site url and preview url?

General
1

Hello,

What is the difference between site url and preview url ?

Should they be the same or they can be different ?

For example if i have http://localhost:3000 for local development and a deployed dev version https://dev.<site name>.com should i set the site url to the deployed version and the preview url to the localhost version … ?

2

Hello @Mehan,

Great question! Understanding the difference between the Site URL and the Preview URL in Builder.io is important for setting up your development, staging, and production environments correctly.

Site URL vs Preview URL

Site URL:

  • The Site URL is the primary URL where your website is hosted and served to end-users. This is usually the live, production version of your site that visitors access.
  • The Site URL is used by Builder.io to link to your live site from the Builder interface and for various publishing and integration purposes.

Preview URL:

  • The Preview URL is specifically used to preview and test your content changes in the context of your actual website environment before publishing them live.
  • This URL points to a development or staging environment where you can safely view and interact with your content without impacting the live site.
  • Typically, the Preview URL is used in integration environments and might point to a local development server (http://localhost:3000) or a staging environment (https://dev.<site name>.com).

Should They Be the Same or Different?

They can and often should be different:

  • Local Development: When working on local development, you might set the Preview URL to http://localhost:3000 so that you can see changes in your local development environment.
  • Staging Environment: When you have a deployed staging or dev environment, you might set the Preview URL to something like https://dev.<site name>.com.
  • Production Environment: The Site URL should point to your live production site, e.g., https://www.<site name>.com.

Example Configuration:

  1. Local Development:
  • Site URL: https://www.<site name>.com
  • Preview URL: http://localhost:3000
  1. Staging/Development Environment:
  • Site URL: https://www.<site name>.com
  • Preview URL: https://dev.<site name>.com

How to Set These URLs:

In Builder.io:

  1. Access Your Space Settings:
  • Go to the Builder.io dashboard.
  • Select your space.
  • Navigate to the Settings section.
  1. Set the Site URL:
  • Enter the main production URL of your site in the “Site URL” field.
  • Example: https://www.yoursite.com
  1. Set the Preview URL:
  • Enter the URL of your preview environment (local development or staging) in the “Preview URL” field.
  • For local development: http://localhost:3000
  • For staging: https://dev.yoursite.com

Summary:

  • Site URL is the live, production URL of your site.
  • Preview URL is used for testing and previewing content changes safely, pointing to your local development or staging environment.
  • They can and often should be different based on your development workflow and environment setup.

By appropriately setting these URLs, you can ensure a smooth development and deployment workflow, where content changes can be previewed in a safe environment before going live.

For more detailed information, you can refer to Builder.io documentation on Editing and Previewing Your Site.

1 Like