frappe-ops-frontend-build

Align Frappe asset bundling configuration to v15+ esbuild conventions.

163|53|Updated Jan 14, 2026
One-click install
npx skills add https://github.com/Impertio-Studio/Frappe_Claude_Skill_Package --skill frappe-ops-frontend-build-impertio-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frappe-ops-frontend-build
Source: https://github.com/Impertio-Studio/Frappe_Claude_Skill_Package/tree/main/skills/source/ops/frappe-ops-frontend-build
Command: npx skills add https://github.com/Impertio-Studio/Frappe_Claude_Skill_Package --skill frappe-ops-frontend-build-impertio-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents Frappe frontend bundling and SCSS/CSS compilation failures caused by mixing v14 build.json and v15+ esbuild pipelines, or misconfiguring asset entry points and hashed filenames.

Core Features & Use Cases

  • Version-correct build system selection: Guides the switch from v14 build.json (concatenation) to v15+ esbuild (auto-discovered *.bundle.* entry points).
  • Correct asset bundling setup: Ensures bundles compile from the right public/ locations, file naming conventions, and supported asset types (JS/TS/Vue/CSS/SCSS/Less/Stylus).
  • Reliable inclusion in hooks and templates: Provides the right hooks.py include names (no full paths, no hashes) plus the correct helpers for Jinja and dynamic loading via frappe.require().
  • Fixes common production issues: Covers stale assets, missing entry points, CSS not updating, SCSS partial naming mistakes, and the required rebuild/clear-cache workflow.

Quick Start

Configure your app’s frontend bundles by replacing any v14 build.json usage with v15+ *.bundle.* entry files under your app’s public/ directory and then run bench build --app myapp to regenerate the correct hashed outputs.

Frequently Asked Questions about frappe-ops-frontend-build

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate my Frappe frontend build from build.json to esbuild?▼

Migrate Frappe frontend builds by replacing v14 build.json concatenation with v15+ esbuild auto-discovered `*.bundle.*` entry files under the app's `public/` directory, then run `bench build --app myapp` to regenerate hashed outputs.

Why does my Frappe frontend build fail after upgrading to v15?▼

Frappe frontend build failures occur when mixing v14 build.json pipelines with v15+ esbuild conventions, misconfiguring asset entry points, or using full paths and hardcoded hashes in hooks.py instead of correct include names.

How do I fix SCSS or CSS not updating in Frappe production?▼

Fix SCSS and CSS compilation issues in Frappe by ensuring correct partial naming, rebuilding assets with `bench build`, and clearing the cache to meet production refresh requirements for deterministic stylesheet behavior.

What is the correct way to include frontend bundles in Frappe hooks.py?▼

Include Frappe frontend bundles in hooks.py by using correct include names without full paths or hardcoded hashes, and apply proper helpers for Jinja templates and dynamic loading via `frappe.require()`.

Does esbuild support TypeScript and Vue in Frappe asset pipelines?▼

esbuild supports JS, TS, Vue, CSS, SCSS, Less, and Stylus asset types in Frappe v15+ pipelines, compiling bundles from the correct `public/` locations with proper file naming conventions.

What are the limitations of mixing Frappe v14 and v15 frontend build systems?▼

Mixing Frappe v14 build.json and v15+ esbuild pipelines causes asset bundling and SCSS compilation failures due to conflicting entry-point conventions, stale assets, and missing `*.bundle.*` discovery requirements.