Introduce vite to transpile js/css assets for development and production + vitest for static file testing #22957
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.
Relates to: mozilla/addons#2000
Important
This PR contains #22955 which should be merged first
Description
preload.js
andanalytics.js
scripts initially.Context
This PR introduces the "plumbing" needed for compiling assets with vite. It does not migrate all assets to using vite. We should split this up after landing this and we can move assets over to esm with vite.
Vite
Vite will now compile every file in
./static/js/*.js
and./static/cs/*.less
into independent bundles. Those files can then be included in our django app via the helper methodvite_asset
.For example:
This will render roughly to this:
In development mode,
vite_asset_url
will resolve to/static/bundle/<path>
where path is the original path to the url.Nginx routes
/static/bundle/
to the vite dev server which will then return the asset compiled in real time. LESS will return CSS and JS will return transpiled js.In production mode, vite will compile the assets and save them in
./site-static/assets/
and a manifest will be used to resolve the url to the file path. Nginx will mount this path and serve files directly. In production environments, like before we will serve files from a CDN.Testing
Dev mode
Run the dev/prod version of the app and make sure that:
Prod mode
Automated tests
Run the following tests which are now using vitest instead of jest
make test_setup
make run_js_tests
Checklist
#ISSUENUM
at the top of your PR to an existing open issue in the mozilla/addons repository.