Dynamic Preview Url's referencing domain name from the space

Technical Questions
1

I have a section called ‘practices’ that i have created and following the default example I have set the preview url to be dynamic using the following logic:

return http://localhost:3000/practices/${content.data.name || '_'}

This works but when I want to deploy the site to another domain I need to update the domain name in multiple places. Ideally I would rather update the domain name of the site on the space settings and then reference that value here. Something like:

return ${space.siteUrl}/practices/${content.data.name || '_'}

I am sure this is possible but I need help figuring out the syntax. Please advise.

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. Builder.io: Visual Development Platform

Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

Here is an example of using the space object in the Preview URL logic:

return `${space.siteUrl || 'http://localhost:3000'}/practices/${content.data.name || '_'}`

Detailed Steps

Step 1: Add the siteUrl in Space Settings

  1. Navigate to Space Settings:
  • In the Builder.io interface, go to the Settings for your space.
  1. Add or Verify Site URL:
  • Make sure there is a site URL setting, commonly named siteUrl. If it doesn’t exist, you might need to add a custom field or set it in space settings directly.

Step 2: Use the siteUrl in Preview URL Logic

  1. Edit the Preview URL Logic for Your Section:
    In the logic for your model’s preview URL, use the space setting:
// The default base URL
const defaultBaseUrl = 'http://localhost:3000';

// Use siteUrl from space settings or default to localhost
const baseUrl = space.siteUrl || defaultBaseUrl;

// Construct the full preview URL
return `${baseUrl}/practices/${content.data.name || '_'}`;
  1. Save and Test:
  • Save the settings and test your content preview. It should dynamically use the siteUrl defined in your space settings.

Let me know if this doesn’t help!