Matt Elliott

March 6, 2021

Moving from create-react-app to vite

If you haven't heard about Vite.js yet, you should check it out. It's super fast with HMR and instant server starting.

I've used CRA for awhile now and it's great for getting going on React, but if you're wanting to move away from webpack in favor of vite then here are the few things you'll need to do:

1. Move public/index.html to the root of your repository
2. Remove any %PUBLIC_URL% in index.html.
3. Add <script type="module" src="/src/index.tsx|jsx"></script>  to just before the closing body tag
4. Update package.json scripts:
   - "dev": "vite"
   - "build": "vite build" // prepend "tsc &&" for TypeScript
   - "preview": "vite preview"
5. If you're using `process` anywhere.
   - update `process.env` to use `import.meta.env`
   - NODE_ENV === 'production', import.meta.env.PROD
6. If you're using REACT_APP_XXX env vars, switch to VITE_XXX
7. Run `npm run dev` and you should be good to go

This may not cover all cases, but it should cover most. FYI vite doesn't put a shim in for process so you may need to shim it yourself if anything you're using uses it.