frappe-ops-frontend-build

Name: frappe-ops-frontend-build
Author: Impertio-Studio

151stars49forks

How to install frappe-ops-frontend-build?

impertio-studio/frappe_claude_skill_package/frappe-ops-frontend-build

$npx -y skills add Impertio-Studio/Frappe_Claude_Skill_Package --skill frappe-ops-frontend-build

Installs into the current project.

Summary

Use when configuring frontend asset bundling, migrating from build.json (v14) to esbuild (v15+), or troubleshooting SCSS/CSS compilation. Prevents build failures from mixing v14 and v15 build systems and misconfigured asset pipelines. Covers esbuild configuration (v15+), build.js

Files · 1

View on GitHub

SKILL.md

1	# Frontend Build System
2
3	Complete reference for Frappe's frontend asset bundling pipeline, from build configuration to production optimization.
4
5	Versions: v14 (build.json) / v15+ (esbuild)
6
7	---
8
9	## Quick Reference: Build Commands
10
11	\| Task \| Command \|
12	\|------\|---------\|
13	\| Build all apps \| `bench build` \|
14	\| Build specific app \| `bench build --app myapp` \|
15	\| Build multiple apps \| `bench build --apps frappe,erpnext` \|
16	\| Production build (minified) \| `bench build --production` \|
17	\| Force rebuild \| `bench build --force` \|
18	\| Watch mode (auto-rebuild) \| `bench watch` \|
19	\| Hard link assets \| `bench build --hard-link` \|
20
21	---
22
23	## Decision Tree: Build System Selection
24
25	```
26	Which build system?
27	├── Frappe v14?
28	│ └── build.json — Concatenation-based bundling
29	├── Frappe v15+?
30	│ └── esbuild — ES module bundling with .bundle. convention
31	└── Migrating v14 → v15?
32	└── Replace build.json with .bundle. files in public/
33	```
34
35	---
36
37	## Build Pipeline Overview
38
39	### v15+ (esbuild): Current System
40
41	The v15+ build system uses esbuild for fast ES module bundling. It automatically discovers bundle entry points by scanning the `public/` directory for files matching `*.bundle.{js\|ts\|css\|scss\|sass\|less\|styl}`.
42
43	How it works:
44
45	1. `bench build` scans each app's `public/` directory recursively
46	2. Files matching `.bundle.` are treated as entry points
47	3. esbuild compiles, bundles, and optionally minifies each entry point
48	4. Output goes to `assets/dist/[app]/js/` or `assets/dist/[app]/css/`
49	5. Filenames include content hashes for cache-busting: `main.bundle.HASH.js`
50
51	Supported file types:
52	- `.js` — ES6 modules with import/export
53	- `.ts` — TypeScript
54	- `.vue` — Vue single-file components
55	- `.css` — Standard CSS
56	- `.scss` / `.sass` — SASS/SCSS stylesheets
57	- `.less` — Less stylesheets
58	- `.styl` — Stylus stylesheets
59
60	### v14 (build.json): Legacy System
61
62	The v14 system uses `build.json` in the app root to define concatenation rules.
63
64	```json
65	{
66	"js/myapp.min.js": [
67	"public/js/file1.js",
68	"public/js/file2.js"
69	],
70	"css/myapp.min.css": [
71	"public/css/style1.css",
72	"public/css/style2.css"
73	]
74	}
75	```
76
77	NEVER use `build.json` in v15+ — it is ignored by the esbuild pipeline.
78
79	---
80
81	## Bundle Entry Points [v15+]
82
83	### Creating a Bundle
84
85	Place files in your app's `public/` directory with the `.bundle.` naming convention:
86
87	```
88	myapp/
89	└── public/
90	├── js/
91	│ └── myapp.bundle.js # → dist/myapp/js/myapp.bundle.HASH.js
92	├── css/
93	│ └── myapp.bundle.scss # → dist/myapp/css/myapp.bundle.HASH.css
94	└── components/
95	└── widget.bundle.js # → dist/myapp/js/widget.bundle.HASH.js
96	```
97
98	### Bundle File Content
99
100	```javascript
101	// myapp/public/js/myapp.bundle.js
102	import { createApp } from "vue";
103	import MyComponent from "./components/MyComponent.vue";
104
105	// ES6 imports are resolved by esbuild
106	import "../css/myapp.bundle.scss";
107
108	// npm packages (installed via yarn) can be imported directly
109	import dayjs from "dayjs";
110
111	createApp(MyComponent).mount("#myapp-root");
112	```
113
114	### Output Mapping
115
116	\| Input \| Output \|
117	\|-------\|--------\|
118	\| `public/js/main.bundle.js` \| `assets/dist/[app]/js/main.bundle.[hash].js` \|
119	\| `public/css/style.bundle.scss` \| `assets/dist/[app]/css/style.bundle.[hash].css` \|
120	\| `public/deep/nested/file.bundle.ts` \| `assets/dist/[app]/js/file.bundle.[hash].js` \|
121
122	---
123
124	## hooks.py Asset Inclusion
125
126	### Desk Assets (Backend Interface)
127
128	```python
129	# hooks.py — loads in /app (Desk)
130	app_include_js = "myapp.bundle.js"
131	app_include_css = "myapp.bundle.css"
132
133	# Multiple files
134	app_include_js = ["myapp.bundle.js", "extra.bundle.js"]
135	app_include_css = ["myapp.bundle.css", "extra.bundle.css"]
136	```
137
138	### Portal Assets (Public Website)
139
140	```python
141	# hooks.py — loads on web pages (portal)
142	web_include_js = "myapp-web.bundle.js"
143	web_include_css = "myapp-web.bundle.css"
144	```
145
146	### Page-Specific Assets
147
148	```python
149	# hooks.py — loads on specific Desk pages
150	page_js = {"page_name": "public/js/custom_page.js"}
151	```
152
153	### Web Form Assets (Standard Web Forms Only)
154
155	```python
156	# hooks.py — loads on specific Web Forms
157	webform_include_js = {"ToDo": "public/js/custom_todo.js"}
158	webform_include_css = {"ToDo": "public/css/custom_todo.css"}
159	```
160
161	### Critical Rules
162
163	- ALWAYS use the bundle

