New Asset Bundle - An Small Issue

1

Hi everyone!

I expect everyone is going fine those days!

I’m writing to get some opnion around an issue I’m facing and I think others will fall into also!

The new asset bundling, is really great due the performance, and the fact it support other frameworks like vue, react and svelte make’s it fantastic!

But, nothing are flowers!

Since the structure of the css generated always include a hash, as documented here , there’s no easy way to get the bundled file from external applications.

For example, I’m changing the code of the frappe-chat for the chat bubble become embeddable!

It was supposed to be a trivial task, since the unique thing I need to get is an JavaScript and a CSS file!

But, since the bundled file names aren’t predictable anymore due the hash, I had to create an whitelisted api, that reads the assets.json and returns the filenames I’m looking for!

After that I can start building my application!

On my overview, the need to make a request call to get the file names, then to load the files, makes no sense, but IMHO, may I’m wrong!

I dont know if someone have other ideas? I was thinking in change the bundle process, for it create symlinks under the /assets/css and /assets/js with the bundle name without the hash!

2 Likes
2

You can use the frappe/assets.js module’s APIs to figure this out. The file name mapping is stored as assets_json key IIRC and is set in the User bootinfo too.

1 Like
3

Hi @gavindsouza is exactly what I’m doing!

But, for example, instead of having something like that

<script src="https://myserver.com/assets/js/chat-widget.bundle.js"></script>

Now I have

<script>
    fetch(`https://myserver.com/api/method/chat.api.whereismyassets`).then(res => {
       ...
    });
</script>

Doesn’t look good this scheme!

Also, I’ll need now to build a complete new caching scheme, to prevent one API call to my server, all the time the page reload, so I need to do what’s the browser do by default!

The bootinfo is not an option, because the file will be loaded externally to frappe!

1 Like
4

You can perhaps have the URLs from assets_json embedded in your HTML directly. Regenerate said HTML file on each bench build.

5

@gavindsouza I think you didnt got that this will be used from external apps, not from ERPNext or Frappe apps!

Let’s say, I would like to embed the chat inside a landing page made Wordpress, or a woocommerce site, or a django application.

I wanna the frappe chat to be the Ominichannel for communication across all platforms we manage, but this little issue, dont help other applications to work outside the ecossystem, interact with frappe and erpnext when the code is built inside Frappe/ERPNext

6

You can always write an endpoint like get_js for this purpose then. A dynamic page (get_context) that renders a valid JS file would also work perhaps.

7

@gavindsouza yes I got that, and it’s really what I’m doing!

But, not HTTP friendly let’s say that!

No Nginx cache, unecessary processing on my application, processing call to request static files!