Add front-end build tooling + fix build error #6473
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The Problem
In April, an errant paren was introduced which broke the build for the vtctld2 UI. Since then, making changes to the vtctld2 UI has required editing the minified .bundle.js and CSS files directly. Fixing this bug is complicated by the very old (and undocumented) versions of node and npm required by the build.
What this PR does
Adds
web_bootstrap.sh
to check for the correct versions of node and npm before runningnpm install
.Fixes the extra paren that's breaking the build once dependencies are installed.
Improves the local dev workflow by adding a proxy pass-through for API requests from an Angular server (which offers hot reloading) to an instance of the vtctld API running in Docker. The proxy layer lets us side-step any CORS issues (ugh) we might run into otherwise. This is convenient as it gives our UI data to work with, without needing to add a bunch of API response mocks to the front-end.
Streamlines (and documents) the web Makefile targets a little bit.
🌶️ Importantly, this PR does NOT regenerate the production vtctld UI assets. In other words, merging this PR will not affect the current UI in any way.
This is for a few reasons:
To reduce the surface area + risk of merging this PR
To avoid overwriting any changes that were made directly to the current minified .bundle.js files
To make rollbacks easier: if, separately, we regenerate the production build and run into issues, it will be much easier to roll that back without losing the tooling improvements in this PR.
I'm not familiar with the vtctld2 UI (yet); it would take me some time to verify that everything still works as intended. :)
Reproducing the build error
First, follow the installation instructions to acquire the right version of node & npm. (This can be automated, but I frankly don't think it's worth the time if the intention is to rewrite most of this.)
Then, check out this branch (so we can use the updated build tooling) and reintroduce the build error:
Then, do a production build of the front-end assets and run it all within Docker (or outside of Docker, if you prefer, as long as the API is hosted on http://localhost:15000). This is also documented in the README.
Finally, open up the hosted vtctld2 UI on http://localhost:15000/app. You'll see a "Loading..." message and a bunch of template errors in the Chrome console:
You can kill the Docker server at this point with ctrl+C.
Testing out this fix
Remove the bug and generated files we reintroduced above:
git checkout -f && git clean -fd
Do another production build, as above (and in the README):
make web_build make docker_local && ./docker/local/run.sh
You should then see the UI on http://localhost:15000/app 🎉
What else?
Open to any and all feedback. 🙏 Thanks for looking, and extra thanks to @acharis for talking through some of the go parts with me. :)