Hosting Guide

Previewing URLs in a web browser can be tricky because it requires a server. Browsers have strict security rules that limit what JavaScript on a webpage can access.

For example, if you try to get data from another domain (like https://example.com), the browser will block it due to the Same-Origin Policy. This policy is there to protect users, making sure scripts can only access resources from the same site.

To get around this, you need a server that fetches the data for the URLs you want to preview. The server acts as a middleman, allowing your app to access and show the information without breaking browser security rules.

Our Solutions

There are three ways you can use our components:

1. Automatic data fetching using our server
2. Manually passing data to the components
3. Fetching data using your own server

1. Automatic data fetching using our server

The simplest solution is to use our server. Our server fetches the data for the URLs you want to preview and you only need to pass an URL to the component. It works like magic.

Here is an example:

<previewbox-link href="https://web-highlights.com/"></previewbox-link>

This is very easy to implement and you don't need to worry about the complexities of server setup. However, this solution requires server capacities that's why we have a generous free tier which should be more than enough for most hobby projects.

You can check your current usage and limits here.

2. Manually passing data to the components

Another solution is to manually pass the data to the components. This is useful if you have all the static data upfront and you just need a UI component to display it.

Here is an example:

<previewbox-link
  url="https://example.org"
  title="This Title Was Manually Passed"
  description="This description was manually passed. The data was not fetched from the URL because no href was provided."
  imageUrl="https://picsum.photos/1200/630"
  imageAlt="Lorem Ipsum Image"
  author="Jon Doe"
></previewbox-link>

You can find all available properties in the API documentation.

3. Fetching data using your own server

The third solution is to fetch the data using your own server. This is useful if you the free tier of our server is not enough for your use case and you don't want to pay for it.

Our components support passing a custom api url to the component. When passing a custom api url the components will fetch the data from your server instead of from our server.

To do this you can pass the apiUrl property to the component, here is an example:

<previewbox-link
  apiUrl="https://your-server.com/api"
  href="https://web-highlights.com/"
></previewbox-link>

In this example the component will fetch the data from https://your-server.com/api?url=https://web-highlights.com/ instead of from our server.

The server needs to implement the same interface as our server. Here is what you need to implement:

• The server needs to support CORS.
• The endpoint needs to accept a url query parameter.
• The endpoint needs to return a JSON object with the same properties as the LinkPreviewData interface.

We have set up a ready to use example server you only need to deploy. You can find it here.