This GitHub project provides a development workflow for JavaScript files in Vormer Architecten Webflow site.
In essence, it uses bun to start a development server on localhost:3000, bundle, build and serve any working file (from the /src directory) in local mode. Once pushed up and merged into main, it's auto-tagged with the latest semver tag version, and the production code will be auto-loaded from jsDelivr CDN.
- Run
bun install
The project will process and output the files mentioned in the files const of ./bin/build.js file. The output minified files will be in the ./dist folder for production (pushed to github), and in the ./dist/dev used for local file serving.
Note: The setup won't automatically clean up deleted files that already exist in the ./dist folder.
-
The initial
entry.jsfile needs to be made available via server first for this system to work (in the<head>area of the site).<script src="https://cdn.jsdelivr.net/gh/maneuver-agency/vormer-architecten-webflow-site/dist/entry.js"></script>
-
Add scripts to the Webflow site global settings/page-level, as required, by adding the script path to the
window.JS_SCRIPTSset. Do not include/srcin the file path.<script> window.JS_SCRIPTS.add('{FILE_PATH_1}'); window.JS_SCRIPTS.add('{FILE_PATH_2}'); </script>
-
Whilst working locally, run
bun run devto start a development server on localhost:3000 -
Execute
window.setScriptsENV('dev')in browser console to serve the file from localhost. If local server is not running, it will error out and serve from production instead. This preference is saved in the browser's localstorage.- To switch back to production mode, execute
window.setScriptsENV('prod')from console.
- To switch back to production mode, execute
-
As changes are made to the code locally and saved, the localhost:3000 will then serve those files
To execute code after all the scripts have loaded, the script loader emits an event listener on the window object. This can come in handy when you want to ensure a certain imported library from another script file has loaded before executing it.
You can use that as following:
<script>
import { SCRIPTS_LOADED_EVENT } from 'src/constants';
window.addEventListener(SCRIPTS_LOADED_EVENT, () => {
// code to execute after all scripts have loaded
});
</script>There is an opt-in debugging setup that turns on logs in the console. The preference can be toggled via browser console, and is stored in browser localStorage.
- Add any console logs in the code using the
window.DEBUGfunction. It's aconsole.logwrapper. There is also awindow.IS_DEBUG_MODEvariable to run code conditions on - Execute
window.setDebugMode(true)in the console to turn on Debug mode. After reload, the console will start showing code logs. - To turn it off, execute
window.setDebugMode(false)in the console.
-
Run
bun run buildto generate the production files in./distfolder -
To push code to production, merge the working branch into
main. A Github Actions workflow will run tagging that version with an incremented semver) tag. Once pushed, the production code will be auto loaded from jsDelivr CDN.
- Direct jsDelivr links directly use semver tagged releases when available, else falls back to the master branch [info discussion link]
- Tagged version branches are purged every 12 hours from their servers [info discussion link]
- To manually purge a tagged version's files, wait for 10 minutes after the new release tag is added [info discussion link]