This GitHub project provides a development workflow for JavaScript files in Mondo CMSEP dashboard.
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 (using Github CI), and the production code will be auto-loaded from jsDelivr CDN.
Keep the repository public for jsDelivr to access and serve the file via CDN
- Have bun installed locally. Installation guidelines here (recommended approach - homebrew / curl)
- Alternatively,
pnpmornpmwill work too.
- Alternatively,
- Run
bun install- Alternatively,
pnpm installornpm install
- Alternatively,
After repository migration, update the repo name and URL in this README file, and the ./src/entry.ts.
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/prod folder for production (pushed to github), and in the ./dist/dev used for local file serving (excluded from Git).
-
The initial
entry.jsfile needs to be made available via external server first for this system to work (in the<head>area of the site).<script src="https://cdn.jsdelivr.net/gh/MondoPower/mondo-cmsep-dashboard/dist/prod/entry.js"></script>
For occasional localhost testing when editing
entry.js, you'll have to manually include that script like following:<script src="http://localhost:3000/entry.js"></script>
-
Add scripts to the Webflow site global settings/page-level, as required, by adding the script path (
.jsinstead of.ts) to thewindow.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>
Example:
<script> window.JS_SCRIPTS.add('global.js'); </script>
-
Whilst working locally, run
bun run devto start a development server on localhost:3000- Alternatively,
pnpm run devornpm run dev
- Alternatively,
-
Execute
window.setScriptSource('local')in the browser console to serve the file from localhost. If local server is not running, it will error out and automatically serve from CDN instead. This preference is saved in the browser's localstorage.- To switch back to CDN serving mode, execute
window.setScriptSource('cdn')from console.
- To switch back to CDN serving 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>- Add any debug console logs in the code using the
console.debugfunction instead ofconsole.log. This way, they can be toggled on/off using the browser native "Verbose/Debug" level.
-
Run
bun run buildto generate the production files in./dist/prodfolder- Alternatively,
pnpm run buildornpm run build
- Alternatively,
-
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.- By default, the version bump is a patch (
x.y.{{patch number}}). To bump the version by a higher amount, mention a hashtag in the merge commit message, like#majoror#minor
- By default, the version bump is a patch (
-
To create separate environments for
devandstaging, respective branches can be used, and the jsDelivr file path can be set to load the latest scripts from those respective branches. Note: The caching for branches lasts 12 hours and would hence require a manual purge.- To do so, override the
window.PRODUCTION_BASEvariable in the HTML file after the inclusion ofentry.jsscript.
- To do so, override the
- 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]