11670 Make webpack add filehashes to all (read: entrypoint) js files in build #11724

whatisgalen · 2025-01-10T20:09:03Z

Types of changes

Bugfix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Description of Change

This PR creates a webpack_manifest (essentially just a lookup for files to their actual webpack asset filename) so that all .js files can be saved using a filehash in the filename, thereby forcing a cache burst on end-user browser clients whenever novel changes get pushed to a deployment. This is effective on both dev and prod builds.

The base.py view now looks up the asset corresponding to the main_script value.

See webpack-manifest-plugin for more docs

Note that there is an assumption in where the manifest should be looked for:

...
manifest_path = os.path.join(settings.APP_ROOT, "media/build", "manifest.json")

...and it's possible this should search a list of locations instead.

Issues Solved

Closes #11670

Testing this PR

You will need to add:

"webpack-manifest-plugin": "5.0.0"

to your project dependencies and run npm install to install webpack_manifest. You'll also want to run both a production and development build of webpack. All "main_views" should be tested, e.g.

rdm
views/graph
views/graph-designer
views/graph/model-history
views/graph/function-manager
views/map-layer-manager
views/plugin
views/resource
views/resource-editor
views/edit-history
views/edit-log
views/report
views/search
views/user-profile

Checklist

I targeted one of these branches:
- dev/8.0.x (under development): features, bugfixes not covered below
- dev/7.6.x (main support): regressions, crashing bugs, security issues, major bugs in new features
- dev/6.2.x (extended support): major security issues, data loss issues
I added a changelog in arches/releases
I submitted a PR to arches-docs (if appropriate)
Unit tests pass locally with my changes
I added tests that prove my fix is effective or that my feature works
My test fails on the target branch

Accessibility Checklist

Developer Guide

Topic	Changed	Retested
Color contrast
Form fields
Headings
Links
Keyboard
Responsive Design
HTML validation
Screen reader

Ticket Background

Sponsored by:
Found by: @
Tested by: @
Designed by: @

Further comments

This reverts commit 45947d2. revert

…nto archesproject-dev/8.0.x pulls latest from head

…in cntxt, re #11670

…11670

whatisgalen · 2025-01-13T01:40:50Z

making a note to self and others that when ultimately approved, the changes to the frontend webpack utils files (like build-filepath and webpack.common) need to be duplicated in the arches-templates directory's versions of those files.
done ✅

chrabyrd

Overall it looks pretty good. I like the concept and I get why this needs to be a things. There are a few pattern issues to address, but I'm glad you've got this ball rolling! 🍙

chrabyrd · 2025-01-22T00:10:47Z

webpack/webpack.config.dev.js

If this is being added to both webpack.config.dev.js and webpack.config.prod.js, it instead belongs in webpack.common.js

chrabyrd · 2025-01-22T00:16:36Z

package.json

@@ -88,7 +88,8 @@
        "uuidjs": "^3.3.0",
        "vue": "^3.5.8",
        "vue3-gettext": "^3.0.0-beta.6",
-        "webpack-bundle-tracker": "^3.1.0"
+        "webpack-bundle-tracker": "^3.1.0",
+        "webpack-manifest-plugin": "5.0.0"


this should instead be a dev dependency

chrabyrd · 2025-01-22T00:17:20Z

webpack/webpack.common.js

@@ -41,6 +42,18 @@ module.exports = () => {
            PROJECT_RELATIVE_NODE_MODULES_PATH = Path.resolve(APP_ROOT, '..', 'node_modules');
        }

