Haven’t we all wanted to add more functionality to Webflow even though it already provides so much out of the box? We at Little Big Things find it a regular affair, partly because we work with teams always looking to push Webflow’s limits and utilize Webflow’s capabilities to the fullest.
With no inbuilt code validators in Webflow and no way to connect to Github, we found our productivity was down when working with custom code. With this solution, we are able to use the code editor of our choice and test custom code independently on staging sites, the ones hosted on “something.webflow.io” and keep the custom code intact on the production site that is on your URL that visitors visit like ours, “littlebigthings.dev”.
If you are a fellow Webflow agency or an in-house marketing tech team managing Webflow and custom code on Webflow, I hope this helps you.
You can inject JavaScript and CSS into Webflow with this setup.
Let’s dive into it.
This guide is best for engineers, architects, creative directors, technically inclined marketers like myself and anyone who knows a thing or two about Github, CDN and Webflow.
This is where your custom code resides and would be your single source of truth. You should know how to use Github and know the following concepts in Github.
A few resources:
You have the flexibility to choose any CDN that suits your needs, but in our situation, we find that CloudFlare functions well. It has a lower barrier to entry, unlike AWS, which we also use from time to time. CloudFlare provides a production-level CDN starting at $20/month for unlimited sites and goes up based on your traffic and how many requests are made. You can learn more about the pricing here.
The free account can be used for testing the CDN with Webflow but for production sites. Please upgrade. It is not a high cost for the tradeoff.
We will be using Pages within CloudFlare.
You can use CloudFlare Pages to publish your dynamic front-end applications. These Pages are exceptionally speedy, regularly updated, and can be deployed straight from your Git provider. You can learn more about it here.
Usually, teams use it to deploy the front end, but we will use it to deploy part of our front end, like custom code Javascript and CSS for Webflow.
Duh! You would need the Webflow site, which you are looking to supercharge with additional functionalities. Make sure you have a paid site plan to have a production URL.
We would be working primarily on two branches:
The names don’t matter but designate which URL they would be used in.
Open Pages in CloudFlare and create a new project for your deployment.
Here you would have to add your GitHub or GitLab repository that would be used to deploy the custom code.
Once you give permission to the repository you created for custom code for your Webflow project, it will ask you to configure the deployment.
Check the production branch that you will be used for deploying the code.
We are using ‘master.’
For this case, we are not changing any build settings, but you can if you plan for it and want to run more things on your code before deploying, like minification. That would require you to have knowledge of GulpJS or similar toolkits.
Select “Save and Deploy.”
The deployment will provide you with a domain on which your code is deployed. If you click it, your page will appear if you have an ‘index.html’ page in your repo.
If not, it will not show anything. As you can see, it would deploy your ‘master’ branch every time to merge changes to the branch.
You add a custom subdomain for accessing the code if you like as well, under the project setting.
Let’s say we want the staging or any other branch’s code. All you have to do is add the branch name as a subdomain: <branch>.<CloudFlare.domain>
Once the CDN is ready make sure you make changes to the branches to automatically push to CloudFlare.
Here we used our branch staging and master.
For the preview or ‘staging’ URL to work, you would need to commit and new changes so that CloudFlare can push them to the new URL.
The biggest challenge we faced working with custom code on Webflow was to make sure we could test different custom codes on staging URLs and keep production code running without hiccups.
To overcome this use case, we created a boilerplate in-house that would allow us to test different code snippets on staging URLs without affecting the production URLs.
You can find the code gist here:
CODE: https://gist.github.com/littlebigthings-dev/31660792e029ce6661be5350d95a1661.js
All set? Now you have custom code on the CDN and can test different URLs in Webflow with the following code.
In conclusion, utilizing Webflow custom code with this setup can lead to faster deployment and testing of code, resulting in increased reliability. This can lead to higher productivity of the team and ultimately lead to a more efficient and effective development process. By taking advantage of the custom code capabilities within Webflow, teams can create more complex and customized websites, improving the overall user experience.
