App include custom javascript, can't get to work

Frappe Framework App Development
1

Hi there,

I can’t get to include js files, i can’t understand what’s wrong.

  1. in hooks.py uncommented: app_include_js = "/assets/myapp/js/myapp.min.js"

  2. created a public/js/ folder under myapp/myapp

  3. created my.js inside public/js folder

  4. created build.json inside public folder with:
    { "js/myapp.min.js": [ "public/js/my.js" ] }

  5. bench build

  6. bench clear-cache

on console i get:

http://test.dev:8000/assets/myapp/js/myapp.min.js - Failed to load resource: the server responded with a status of 404 (NOT FOUND)

tried to modify in hooks:

app_include_js = "/assets/myapp/js/myapp.min.js"
to
app_include_js = "/assets/js/myapp.min.js"

but getting the same error

4 Likes
2

The app_include_js path is correct.

Your build.json needs to be:

"myapp/js/myapp.min.js": [
    "public/js/my.js"
  ]

So one folder up.

1 Like
3

@codeag thx for the hint …but no luck …still getting the error …

4

Ok, so my setup is:

apps/myapp/myapp/hooks.py which reads:

app_include_css = "/assets/myapp/css/myapp.css"
app_include_js = "/assets/myapp/js/myapp.js"

Then in apps/myapp/myapp/public/build.json I have:

{
  "myapp/css/myapp.css": [
    "public/css/app/app.css"
  ],

  "myapp/js/myapp.js": [
    "public/js/app/app.js",
  ]
}

When doing bench build I get:

$ bench build
Wrote ./assets/js/report.min.js - 158k
Wrote ./assets/js/erpnext-web.min.js - 2k
Wrote ./assets/css/frappe-web.css - 54k
Wrote ./assets/myapp/css/myapp.css - 0k Your file should be listed on this line
Wrote ./assets/css/desk.min.css - 265k
Wrote ./assets/js/frappe-web.min.js - 132k
Wrote ./assets/myapp/js/myapp.js - 3k   Your file should be listed on this line
Wrote ./assets/css/list.min.css - 6k
Wrote ./assets/css/report.min.css - 8k
Wrote ./assets/js/list.min.js - 106k
Wrote ./assets/css/erpnext.css - 3k
Wrote ./assets/js/form.min.js - 138k
Wrote ./assets/js/dialog.min.js - 62k
Wrote ./assets/js/desk.min.js - 247k
Wrote ./assets/js/libs.min.js - 886k
Wrote ./assets/js/editor.min.js - 26k
Wrote ./assets/css/module.min.css - 2k
Wrote ./assets/js/print_format_v3.min.js - 18k
Wrote ./assets/js/erpnext.min.js - 82k
Wrote ./assets/js/item-dashboard.min.js - 6k
Wrote ./assets/js/d3.min.js - 343k
Wrote ./assets/css/form.min.css - 4k

And for me it’s working. If you can confirm that you have a similar setup then maybe it’s not the wrong path inside your app but something else.

1 Like
5

@codeag got the error …i wrongly created public folder in apps/myapp/myapp/myapp/public

Thx a lot for the hint!! Core team please close the post!