People who liked this also viewed

6 picks

Type

frappe-ops-frontend-build

151stars49forks

View on GitHub

How to install frappe-ops-frontend-build?

impertio-studio/frappe_claude_skill_package/frappe-ops-frontend-build

$npx -y skills add Impertio-Studio/Frappe_Claude_Skill_Package --skill frappe-ops-frontend-build

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend Build System
2
3	Complete reference for Frappe's frontend asset bundling pipeline, from build configuration to production optimization.
4
5	Versions: v14 (build.json) / v15+ (esbuild)
6
7	---
8
9	## Quick Reference: Build Commands
10
11	\| Task \| Command \|
12	\|------\|---------\|
13	\| Build all apps \| `bench build` \|
14	\| Build specific app \| `bench build --app myapp` \|
15	\| Build multiple apps \| `bench build --apps frappe,erpnext` \|
16	\| Production build (minified) \| `bench build --production` \|
17	\| Force rebuild \| `bench build --force` \|
18	\| Watch mode (auto-rebuild) \| `bench watch` \|
19	\| Hard link assets \| `bench build --hard-link` \|
20
21	---
22
23	## Decision Tree: Build System Selection
24
25	```
26	Which build system?
27	├── Frappe v14?
28	│ └── build.json — Concatenation-based bundling
29	├── Frappe v15+?
30	│ └── esbuild — ES module bundling with .bundle. convention
31	└── Migrating v14 → v15?
32	└── Replace build.json with .bundle. files in public/
33	```
34
35	---
36
37	## Build Pipeline Overview
38
39	### v15+ (esbuild): Current System
40
41	The v15+ build system uses esbuild for fast ES module bundling. It automatically discovers bundle entry points by scanning the `public/` directory for files matching `*.bundle.{js\|ts\|css\|scss\|sass\|less\|styl}`.
42
43	How it works:
44
45	1. `bench build` scans each app's `public/` directory recursively
46	2. Files matching `.bundle.` are treated as entry points
47	3. esbuild compiles, bundles, and optionally minifies each entry point
48	4. Output goes to `assets/dist/[app]/js/` or `assets/dist/[app]/css/`
49	5. Filenames include content hashes for cache-busting: `main.bundle.HASH.js`
50
51	Supported file types:
52	- `.js` — ES6 modules with import/export
53	- `.ts` — TypeScript
54	- `.vue` — Vue single-file components
55	- `.css` — Standard CSS
56	- `.scss` / `.sass` — SASS/SCSS stylesheets
57	- `.less` — Less stylesheets
58	- `.styl` — Stylus stylesheets
59
60	### v14 (build.json): Legacy System
61
62	The v14 system uses `build.json` in the app root to define concatenation rules.
63
64	```json
65	{
66	"js/myapp.min.js": [
67	"public/js/file1.js",
68	"public/js/file2.js"
69	],
70	"css/myapp.min.css": [
71	"public/css/style1.css",
72	"public/css/style2.css"
73	]
74	}
75	```
76
77	NEVER use `build.json` in v15+ — it is ignored by the esbuild pipeline.
78
79	---
80
81	## Bundle Entry Points [v15+]
82
83	### Creating a Bundle
84
85	Place files in your app's `public/` directory with the `.bundle.` naming convention:
86
87	```
88	myapp/
89	└── public/
90	├── js/
91	│ └── myapp.bundle.js # → dist/myapp/js/myapp.bundle.HASH.js
92	├── css/
93	│ └── myapp.bundle.scss # → dist/myapp/css/myapp.bundle.HASH.css
94	└── components/
95	└── widget.bundle.js # → dist/myapp/js/widget.bundle.HASH.js
96	```
97
98	### Bundle File Content
99
100	```javascript
101	// myapp/public/js/myapp.bundle.js
102	import { createApp } from "vue";
103	import MyComponent from "./components/MyComponent.vue";
104
105	// ES6 imports are resolved by esbuild
106	import "../css/myapp.bundle.scss";
107
108	// npm packages (installed via yarn) can be imported directly
109	import dayjs from "dayjs";
110
111	createApp(MyComponent).mount("#myapp-root");
112	```
113
114	### Output Mapping
115
116	\| Input \| Output \|
117	\|-------\|--------\|
118	\| `public/js/main.bundle.js` \| `assets/dist/[app]/js/main.bundle.[hash].js` \|
119	\| `public/css/style.bundle.scss` \| `assets/dist/[app]/css/style.bundle.[hash].css` \|
120	\| `public/deep/nested/file.bundle.ts` \| `assets/dist/[app]/js/file.bundle.[hash].js` \|
121
122	---
123
124	## hooks.py Asset Inclusion
125
126	### Desk Assets (Backend Interface)
127
128	```python
129	# hooks.py — loads in /app (Desk)
130	app_include_js = "myapp.bundle.js"
131	app_include_css = "myapp.bundle.css"
132
133	# Multiple files
134	app_include_js = ["myapp.bundle.js", "extra.bundle.js"]
135	app_include_css = ["myapp.bundle.css", "extra.bundle.css"]
136	```
137
138	### Portal Assets (Public Website)
139
140	```python
141	# hooks.py — loads on web pages (portal)
142	web_include_js = "myapp-web.bundle.js"
143	web_include_css = "myapp-web.bundle.css"
144	```
145
146	### Page-Specific Assets
147
148	```python
149	# hooks.py — loads on specific Desk pages
150	page_js = {"page_name": "public/js/custom_page.js"}
151	```
152
153	### Web Form Assets (Standard Web Forms Only)
154
155	```python
156	# hooks.py — loads on specific Web Forms
157	webform_include_js = {"ToDo": "public/js/custom_todo.js"}
158	webform_include_css = {"ToDo": "public/css/custom_todo.css"}
159	```
160
161	### Critical Rules
162
163	- ALWAYS use the bundle

People who liked this also viewed

6 picks

Type