4. Migrating to Vite #

Created Sun Sep 24, 2023 at 5:00 PM

Situation (ignorable) #

You have a React app, created using create-react-app (CRA) project that you wish to migrate to Vite.

CRA is really slow, especially the npm install step.

This usually results in failure during free deployments (like render.com) - due to memory usage and timeouts.

Moving to Vite.js solves this - npm install for projects is very fast, development experience is good and free deployments don’t fail.

You have your CRA project. Ok.

We need to add Vite config files to this project. For this, create a new (blank) Vite project -

Run npm create vite in the terminal.
In the prompt - add project name (“hello-world”), select framework as React and variant as JavaScript + SWC.

Rename component .js files to .jsx. Util files don’t need to be renamed. Just to be clear: a component file means any file having JSX code. See changes (view GitHub commit diff). Automating the rename (wip)
Move index.html and change shell files - move index.html from public to src and change other “shell” files like App.js, index.js, App.css etc. See changes
Add vite.config.js, package.json, package-lock.json - just copy this from the fresh vite project into your CRA project. Replace conflicting files. See changes
Handle environment variables (optional - if your project uses them) - code process.env.PORT becomes import.meta.env.PORT. Make similar changes at other places. See changes Handle environment variables (optional - if your project uses them)
Run the app - npm run dev should work now.
Cleanup - delete extra files if any.
Deployment build folder (optional) - Vite’s build folder is named dist (as opposed to CRA’s build). Change corresponding backend code if needed. See changes