spike: Run maas-ui using Vite instead of CRA #4774
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Demo starting at https://maas-ui-4774.demos.haus |
|
This looks very promising! I opened a PR with a few fixes: ndv99#2 |
fix assets-path
|
One thing that we should look into is why the JS size seems to have increased with Vite and whether we could do anything about it. CRAbuild/static/js/main.d7bc04fd.js gzip: 595.71 kB Vitebuild/assets/index-387abeac.css 518.78 kB │ gzip: 71.98 kB
|
|
Superseded by #5207 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Note
This branch/PR is a spike - it is intended for the purposes of an experiment and is very buggy, and not to be merged.
Description
create-react-appis beginning to show its age - using webpack under the hood means that the entire application needs to be bundled before it can be served. You may have noticed how long maas-ui takes to spin up when you usedotrunoryarn start; this is a direct effect of this. As well as this, making changes to the source code requires this process to happen again, with changes being compiled first before being served.Vite has a focus on speed and performance - using native ES modules, bundling before serving is no longer a required step. Source code is transformed and served by Vite on demand, based on browser requests. As well as this, Hot Module Replacement (HMR) to reflect code updates in the browser, which results in rapid reflection of changes made to the source code.
Although not an entirely trivial process, React applications created with CRA can be migrated to Vite without having to start over from scratch. This PR is a brief experiment to see how easy the process would be to migrate maas-ui over to Vite, and whether or not this would be a sensible change in our tooling for the future of maas-ui development.
Running this branch
To run this branch you'll first need to run
yarn clean, followed byyarnto install changed dependencies. Once that's done, you should be able to just runyarn startand go tohttp://<your-ip>:8400.