Dev & Build Process | 3rd Party Hosting Webflow Sites & Files

Published

July 16, 2023

Updated

July 16, 2023

Coding Process

This is one of my favorite setups for building code-heavy sites that are hosted on Webflow.

The stack I commonly use consists of;

GitHub is central to this. It offers a ton of capability;

A repository for code storage, versioning, and history. Ideally, you'd place this in you client's GitHub organization
Codespaces, which is a VM-based development environment that you can connect to and build from. It provides a great way to keep your node configuration isolated, and to support multiple developers. It also support hosting so you can build live while viewing your _webflow.io staged site.

For the CDN, I typically use jsDelivr.

It's fast and free, but requires that your repositories be public. Since the repo is client-side code on a public websites, there is nothing being exposed here, but that's a matter of personal taste.
It supports versioned URLs, which allows me to easily revert a site to a prior code version if that were ever needed.
It has built in minification for JS and CSS files.

For development, I often use VS Code

It's free and simple, and has an extension that makes access to GitHub Codespaces easy.
I typically build in TypeScript, compiled to JS. It's ideal for code organization across files and classes, and type-safe checking
Styles are in SaSS, transpiled to CSS

Technical Notes

TypeScript-generated code has many bundling options but often your code is generated inside of an IIFE. This is great to protect your namespace but requires you to think about how you want to access and communicate with your libraries, and handle events.
CDN for delivery- if the repo is public, we can use jsDelivr, etc.
There are other options for private repos but a bit more complex to deploy updates

This is what a dev cycle looks like using the above stack;

Code in VS Code, connected to my GitHub codespace.
_{npm run build} is running and watching for changes
_{npm run serve} is also running, and makes my built JS and CSS available in my site
Relevant script URLs in your webflow.io site are temporarily pointing to the VPN.
Any code change, simply save ( recompiles ) and refresh the browser, and you see the change on the staged site.
Repeat until feature is complete and tested on webflow.io

Push & release in Github
Tag with a new build version like v1.5.10 This creates a new CDN url separate from the live public one
Update the URL in the _webflow.io site
Fully re-test, now the entire team is seeing the new code

‍