feat: cache busting

[lauty95]

Cache Busting

• Vite is used to compile Vue components to plain JS (without hash or final bundle) in public/js/compiled/. This Vite-compiled file is then imported in check_run/public/js/check_run.bundle.js.

• The final bundle and cache busting are handled by Frappe/Bench, which generates the *.bundle.[hash].js files and references them automatically via hooks.py.

Technical Limitation:

Frappe/Bench's build system runs its own build (esbuild) first, and only then executes the "build" script from the app's package.json. This causes the following error if the Vite-compiled file does not exist yet:

To avoid this, you must always run yarn build first, and then bench build --app check_run.

It is not possible to synchronize the hash between Vite and Frappe, as both systems calculate the hash differently.

This is the best solution I could find. If there is a better approach or something I missed, I can review it.

[Alchez]

@lauty95 I haven't tried this yet, but Vite can generate a manifest file along with the build outputs, which could be read in the .bundle.js file and the output files be imported dynamically?

Also, to ease dev, we could add bench build --app check_run to the build script in the package.json, so that only yarn build is sufficient to be run.

[lauty95]

@Alchez I ran some tests using a manifest file.

I created a file called vite_asset.py that reads the manifest.json generated by Vite to get the actual bundle filename, and then includes it dynamically in hooks.py.

Now, we just need to run bench build or bench build --app check_run

Let me know if you have any suggestions!

[lauty95]

@Alchez, @agritheory mentioned that functions in hooks.py can sometimes cause issues with Redis (due to pickling and storage in Redis leading to unexpected states), so I looked for an alternative approach.

Frappe executes its own builder first (at this stage, the actual files are compiled and hashed), and then any external builders (e.g., Vite) are executed afterwards.

My solution was to generate a check_run_vue.bundle.js file before Frappe's build process starts.

Important note about build order: There's a potential issue with bench build - the Vite bundle won't be ready in time for Frappe to hash it.

So, we should first compile with yarn build (which runs Vite), and then run bench build.

To make this easier, I created a build_all.sh script that runs both commands in the correct order. This commands runs when you run yarn build.

You now only need to run yarn build instead bench build --app check_run.

Let me know what you think. Thanks!