# DevKit™ (Condensed)
Clone the GitHub templateView full version
## Installation
{% stepper %}
{% step %}
### 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.
{% endstep %}
{% step %}
### 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)
{% endstep %}
{% step %}
### 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)
{% endstep %}
{% step %}
### Setup VS Code
**Install pnpm: (Skip if already installed)**
```
npm install -g pnpm
```
**Install dependencies:**
```
pnpm install
```
{% endstep %}
{% endstepper %}
## 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:
1. Fix the linting errors shown in terminal
2. Stage fixes with `git add`
3. 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 `` tag**
```
```
**`Style-Loader`: Add in global `` tag**
```
```
**`Script-Loader`: Add before global `` closing tag**
```
```
#### Project Code (Page level):
**Page `Scripts`: Add before page `` closing tag**
```
```
**Page `Styles`: Add in page `` tag**
```
```
#### Project Code (Global):
**Global `Scripts`: Add before global `` closing tag, under Script Loader.**
```
```
**Global `Styles`: Add in global `` tag, under Style Loader.**
```
```
### 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 ``.
**Traditional:**
Replace local script tags located in global and page-specific `` to:
```
```
Replace local style tags in global and page-specific `` to:
```
```
### 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](https://www.jsdelivr.com/tools/purge).
* 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.reform.digital/devkit/devkit-cond.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.