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;
- A GitHub repo
- GitHub codespaces
- VS Code
- A CDN for delivering the files
Details
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
The Dev Cycle
This is what a dev cycle looks like using the above stack;
Dev phase
- 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
Test phase
- 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
Release phase
- In Webflow, simply publish the site to production when approved
