Script Manager ✅

EXPERIMENTAL Based on an idea by Patrick Corsetti.

In general when you're injecting a code library into your Webflow site, it's best to directly include the script tag in your page <head>, pointing to the CDN-served code for your site.

This makes is much easier to manage your code safely in Github, edit it more efficiently through VSCode, and setup efficient CI/CD workflows for your team.

But how do you test code with your Webflow site?

Traditionally my preference is to maintain separate URLs for DEV ( on localhost ), TEST & PROD ( on CDNs ), and then to swap them depending on what configuration I need to test. However to do this efficiently, you need a reverse proxy to manage your development mode and modify those scripts.

Developer Patrick Corsetti had the idea of using Webflow Code Components for this, and it lead to this experiment.

Features

  • Dynamic script loading, based on your environment.

  • By default, automatically inject the correct script;

    • Inject the TEST script if you're on staging

    • Inject the PROD script if you're on production

    • Inject the DEV script if you're in dev mode ( defined by a cookie )

  • Allow devs to easy override the default mode for testing on the site;

    • Append ?dev to the URL to switch to DEV mode

    • Append ?test to switch to TEST mode

    • Append ?prod to switch to PROD mode

  • When you're in an override mode, see that easily ( bottom right indicator )

  • Click the indicator to exit that override mode and restore default script loading behavior

IMPORTANT Using the code component approach, the script is injected at some point during page load. Unlike a manual tag placement, it's difficult to control the exact point at which the script will load.

If your scripts use the DOMContentLoaded trigger, it's best to verify that the event has not already fired, using a pattern something like this; 

(() => {
  function apply() { 
    // Your code here 
  }
  
  // Loader
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', apply, { once: true });
  } else {
    apply();
  }
})();

Demonstration

LogoScript Managerscript-manager.webflow.io

In this demonstration we have one Script Manager component, which has defined three separate CDN URLs. For demo purposes, all 3 are coming from CodePen;

Typically, you'd use JSDeliver, npm, or Netlify to act as the CDN for your TEST and PROD branches. For DEV, you'd most likely use localhost.

Properties

Use these properties to configure Script Manager.

Property
Type
Description

Dev Code URL

url

Specify the URL to your DEV mode code, typically using localhost.

Test Code URL

url

The URL to your TEST mode code, typically a CDN served integration branch from your Github repo.

Prod Code URL

url

The URL to your PROD mode code, typically a CDN served from your Github release branch.

Async

boolean

Optional async

Defer

boolean

Optional defer

Notes

Sygnal has a more industrial-strength approach to this solution, which we call DevProxy. It requires a reverse proxy to manage the script loading, and support dedicated, password-protected environments like test.mysite.com

See the Sygnal Site Engine framework for more - https://engine.sygnal.com/

Future

  • Consider designer suppression- it's executing PROD mode code

  • Handle partial-configs, where some URLs are unspecified

  • Support multiple Script Manager components, with independently-tracked states

    • Name each component individually, e.g. engine , sa5-layout

    • Allow DEV mode to selectively use DEV-mode scripts,

      • e.g. ?dev=engine,sa5-layout

      • e.g. ?dev same as ?dev=*

      • e.g. ?dev=engine

    • Same for ?test and ?prod

PreviousCharts & GraphsNextQRCode ✅

Last updated