Web Development

How 2 or More Users Can Work on a Single Webflow Website In Parallel

Published:
May 28, 2020
Update:

Disclaimer 1: This approach is not officially supported by Webflow right now, however it doesn’t exploit any Webflow vulnerabilities. So there’s hardly anything Webflow can do to affect its work.

Disclaimer 2: Setting up this approach requires certain software engineering skills.

Disclaimer 3: This approach has some disadvantages listed in the final section.

Introduction

Webflow is a great tool for building websites. Being a top-notch website development platform, it still lacks one important feature now: it doesn't allow several developers to work on a single website in parallel. While it’s not so important when your website is simple and small, it can slow you down dramatically when the website starts to grow.

At Akveo, we have faced this issue and tried to find a way to solve it. There is hardly any perfect solution, but the approach we’ve developed can help people who have encountered the same difficulties as we have. Though it still doesn’t support real-time collaboration on a single page, our team’s performance and speed have greatly increased as 2 Webflow developers can now work on the different logical parts of the website simultaneously.

Ingredients

What you need:

  1. 2 or more Webflow Site Plan accounts (equivalent to the number of users you need to work concurrently).
  2. A reverse proxy server like NGINX to combine all your Webflow websites in a single one.
  3. A CDN like Cloudflare to speed up your final website.

Guide

Webflow Accounts and Webflow Domain Setup

First of all, you need to split your website into several logical parts where your Webflow developers could work independently. These parts can be:

  1. Home page and blog.
  2. Home page and eCommerce pages.
  3. Landing pages and blog, etc.

Technically, there can be one developer per each website page. 

NOTE: it still won’t be possible to work on a single page in parallel.

Then, you need to buy a Webflow Site Plan for each logical part of your website. If you already have common elements designed (header, footer, blocks, etc.) at this point, you can copy-paste them from one account to another.

Now, you need to set up the custom domains for your accounts. You can assign them to the subdomains of your website main domain. Thus, if you plan to have your website at yoursite.com, the first Webflow account should be part1.yoursite.com, the second one – part2.yoursite.com, and so on. Also make sure that Enable SSL toggle is switched off for each account, as it will simplify the NGINX setup later.

After this, your Webflow developers can start working on the different parts of your website while you’re finishing the setup. The only thing they need to do is keep the URL structure according to your domain root. So, if you choose a particular account to manage the pages under /part1, all the pages under this subdirectory should be placed within /part1 of this account.

One more important thing: one of your Webflow accounts should be responsible for providing correct sitemap.xml, which is important for SEO. If you want a sitemap file to be automatically generated by Webflow, you need to create an empty page for every page managed by another Webflow account. In such case, these pages will be present in sitemap.xml, but NGINX will serve them from another account. You will learn about it later.

NGINX Reverse Proxy Setup

Once you complete the Webflow setup, it’s time to configure your NGINX reverse proxy. To do this, you will probably need web development skills, or some help from a person with the relevant background. Actually, there’s another way around if you already have a Cloudflare Enterprise Subscription (according to the forums, Cloudflare Enterprise supports reverse proxy functionality). Besides, it can also be achieved with the use of AWS, Azure, or Google Cloud Console. 

In our case, we’ve already had the running NGINX server, so the setup process has taken just a couple of minutes. If you also have a running web server, you can try to use it for this matter as well.

So firstly, you need to have NGINX running on some VM. There are dozens of options on the market, but DigitalOcean is the best fit here in terms of the price/quality relationship. We see no need to duplicate their comprehensive (they really are) tutorials here. Instead, let us highlight those that you might need to study to get your NGINX server up and running:

  1. Creating an Ubuntu Droplet on DigitalOcean.
  2. Initial Server Setup with Ubuntu.
  3. Installing NGINX on Ubuntu (substitute yoursite.com for example.com).

Here are two main results you will get once the installation is finished:

  1. The DigitalOcean droplet is accessible via an IP address.
  2. NGINX website config located at /etc/nginx/sites-available/yoursite.com.

Now, we need to adjust our NGINX config to reverse proxy our Webflow website parts:

sudo nano /etc/nginx/sites-available/yoursite.com

After you save the config, restart NGINX:

sudo systemctl restart nginx

That’s it.

Cloudflare Setup

To make sure that the CDN proxy works, you need to transfer nameservers to Cloudflare. A pretty good tutorial is available here.

After you finish with it, add Cloudflare CNAME records for each of your Webflow Site Plan accounts to make them available via subdomains we specified earlier:

Now, add A record to your main website domain. As an IP address, use the IP address of the droplet we’ve created at step 2. Please note: in this case, we turn on DNS proxy in the DNS settings with Cloudflare. This would make Cloudflare CDN work.

Additionally, you can turn on the Cloudflare Flexible SSL support:

And finally, set up Always HTTPS redirect using Page Rules:

Basically, that’s it! Your setup will work now. If not, please let us know in the comments.

On a Final Note

As we have said, this is not the most elegant approach. It has several downsides:

  • The cost of this approach is higher because of the prices of several Webflow Site accounts and a DigitalOcean droplet.
  • The header, the footer, and other common components need to be updated in each of your Webflow Site accounts.
  • Multiple collaborators in Editor on a single page is still not possible.
  • The loading time of some pages increases since technically, you will load a duplicated CSS while in another case it could be cached.

But nevertheless, this approach works, we know it for sure from our own experience. https://www.akveo.com is our main Webflow account, and everything nested under https://www.akveo.com/services/design is another Webflow account. 

Our approach is useful if several developers actively work on your website in parallel. Nonetheless, we hope that Webflow will support the simultaneous work of several users on a single website some day, and it will be achieved with fewer efforts and drawbacks.

About Akveo

Akveo is an experienced team of full-stack software experts passionate about creating reliable software and ready to accept the next tech challenge. Our expertise lets us understand the essence of our clients' business needs to deliver the best solution possible. Plus, the use of our own products in development and design allows us to reduce development time and implement new solutions faster. Check what our customers say and contact us.

Loading Comments