How to use different firebase hosting environments with React and Vite
Imagine you're building a React app with Vite and powered by Firebase, and you use Firebase hosting.
For local development you can emulate Firebase, but you can also have a LIVE Firebase project for development.
For this, you need to create a new Firebase project, you need to build the app locally using the correct environment variables, and lastly you deploy it.
This is how you make it work:
Create a new Firebase project for development from the Firebase Console. You might call it my-app-development, my-app-staging, or whatever you want.
Inside the Firebase project, create a new web app and take note of the config values.
In the local project in your computer, add the new Firebase project, running this in the root of the project:
firebase use --add, select the new project you just created and give it any alias you want (
Create a file named
[mode]is the name of the new environment. For example:
.env.development.local, you can read more about how Vite handles environment variables
Add the config values from the Firebase app (and any other env variables you need) to the new env file
Add a build script to your
package.jsonfile looking like this:
"build-dev: "tsc && vite build --mode development". If your environment is named different than development (e.g. staging), then use it instead.
Run the build script you just created:
Deploy to Firebase:
firebase deploy -P dev
You could also have a deploy script:
"fb:deploy-dev": "pnpm build-dev && firebase deploy -P dev"
If you use the
firebase deploy command, remember to
build your project locally first! I spent 2 hours once trying to understand with my LIVE project wouldn't update after a deploy.
Congratulations, you did it!