CRA (Create React App)
CRA is a pre-assembled toolchain/boilerplate that lets you have all the files needed for a react app. It gives you basic code boilerplate, webpack for bundling, eslint for code cleaning and jest for testing all by default when you create app using CRA.
Features:
<ul>
<li>Bundled with webpack</li>
<li>Slower dev server</li>
<li>Hot reloading is very slow</li>
<li>Lots of built in configs</li>
<li>Heavier dependencies</li>
<li>Hard to customise(needs ejecting)</li>
<li>Deprecated</li>
</ul>
What happens when you run ‘_npm start’ _in CRA?
<ol>
<li>When you run ‘npm start’, npm reads package.json for the scripts.<img src="https://media.daily.dev/image/upload/s--a9aC09E0--/f_auto/v1773019526/ugc/content_5a2d4944-27a4-4880-9580-be40ecbc2c00?_a=BAMAMiiu0" alt="image.png"></li>
</ol>
So, react-scripts is a package provided by CRA and npm executes ‘react-scripts start’.
<ol>
<li>react-scripts internally starts Webpack Dev Server which is built on Webpack. The dev server usually starts at - <a href="http://localhost:3000" target="_blank" rel="noopener nofollow">http://localhost:3000</a></li>
<li>Before the dev server becomes re-usable, webpack bundles the whole project. It process files like, src/index.js, src/App.js, components, images, styles using loaders like babel-loader, css-loader, style-loader. It also converts JSX to Javascript using Babel.</li>
<li>After compilation, webpack produces something like this **bundle.js **and bundle.css. These are not written to the disk, but instead these exist in memory of the dev server.</li>
<li>When the browser requests, the server then serves the bundle.</li>
<li>Browser loads the bundled file (bundle.js) which contains App.js,components, react, react-dom, all dependencies.</li>
<li>CRA supports Hot Reloading or Hot Module Replacement(HMR). When there is code change App.js for example, the webpack,</li>
</ol>
<ul>
<li>rebuilds the dependency graph</li>
<li>recreates part of the bundle</li>
<li>sends the update to the browser</li>
</ul>
This process is very slow compared to vite
Vite
Vite is modern and new plugin-based build tool that is framework agnostinc. It can be customised according to the framework. It has built in typescript capability. It has got esbuild for dev bundler, rollup for prod bundler, babel or SWL as transpilers, vite server as the server.
Features:
<ul>
<li>Framework agnsotic</li>
<li>Very fast dev server(uses native ES Modules)</li>
<li>Uses Rollup for production builds</li>
<li>Minimal setup - choose the framework + typescript</li>
<li>Lightweight</li>
<li>Easier to customise</li>
</ul>
What happens when you run ‘_npm run dev’ _in Vite?
<ol>
<li>
When you run 'npm run dev’, npm reads the package.json file for the scripts.<img src="https://media.daily.dev/image/upload/s--8HKwF7Tv--/f_auto/v1773021512/ugc/content_768d4575-90a7-4b9e-bac2-d6c43b90248a?_a=BAMAMiiu0" alt="image.png">npm executes ‘vite’
</li>
<li>
Vite starts a local HTTP development server instantly which runs at -<a href="http://localhost:5173" target="_blank" rel="noopener nofollow">http://localhost:5173</a>
</li>
<li>
This server listens for browser requests, serve project files and transform code when needed
</li>
<li>
Vite scans the entire project for important files like **index.html, src/main.jsx, src/App.jsx, node_modules, vite.config.js. **Vite determines the entry point, module graph and dependencies.
</li>
<li>
If it is a React app, it pre-bundles the dependencies like react, react-dom once, which are the libraries inside the node_modules using **esbuild. **The pre-bundling is done because some libraries might still be using the older formats like Common JS or UMD.
</li>
<li>
Vite converts them to ES Modules so browsers can serve them efficiently. Since esbuild is writtne in Go, this step is extremely faster.
</li>
<li>
When you open local host url, browser sends the GET request to the server. It responds back with index.html file.<img src="https://media.daily.dev/image/upload/s--DSI2LdjK--/f_auto/v1773162282/ugc/content_1da12610-85ed-4606-8830-7617527418eb?_a=BAMAMiiu0" alt="image.png">
</li>
<li>
The browser now requests modules one by one which is possible because modern browsers support ES Modules<img src="https://media.daily.dev/image/upload/s--vrgnHgln--/f_auto/v1773162309/ugc/content_5e82ac47-b849-4baf-ba0c-762e754fbd69?_a=BAMAMiiu0" alt="image.png">
</li>
<li>
When browser requests file like this: src/App.js, vite transforms it<img src="https://media.daily.dev/image/upload/s--K9ojXhTB--/f_auto/v1773162344/ugc/content_33a90d81-1270-4566-aca3-59fd4eea3d8b?_a=BAMAMiiu0" alt="image.png">
</li>
<li>
Hot Reloading or Hot Module Replacement(HMR) is supported by Vite. When a file src/App.js is changed, Vite instead of reloading the entire app, it
</li>
</ol>
<ul>
<li>detects the file change</li>
<li>recompiles only that file</li>
<li>sends update via websocket</li>
<li>browser updates the module instantly</li>
</ul>
Important Notes:
<ol>
<li>The “Entry-point” Difference:</li>
</ol>
CRA: The entry point in CRA is src/index.js file. Webpack starts here and builds a tree for every file attached to it
Vite: The entry point in Vite is index.html. It treats index.html as part of the source code. It looks for <code>&lt;script type=&quot;module&quot; src=&quot;...&quot;&gt;</code> tags to figure out what to load.
<ol>
<li>Why pre-bundling in Vite?</li>
</ol>
The pre-bundling is done in Vite to avoid the “**network flood” **problem. Without pre-bundling, suppose an imported library has 500 internal files, the browser would make 500 HTTP requests which would crash the browser. But, pre-bundling turns this 500 internal files to one file so that browser makes only one request

The Web Lab

A side-by-side breakdown of Create React App (CRA) and Vite, explaining how each tool works under the hood. CRA uses Webpack to bundle the entire project before serving it, resulting in slower dev server startup and hot reloading. Vite leverages native ES Modules and esbuild for dependency pre-bundling, serving files on-demand for near-instant startup. Key differences covered include entry points (src/index.js vs index.html), bundling strategies, HMR behavior, and why Vite pre-bundles node_modules to avoid browser network flooding.

Difference between CRA and Vite