If you are using React Vite and have scripts that should only run in Production, such as Google Tag Manager, you can setup separate index.html files to handle different environments. This is crucial to prevent improper tracking and can also be very important to prevent a service like Google AdSense from showing ads in your dev or test environments.
To get started, review the following steps for updating your code and your package.json file.
1. Create a folder, "buildfiles", in the root of your project.
2. Create an Environment specific subfolder in "buildfiles" (ex: "dev").
3. Create an index.html file specific to that Environment.
4. Update your package.json file to use the following "dev" and "build" scripts. These work on Windows. You may need to make command changes for Linux.
"scripts": {
"dev": "copyfiles -f ./buildfiles/dev/index.html ./; vite",
"build": "copyfiles -f ./buildfiles/prod/index.html ./; vite build"
}