Setting Up Reverse Proxies in Webflow

In this tutorial, we will explore the process of setting up reverse proxies in Webflow. Initially, we played around with reverse proxies, exploring their capabilities and potential. We then proceeded to set up a full production project comprising three distinct Webflow sites, each with its unique domains. The goal was to configure a reverse proxy to serve these sites under a single domain. In this final part of the tutorial, we will see the completion of this setup.

Use Case for Setting up a Reverse Proxy

To illustrate the use of a reverse proxy in Webflow, we will employ a spare domain, webcharries.com. While you can choose any domain for this setup, the spare domain will serve various scenarios handled by the reverse proxy. These scenarios include:

1. Main Domain: When visiting just webcharries.com or any page of webcharries.com like webcharries.com/about.
2. Subdomains: Visiting sub-routes, which would be served from different subdomains, such as sub1.webcharries.com and sub2.webcharries.com.

Managing Subdomains and Paths

To effectively direct traffic to the designated Webflow projects, each project will reside in a subdomain. The main project will be hosted at wf.webcharries.com, while sub-projects will reside in subdomains named as the project paths, such as sub1 and sub2.webcharries.com. When a user visits the main domain or any subdomain, the reverse proxy should serve the corresponding project based on the URL.

Addressing Trailing Slashes

When handling URLs with trailing slashes, you must consider whether a path ends with such a slash. This step is crucial in ensuring a seamless user experience and preventing duplicate content issues. To address this, we'll create a function to check for trailing slashes in the path names.

function hasTrailingSlash(pathName) {  const trailingSlashRegex = /\/$/;  return trailingSlashRegex.test(pathName);}

Matching Subdomains with Reverse Proxy

To route traffic to the correct Webflow project, we need to check if the first path matches one of the reverse proxy subdomains. This will help determine which project should serve the requested content. We'll compare the path with a list of subdomains to find a match.

const subdomains = ['sub1', 'sub2']; // Array of reverse proxy subdomainsfunction pathMatchesReverseProxySubdomain(subdomains, path) {  const firstPath = path.split('/')[0];  // Check if the first path matches a subdomain  if (subdomains.includes(firstPath)) {    // Construct the proper URL to fetch the content from the matched subdomain    // Fetch the content and handle potential redirection  }}

Handling Redirects and Response Checks

After matching the subdomains, we'll construct the proper URL to fetch content from the matched subdomain. We'll handle potential redirects and response checks to ensure a seamless browsing experience for users.

Configuring the Worker and DNS Settings

Once the reverse proxy logic is in place, we must connect the project domains to Cloudflare. We'll configure DNS settings to point each subdomain to the corresponding Webflow project using Cloudflare's interface.

Addressing Trailing Slash and Canonical URLs

We'll explore the importance of addressing URLs with trailing slashes and setting up canonical URLs. This ensures that content is served consistently and avoids duplicate content issues, optimizing the site's SEO performance.

Handling Reverse Proxies with E-Commerce

It's important to note that using reverse proxies with Webflow e-commerce sites requires careful consideration. Due to the inherent communication between the server and Webflow for e-commerce verification, reverse proxies may cause issues. We recommend caution when using reverse proxies with Webflow e-commerce projects to avoid potential conflicts.

In conclusion, setting up reverse proxies in Webflow offers a powerful solution for serving multiple projects under a single domain. By carefully configuring DNS settings, handling redirects, and managing canonical URLs, we can optimize site functionality and ensure a seamless user experience.