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.