yarn dev#The dev command provides hot-reloading for multiple bundles — like frontend, admin and optionally serverless mode.
It's custom built, and made to be as clean as possible by showing issues relevant to the most recent attempt at a rebuild.
Internally, the system uses Webpack and webpack-dev-server, along with react-refresh. Webpack configuration is not editable, and is auto-generated by the tool itself. We may swap Webpack out for another tool such as swc or esbuild at some point in the future for an additional speed boost, and so allowing access to Webpack config could result in compatibility issues.
For speed, each Webpack bundle runs in a separate worker thread, so that each bundle can compile concurrently, taking advantage of multiple CPU cores.
The dev tool also provides realtime GraphQL -> TypeScript generation, by monitoring your project for changes and rebuilding when appropriate. For this, we're using GraphQL Code Generator with a host of custom plugins.
These files are only generated by the dev tool, and not be the yarn build tooling. This only really matters for dynamic queries in the queries/ folder. To be safe, you should always make sure yarn dev runs after editing a .graphql file in your project.
yarn build#This produces production builds of the frontend and admin bundles, with tree shaking, minification and code-splitting.
It also produces a bundle sizing report, in /dist/frontnend/bundle-report.html — which you can use to see which dependencies are bloating up your bundle files. If a dependency is too large, consider dynamically importing it instead.