An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
Some of Our Sources
- BoingBoing
- Technology Review
- Web Designer Wall
- Joshua Blankenship
- Smashing Apps
- Vandelay Design
- Noupe
- Crazy Leaf Design
- Reencoded
- Stylized Web
Help Webnuz
Referal links:
Using Vite on an existing React project
Just incase you're wondering how to boost your dev server if you already got a project up and running with our beautiful react application, here I will show you how to infuse Vite into your project and experience that speed you've always wanted.
Also if you are wondering what is Vite and probably want to use it, you can checkout my last tutorial on 'How to use Vite with React'
Without no further a do...
What you need to have in check.
- A running react application
- A good network
Then
Setup the required packages from you terminal like this
$ yarn add vite @vitejs/plugin-react-refreshCreate a vite.config.js file in your root folder and add the following code
// vite.config.jsimport { defineConfig } from 'vite'import reactRefresh from '@vitejs/plugin-react-refresh'export default defineConfig({ plugins: [reactRefresh()]})This config file pre-bundles your dependencies when sever is running.
From your root folder too, edit your package.json. This define the bundler for starting, building and previewing the application from the initial react-create start...
// package.json "scripts": { "start": "vite", "build": "vite build", "test": "vite test", "eject": "vite eject" },Still from your root folder, open /public folder and move the index.html file to the parent folder.
In the file, go ahead and remove all the %PUBLIC_URL% attached too any <link.../> and a <script> tag and hence reference to the appropriate directory like so /src/index.js/.
<!-- Before edit --><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><!-- After edit -->...<link rel="icon" href="https://dev.to/favicon.ico" /><link rel="apple-touch-icon" href="https://dev.to/logo192.png" /><link rel="manifest" href="https://dev.to/manifest.json" /><body>... <div id="root"></div> <script type="module" src="/src/index.js"></script></body>Finally
You can now run
$ yarn startHappy vite coding.
Original Link: https://dev.to/asapconet/using-vite-on-an-existing-react-project-208p
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To