Notes

Convert Create React App project to Vite

Edit on GitHub

ReactJS
2 minutes
  • Make sure all the needed dependencies in package.json are copied to the new project and installed
  • Make sure the import paths are okay

URLs need to be updated in index.html

%PUBLIC_URL% is Create React App specific, you need that for CRA to be able to process files in the public/ folder. For Vite, it is not necessary.

1<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
2<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
3<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
4<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#ed254e">
5<meta name="msapplication-TileColor" content="#000411">
6<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
7<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
8
9<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

would become

1<link rel="icon" href="/favicon.ico" />
2<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
3<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
4<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ed254e">
5<meta name="msapplication-TileColor" content="#000411">
6<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
7<link rel="apple-touch-icon" href="/logo192.png" />

Environment variables (process.env)

Vite: Env and Mode

process.env is not available. Vite exposes env variables on the import.meta.env variable instead.

Make sure to also change the variable prefix from REACT_APP_ to VITE_ as only variables prefixed with VITE_ are exposed to your Vite-processed code

1const TMDB_API_TOKEN = process.env.REACT_APP_TMDB_API_TOKEN

would become

1const TMDB_API_TOKEN = import.meta.env.VITE_TMDB_API_TOKEN

Also update these variables in your deploy environment, for example; update them in Netlify

Build location

Output directory for builds is build/ in CRA while dist/ in Vite.

If you have been deploying with Netlify, either change the value for Publish Directory in Netlify Admin or netlify.toml

1[build]
2base = "/"
3command = "npm run build"
4publish = "dist/"

Or you can update your build directory by changing the value for build.outDir in vite.config.js to build

1export default defineConfig({
2  // ...
3  build: {
4    outDir: 'build'
5  }
6})
Browse all topics