Create a React App via Vite, Configure the Application
-
yarn create vite my-personal-project
Then choose
react-ts
in the command line. -
- Config for MUI and Config for
.env
:// vite.config.ts import { defineConfig, loadEnv } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig(({ command, mode }) => { const env = loadEnv(mode, process.cwd(), '') const newMap: { [key: string]: string | undefined } = {} Object.entries(env).forEach(([k, v]) => { if (k.startsWith("VITE_")) { newMap[`process.env.${k}`] = v || undefined; } }) process.env = Object.assign(process.env, newMap) return { plugins: [react()], optimizeDeps: { include: ['@emotion/styled'], }, } })
- Note that I also require the
env
variable be prefixed byVITE_
in order not to include so many unrelated variables.
- Config for MUI and Config for
Environment Variables
-
Create
.env.{dev, uat, prod}
files for env variables of different stages. -
Take
.env.prod
as an example, write:# .env.prod VITE_ENV=prod VITE_ASK_BILLIE_ENABLED=false VITE_GOOGLE_AUTH_BACKEND_URL=https://google-auth-billie-web-prod.wonderbricks.com VITE_BACKEND_URL=https://alb.wonderbricks.com:9002
-
Sciprts for loading env variables for different stages:
"scripts": { "start:dev": "vite --mode dev", "build:uat": "tsc && vite build --mode uat", "build:prod": "tsc && vite build --mode prod", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" },