react-admin
react-admin copied to clipboard
marmelab
Speed up development on demos by using esbuild and aliases
Problem
Working on the e-commerce and crm demos is a pain because of the default CRA config:
- You have to build the ra packages at least once before running the demos
- You have to rebuild the ra packages whenever they change
- You have to restart the demo to actually see the changes
- The e-commerce demo takes forever to start and load
Solution
For development only, leverage esbuild and aliases using craco. We still use the default CRA config for building.
Benchmarks on Dell XPS 13
Webpack:
- need to build ra packages at least once and rebuild them each time they change: 1m21
- first run of the demo: 1m until usable
- subsequent runs of the demo: 15s
Craco with Esbuild and aliases (dev only):
- no need to build/rebuild the packages ever
- first run of the demo: 30s until usable
- subsequent runs of the demo: 10s
Limitations
While we don't have to build ra packages anymore while working on the demos, I haven't been able to make fast refresh handle the ra packages changes so you still have to refresh the page manually. We didn't have this feature with the default CRA either though so we still get some great benefits.
I'd love to but we need to keep at least one CRA to ensure their users don't have any issues
At build time, yes. Otherwise, it happens in your editor just like the packages
This is pretty cool. @fzaninotto I was thinking of migrating the project to use yarn workspaces + vite (esbuild + rollup), move away from tsup + lerna. This will give us support for tsconfig references + composite builds, and seems faster at compiling deterministically.
This would be ideal, as it'll better allow for developing projects along-side react-admin (as I'm trying to do at the moment).
Also, hi! Future contributor here
We already uses yarn workspaces and esbuild (through tsup). Lerna is only used for publishing. We don't want to use only vite as we need a way to validate everything works for CRA users
