DevKit™ (Condensed)

Repository template for Webflow. Includes support for private repositories, NPM publishing, and CDN deployment.

Clone the GitHub template View full version

Installation

Setup Template

Click on "Use this template" in GitHub and clone as private repository.
Open locally with GitHub Desktop and open project in Visual Studio Code.

Setup NPM

Create NPM account
Generate NPM Granular Access Token with read/write permissions
Set Token Expiration: 30-90 days (recommended: 30 days)
Copy NPM Token (not retrievable later)

Add NPM Token to GitHub Secrets:

For Solo Developers:

Go to project repository → Settings → Secrets and variables → Actions
New repository secret: Name NPM_TOKEN, paste token

For Organization Teams:

Option A (Free): Add to each repository's secrets
Option B (Paid): Add to organization secrets (requires paid plan)

Setup Access Token

Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
Generate new token (classic)
Configure scopes: repo, workflow, write:packages, read:packages
Copy token immediately (not retrievable later)

Add PAT to GitHub Secrets:

For Solo Developers:

Go to project repository → Settings → Secrets and variables → Actions
New repository secret: Name PERSONAL_ACCESS_TOKEN, paste PAT

For Organization Teams:

Option A (Free): Add to each repository's secrets
Option B (Paid): Add to organization secrets (requires paid plan)

Setup VS Code

Install pnpm: (Skip if already installed)

npm install -g pnpm

Install dependencies:

pnpm install

How to Use DevKit™

Building & Testing

Run a Local Development Server:

pnpm dev

Run a Local Production Server:

pnpm prod

Pre-commit Hooks

Automatic Code Quality

Pre-commit hooks automatically format and lint your code before commits:

Prettier formats JavaScript and CSS files in src/
ESLint catches and auto-fixes errors
Commit blocked if ESLint errors are found
Auto-setup when running pnpm install

Troubleshooting

If commit is blocked:

Fix the linting errors shown in terminal
Stage fixes with git add
Commit again

Importing Scripts

1️⃣ Traditional Method:

Operation: Run your local server using pnpm dev or pnpm prod.
Script Logging: DevKit™ logs script tags for JavaScript and CSS files from the src folder.
Integration: Manually copy and paste script tags to your Webflow pages or global settings, being mindful to switch between development and production tags as needed.

2️⃣ Automated Method (Recommended):

Core DevKit™ Scripts (Global):

Main Settings: Add in global <head> tag

<!-- RD® Webflow DevKit™ / Main Settings -->
<script>
window.npmPath = "@reform-digital/[email protected]"; // Update this once you have shipped to npm.
window.devMode = true; // Change to false in production
window.localPort = 3000; // Also change in bin/localport.js in VS Code
</script>

Style-Loader: Add in global <head> tag

<!-- RD® Webflow DevKit™ / Style Loader -->
<script src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/style-loader.js"></script>

Script-Loader: Add before global </body> closing tag

<!-- RD® Webflow DevKit™ / Script Loader -->
<script src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/script-loader.js"></script>

Project Code (Page level):

Page Scripts: Add before page </body> closing tag

<!-- RD® Webflow DevKit / Page Scripts -->
<script>
const pageScripts = ["home.js"];
loadWebflowScripts(pageScripts, npmPath);
</script>

Page Styles: Add in page <head> tag

<!-- RD® Webflow DevKit / Page Styles -->
<script>
const pageStyles = ["home.css"];
loadWebflowStylesheets(pageStyles, npmPath);
</script>

Project Code (Global):

Global Scripts: Add before global </body> closing tag, under Script Loader.

<!-- RD® Webflow DevKit / Global Scripts -->
<script>
const globalScripts = ["global.js", "analytics.js"];
loadWebflowScripts(globalScripts, npmPath);
</script>

Global Styles: Add in global <head> tag, under Style Loader.

<!-- RD® Webflow DevKit / Global Styles -->
<script>
const globalStyles = ["global.css", "animation.css"];
loadWebflowStylesheets(globalStyles, npmPath);
</script>

Shipping to NPM

pnpm ship

If you are using the GitHub extension for VS Code, grant the necessary permissions if prompted.

Post-Shipment Steps:

Automated:

Update npmPath with your own path in the global <head>.

Traditional:

Replace local script tags located in global and page-specific </body> to:

<script src="https://cdn.jsdelivr.net/npm/@your-npm-username/your-package-name@version/your-filename.js"></script>

Replace local style tags in global and page-specific <head> to:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@your-npm-username/your-package-name@version/your-filename.css">

Addressing Caching

@latest Versioning

Initial Release: @latest (or omitting @version) is ok for initial release.
Subsequent Releases: @latest might lead to outdated content due to CDN and browser caching.

Cache Management

CDN Cache: Manually purge via jsDelivr’s Purge Tool.
Browser Cache: Educate users; no direct control, can only hard refresh or clear own browser cache.

Use Specific Versions to Prevent Caching Issues

Automated Import: npm path "@your-npm-username/your-package-name@version"
Traditional Import: src path "https://cdn.jsdelivr.net/npm/@your-npm-username/your-package-name@version/your-filename.js"

Branches & Collab

Single Developer Workflow

Initial Development: Work directly in main branch.
Creating a Dev Branch: After initial release, create a dev branch.
Routine Development: Work in dev, commit changes, push commits.
Merging and Releasing: Merge dev into main, publish to npm.

Multi-Developer Collaboration Workflow

Setting Up Main and Dev Branches: Ensure main and dev branches are set up.
Creating Feature Branches: Developers create feature branches from dev.
Development, Commit, Push: Work on feature, commit, and push.
Collaboration and Code Review: Open pull requests, review code, merge into dev.
Syncing Changes: Regularly fetch and merge changes from dev to avoid conflicts.
Adding Collaborators: Project maintainers can add collaborators through GitHub settings.
Preparing for Release: Merge dev into main, prepare for npm release.
Shipping to npm: Switch to main, fetch latest, pull changes, publish to npm.

Conclusion

Single developer workflow for smaller projects or initial phases.
Multi-developer collaboration workflow for larger teams and complex projects.

PreviousDevKit™NextCookieFlow™

Last updated 3 months ago

hashtagInstallation

hashtagSetup Template

hashtagSetup NPM

hashtagSetup Access Token

hashtagSetup VS Code

hashtagHow to Use DevKit™

hashtagBuilding & Testing

hashtagRun a Local Development Server:

hashtagRun a Local Production Server:

hashtagPre-commit Hooks

hashtagAutomatic Code Quality

hashtagTroubleshooting

hashtagImporting Scripts

hashtag1️⃣ Traditional Method:

hashtag2️⃣ Automated Method (Recommended):

hashtagCore DevKit™ Scripts (Global):

hashtagProject Code (Page level):

hashtagProject Code (Global):

hashtagShipping to NPM

hashtagPost-Shipment Steps:

hashtagAddressing Caching

hashtag@latest Versioning

hashtagCache Management

hashtagUse Specific Versions to Prevent Caching Issues

hashtagBranches & Collab

hashtagSingle Developer Workflow

hashtagMulti-Developer Collaboration Workflow

hashtagConclusion