+        const manifestPlugin = new WebpackManifestPlugin({


nit: inline in plugins

chrabyrd · 2025-01-22T00:18:20Z

webpack/webpack.common.js

@@ -41,6 +42,18 @@ module.exports = () => {
            PROJECT_RELATIVE_NODE_MODULES_PATH = Path.resolve(APP_ROOT, '..', 'node_modules');
        }

+        const manifestPlugin = new WebpackManifestPlugin({


There appears to be a large overlap between what this generates and what's already created in webpack/webpack-stats.json. Is there a chance to combine them?

chrabyrd · 2025-01-22T00:20:09Z

arches/app/utils/context_processors.py

@@ -109,3 +113,25 @@ def app_settings(request=None):
            "DEBUG": settings.DEBUG,
        }
    }
+
+
+def webpack_manifest(request):


why make this a context_processor?

chrabyrd · 2025-01-22T00:21:21Z

arches/app/views/base.py

+        main_script = kwargs.get("main_script", None)
+        if main_script:
+            context["main_script_webpack_asset"] = context["webpack_manifest"].get(
+                f"{main_script}.js", ""
+            )


doesn't this need error handling as well?

chrabyrd · 2025-01-22T00:26:54Z

arches/app/views/base.py

The hard part here is that there's no guarantee and endpoint will use BaseManager anymore.

whatisgalen added 9 commits November 17, 2024 17:46

create es dsl builder class for geotile_grid agg, re #11628

45947d2

Revert "create es dsl builder class for geotile_grid agg, re #11628"

af6bc7a

This reverts commit 45947d2. revert

Merge branch 'dev/8.0.x' of https://github.com/archesproject/arches i…

bf605e2

…nto archesproject-dev/8.0.x pulls latest from head

create context processor for webpack manifest, re #11670

32646be

commit webpack-manifest-plugin dependency, re #11670

0005a66

import and declare manifestPlugin in webpack.common, re #11670

4bedacf

call webpackmanifestplugin in webpack prod config, re #11670

43d034e

add first 8 chars of contenthash to .js filenames, re #11670

52744ae

commit webpack manifest plugin to webpack dev config, re #11670

7deb3e7

whatisgalen marked this pull request as draft January 10, 2025 20:09

whatisgalen changed the title ~~11670 hashed files~~ 11670 Make webpack add filehashes to all js files in build Jan 10, 2025

whatisgalen requested a review from chrabyrd January 10, 2025 20:18

whatisgalen added 3 commits January 11, 2025 19:04

update webpack_manifest ctx_processor, re #11670

260737c

use webpack_manifest to lookup webpack asset for main_script js file …

c5e6310

…in cntxt, re #11670

source main_script webpack asset using manifest lookup in cntxt, re #…

901bb09

…11670

whatisgalen marked this pull request as ready for review January 12, 2025 03:25

whatisgalen changed the title ~~11670 Make webpack add filehashes to all js files in build~~ 11670 Make webpack add filehashes to all (read: entrypoint) js files in build Jan 13, 2025

whatisgalen added the Release: 8.0.0 label Jan 13, 2025

whatisgalen added 2 commits January 18, 2025 17:01

copy changes to template versions of webpack config files, re #11670

c98635e

add release note

8d9ec41

chrabyrd requested changes Jan 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

11670 Make webpack add filehashes to all (read: entrypoint) js files in build #11724

11670 Make webpack add filehashes to all (read: entrypoint) js files in build #11724

whatisgalen commented Jan 10, 2025 •

edited

Loading

whatisgalen commented Jan 13, 2025 •

edited

Loading

chrabyrd left a comment

chrabyrd Jan 22, 2025

chrabyrd Jan 22, 2025

chrabyrd Jan 22, 2025

chrabyrd Jan 22, 2025

chrabyrd Jan 22, 2025

chrabyrd Jan 22, 2025

chrabyrd Jan 22, 2025

11670 Make webpack add filehashes to all (read: entrypoint) js files in build #11724

Are you sure you want to change the base?

11670 Make webpack add filehashes to all (read: entrypoint) js files in build #11724

Conversation

whatisgalen commented Jan 10, 2025 • edited Loading

Types of changes

Description of Change

Issues Solved

Testing this PR

Checklist

Accessibility Checklist

Ticket Background

Further comments

whatisgalen commented Jan 13, 2025 • edited Loading

chrabyrd left a comment

Choose a reason for hiding this comment

chrabyrd Jan 22, 2025

Choose a reason for hiding this comment

chrabyrd Jan 22, 2025

Choose a reason for hiding this comment

chrabyrd Jan 22, 2025

Choose a reason for hiding this comment

chrabyrd Jan 22, 2025

Choose a reason for hiding this comment

chrabyrd Jan 22, 2025

Choose a reason for hiding this comment

chrabyrd Jan 22, 2025

Choose a reason for hiding this comment

chrabyrd Jan 22, 2025

Choose a reason for hiding this comment

whatisgalen commented Jan 10, 2025 •

edited

Loading

whatisgalen commented Jan 13, 2025 •

edited

Loading