GitHub link to article, vite-react-js-template
Situation (ignorable)
You have a React app, created using create-react-app (CRA) project that you wish to migrate to Vite.
Why migrate (ignorable)
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.
Preparation
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 asJavaScript + SWC
.
Steps
-
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) -
Move index.html and change shell files - move index.html from
public
tosrc
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
becomesimport.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'sbuild
). Change corresponding backend code if needed. See changes
For more info, see the GitHub trail (commits) starting from https://github.com/exemplar-codes/posts-express-api-app/commit/52a0fe58befad2bda8eacf06383fa6f247fe04ef
Top comments (0)