TASIOMIND.DEV — OPERATIONAL▸▸▸FULL STACK DEVELOPER @ GWQ SERVICEPLUS AG▸▸▸FOUNDER — K8SGPT.AI▸▸▸OPEN SOURCE: ACTIVE▸▸▸DISTRIBUTED SYSTEMS / KUBERNETES / AI▸▸▸RUST + GO + PYTHON▸▸▸FIELD TESTED / STATUS — NOMINAL▸▸▸LOCATION: EUROPE/BERLIN▸▸▸TASIOMIND.DEV — OPERATIONAL▸▸▸FULL STACK DEVELOPER @ GWQ SERVICEPLUS AG▸▸▸FOUNDER — K8SGPT.AI▸▸▸OPEN SOURCE: ACTIVE▸▸▸DISTRIBUTED SYSTEMS / KUBERNETES / AI▸▸▸RUST + GO + PYTHON▸▸▸FIELD TESTED / STATUS — NOMINAL▸▸▸LOCATION: EUROPE/BERLIN▸▸▸
← reactjs

Convert Create React App project to Vite

December 21, 2023

  • 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.

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

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

would become

code
<link rel="icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ed254e" />
<meta name="msapplication-TileColor" content="#000411" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<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

code
const TMDB_API_TOKEN = process.env.REACT_APP_TMDB_API_TOKEN;

would become

code
const 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

code
[build]
base = "/"
command = "npm run build"
publish = "dist/"

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

code
export default defineConfig({
  // ...
  build: {
    outDir: "build",
  },
});