Introduce
Create React App (CRA)
Is a set of development tools for your React application. It will be suitable for beginners because you do not need to care about the installation of tools that need to be integrated into the project. However, CRA also has limitations in terms of speed and performance
ViteJS
It is a tool to help programmers develop applications faster and cleaner
=> In the past time, Vite has also confirmed the value it brings, so it is used by leading programmers and with a large community of support. In this article, I will not show the pros / cons of each type, but I will guide you to move your project from CRA to Vite.
Start
1. In the package.json file:
1 2 3 4 5 6 7 8 | <span class="token property">"dependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"react-scripts"</span> <span class="token operator">:</span> <span class="token string">"4.0.3"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> + <span class="token property">"devDependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@vitejs/plugin-react"</span> <span class="token operator">:</span> <span class="token string">"1.1.1"</span> <span class="token punctuation">,</span> + <span class="token property">"vite"</span> <span class="token operator">:</span> " <span class="token number">2.7</span> . <span class="token number">0</span> + <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 | <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"start"</span> <span class="token operator">:</span> <span class="token string">"react-scripts start"</span> <span class="token punctuation">,</span> - <span class="token property">"build"</span> <span class="token operator">:</span> <span class="token string">"react-scripts build"</span> <span class="token punctuation">,</span> - <span class="token property">"test"</span> <span class="token operator">:</span> <span class="token string">"react-scripts test"</span> <span class="token punctuation">,</span> - <span class="token property">"eject"</span> <span class="token operator">:</span> <span class="token string">"react-scripts eject"</span> + <span class="token property">"start"</span> <span class="token operator">:</span> <span class="token string">"vite"</span> <span class="token punctuation">,</span> + <span class="token property">"build"</span> <span class="token operator">:</span> <span class="token string">"vite build"</span> <span class="token punctuation">}</span> |
2. Run npm install or yarn to download new libraries
3. Move index.html file from public/index.html => index.html in root project folder
4. In the file index.html remove %PUBLIC_URL%
1 2 3 4 5 6 7 | - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> icon <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> %PUBLIC_URL%/favicon.ico <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> icon <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> /favicon.ico <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> apple-touch-icon <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> %PUBLIC_URL%/logo192.png <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> apple-touch-icon <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> /logo192.png <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> manifest <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> %PUBLIC_URL%/manifest.json <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> manifest <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> /manifest.json <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
5. In the file index.html edit the path pointing to the file index.jsx
1 2 | + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> module <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> /src/index.jsx <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
6. Create config file vite.config.js
1 2 3 4 5 6 7 | <span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vite"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">"@vitejs/plugin-react"</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> plugins <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token function">react</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> |
7. Create an absolute path
1 2 | <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">"common/button"</span> <span class="token punctuation">;</span> <span class="token comment">// <root>/src/common/button.jsx</span> |
- In vite.config.js
1 2 3 4 5 6 7 8 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> resolve <span class="token operator">:</span> <span class="token punctuation">{</span> alias <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> find <span class="token operator">:</span> <span class="token string">"common"</span> <span class="token punctuation">,</span> replacement <span class="token operator">:</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> __dirname <span class="token punctuation">,</span> <span class="token string">"src/common"</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token operator">...</span> |
8. In the .env file change REACT_APP_ => VITE_
Environment variable setting
1 2 3 | - REACT_APP_DOMAIN=https://vidu.com + VITE_DOMAIN=https://vidu.com |
Use
1 2 3 | <span class="token operator">-</span> process <span class="token punctuation">.</span> env <span class="token punctuation">.</span> <span class="token constant">REACT_APP_DOMAIN</span> <span class="token operator">+</span> <span class="token keyword">import</span> <span class="token punctuation">.</span> meta <span class="token punctuation">.</span> env <span class="token punctuation">.</span> <span class="token constant">VITE_DOMAIN</span> |
9. In Typescript projects it is necessary to create the file vite-env.d.ts in the src . folder
1 2 | <span class="token comment">/// <reference types="vite/client" /></span> |
Thus, the transition from CRA to Vite has been completed. You guys start yarn to see the speed of running the server as well as when building to see the benefits of ViteJS. In the next article, I will update a few versions of ViteJs to see what upgrades it has. As well as a performance comparison between ViteJS and Webpack