Migrate React project from create-react-app to Vite.js

Published on 2023-07-30 · Vite.js Programming JavaScript React

Recently I had to replace create-react-app with Vite.js in one project at work. This is a thread of what I did to make that work.

Remove CRA & install Vite.js

This is pretty straight-forward, I uninstalled CRA and installed Vite.js packages. I followed an example for react-ts available at Vite documentation1.

Add support for tests (Jest, React Testing Library)

That one was tricky, but thanks to 2 articles23 on Medium (I will link to privacy-friendly versions) I managed to run tests.

Vite config

95% of config was easy to set up, the only thing I had to search online was how to force Vite into using HTTPS with some sort of certificate. It was possible with vite-plugin-basic-ssl4.

All set up!

It took me about an hour to set up Vite.js into desired configuration to allow that specific React+TypeScript project into running. I hope it will also help you to kickstart your migration CRA => Vite.

Footnotes

  1. https://vitejs.dev/guide/#trying-vite-online ↩

  2. https://scribe.rip/quick-jest-setup-with-vitejs-react-typescript-82f325e4323f ↩

  3. https://scribe.rip/how-to-setup-jest-and-react-testing-library-in-vite-project-2600f2d04bdd ↩

  4. https://github.com/vitejs/vite-plugin-basic-ssl ↩