Is it possible to integrate a directory of people, built in Gatsby with Airtable, into Webflow using an embed or "rewrites" feature similar to Vercel and Cloudflare Pages?

TL;DR

Use an iFrame to embed the externally hosted Gatsby site within Webflow, but expect limitations in CSS and JavaScript.
Import Airtable data directly into Webflow's CMS and automate syncing with tools like Zapier.
Embed Airtable API calls using custom code in Webflow, considering CORS and rate limits.
If these do not suffice, set up a proxy or middleware server to handle requests externally.

Integrating a Gatsby site with Airtable into Webflow through an embed or a similar method involves several considerations. Webflow does not support direct server-side rewrites like Vercel or Cloudflare. Here's how you can approach this:

1. Use iFrame for Embed

Create an iFrame: You can host your Gatsby site externally and then embed it within a Webflow page using an iFrame.
Limitations: Note that iFrames might not offer full CSS customization or Javascript interactions within Webflow.

2. Use Webflow’s CMS

Manual Integration: Consider importing your Airtable data directly into Webflow's CMS and design within Webflow. This means you might need to periodically update or sync information manually.
Automation Tools: Use automation tools like Zapier or Integromat to automate data syncing to a certain extent.

3. Webflow & External API

Custom Code Embeds: Use Webflow’s custom code embed fields to fetch data via Airtable’s API. This requires knowledge of JavaScript and handling of API requests.
JavaScript Limitations: Be mindful of CORS restrictions and rate limits when accessing external APIs directly from the client side.

4. Proxy or Middleware Server

If Webflow's built-in options do not suffice, consider using a proxy or middleware server that can handle requests and deliver them to Webflow. This is a more advanced solution and requires setting up an external server.

Summary

Currently, integrating a directory built in Gatsby with Airtable directly into Webflow using a feature like rewrites requires workarounds. You can either use an iFrame, import data into Webflow's CMS, or embed API calls using custom code. Direct server-side rewrites like those offered by Vercel or Cloudflare are not available in Webflow at this time.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

Has anyone experienced a situation where after migrating a WordPress site to Webflow and connecting the domain from GoDaddy, BuiltWith still shows WordPress as the CMS instead of Webflow?

Is there a workaround to implement a >4MB gif on a Webflow project for autoplay on mobile?

How can I fix the misalignment issue with the arrow on the first collection item on the projects page in Webflow?

Is there a way in Webflow to select which specific forms send email notifications, as I have three active forms on my site and users are requesting to receive emails from only one form and not the others?

How can I fix the issue of text overlapping in a specific section of my website when the browser width is not wide enough in Webflow?

Any suggestions on how to resolve the issue where editors invited to my Webflow site are unable to create their username and password after entering the temporary site password?

How can I create a gallery with multiple images in Webflow and hide the scroll bar using CSS code, such as the mentioned code for body::-webkit-scrollbar?

How can I change the hover color of a button in Webflow's Slate design? I've already updated the basic color to green, but it still shows orange on hover.

How can I configure a large image to be in the foreground of my website homepage in Webflow, similar to an example I've seen, while still having a sidebar?

Can I host multiple websites using one Webflow site plan without the "Made by Webflow" badge?

Why can't I add a checkbox inside a dropdown widget in Webflow? And how can I create a multi-select dropdown with an expanded view in Webflow that allows the user to select multiple options without relying on the Cmd key?

How can I grab a Webflow collection based on its ID and store it in a variable? Can someone provide a snippet or example image? Also, is there a way to link embedHTML on the same page to share or access variables from each other (top-bottom)?

How can I link from a button on page 1 to a specific tab on page 2 in Webflow, which is located inside a section and needs to scroll down the page?

How do I integrate a Three.js powered animation into my Webflow project?

Has anyone experienced a situation where a CSS class is being added to the Body tag upon page load in Webflow, which overrides the default site styling? The attribute being added is 'data-wf-spring-theme-render' with a corresponding value. Thank you.

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?

How can the text color be changed for custom input fields on Webflow?

How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?

How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?

How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?

How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?

How can I implement a ThreeJS script as a background for my Webflow project using custom code?

How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?

Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?