Skip to content

Commit

Permalink
cmd/hiveview: JS/CSS bundling with esbuild (#708)
Browse files Browse the repository at this point in the history
This should fix issues with browser caching in the frontend. Ever since the
app was split up into multiple JS files, the page would occasionally fail
to load because the browser did not refresh some of the JS files when they
were modified.

In `hiveview -serve` mode, the new bundling system works like this:

- In deploy.go, we maintain a static list of 'bundle targets'. The targets
  correspond with the app's entry point JS/CSS files.

- Whenever one of the HTML files is requested, the server traverses the
  document and replaces references to bundle targets with a path to the built
  bundle. For example, <script src="/lib/app.js"> is replaced by
  <script src="/bundle/app.XXXX.js"> where XXXX is the bundle hash.

- Bundle outputs are stored in memory, and bundles are rebuilt whenever
  necessary, i.e. whenever one of their inputs has changed.

Making the JS code work with esbuild required some dependency re-structuring.
All external JS libraries were updated to the ES module version provided by
upstream. I had previously worked around the lack of ES module compatibility by
providing a small 'module wrapper' for each library, but this workaround broke
under esbuild.

However, upgrading everything to ES modules created another issue: most
libraries use named imports (`import "jquery"`), which can't be resolved
directly by the browser. Making the app load from un-bundled sources requires
an importmap. So, when use of the bundle is disabled by the -assets.nobundle
flag, hiveview writes an importmap into the document. The same importmap
definition is also used by esbuild to resolve named imports at build time.

All this means the app can no longer be served directly from assets/. If you
just pointed nginx at the assets/ directory and opened index.html, loading of
app.js would fail because the document doesn't have an importmap. And it
wouldn't use the bundle either. Serving the frontend with a server that isn't
`hiveview -serve`, like we do for production hive, now requires running
`hiveview -deploy <dir>` to install the fully-built app into a new directory.
  • Loading branch information
fjl authored Feb 8, 2023
1 parent 2de942f commit 0716d91
Show file tree
Hide file tree
Showing 44 changed files with 47,256 additions and 350 deletions.
10,876 changes: 10,876 additions & 0 deletions cmd/hiveview/assets/extlib/bootstrap-5.2.3.css

Large diffs are not rendered by default.

7 changes: 0 additions & 7 deletions cmd/hiveview/assets/extlib/bootstrap-5.2.3.min.css

This file was deleted.

1 change: 0 additions & 1 deletion cmd/hiveview/assets/extlib/bootstrap-5.2.3.min.css.map

This file was deleted.

7 changes: 0 additions & 7 deletions cmd/hiveview/assets/extlib/bootstrap-5.2.3.min.js

This file was deleted.

1 change: 0 additions & 1 deletion cmd/hiveview/assets/extlib/bootstrap-5.2.3.min.js.map

This file was deleted.

5,201 changes: 5,201 additions & 0 deletions cmd/hiveview/assets/extlib/bootstrap-5.2.3.mjs

Large diffs are not rendered by default.

5 changes: 0 additions & 5 deletions cmd/hiveview/assets/extlib/bootstrap.module.js

This file was deleted.

5 changes: 5 additions & 0 deletions cmd/hiveview/assets/extlib/dataTables-1.13.1.bootstrap5.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 0716d91

Please sign in to comment.