Going to Production
Setting up Firebase
It's time to set up Firebase. You should be all set if you have already installed NodeJS on your machine. If not, please install NodeJS before continuing.
If any of the following commands do not work, please install the Firebase tools package globally:
npm i firebase-tools -g
Now, run this command to set up your Firebase project:
Now, select all the products you would like to set up. If you're not sure yet, I recommend the following ones:
- Cloud Firestore
- Cloud Storage
- Remote Config
If you have already created a project using the Firebase Console, continue by using "Use an existing project"; otherwise, you can create one right away by selecting "Create a new project".
If you're more comfortable creating a new project using the Firebase Console, create a new project from here.
The CLI should prompt you to choose the emulators to download and the ports for each. Next, select the emulators you need based on the products selected during the first step.
Remember to update your environment variables in the file
.env if you choose any non-default option.
Otherwise, you don't need to make any changes because this starter already uses the Firebase default ports.
Once completed, you should have the following new files in your project:
If you have created a Firebase project, you should be able to access this project using the Firebase Console.
We assume you're building a web app: let's create a new web project.
After the previous step, you should be seeing the Firebase configuration object.
We need to add this to your
.env file, which will automatically
populate the project configuration file
NEXT_PUBLIC_FIREBASE_API_KEY= NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN= NEXT_PUBLIC_FIREBASE_PROJECT_ID= NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET= NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID= NEXT_PUBLIC_FIREBASE_APP_ID= NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
Next.js bundles the environment variables prefixed with "NEXT_PUBLIC" with your client-side code. It means that you should use these for non-secret values that need to be exposed.
You can find the service account by clicking on
You should copy the text highlighted in the video below:
Afterward, you need to populate the relative environment variable:
You could safely add it using the file of your staging account. If it's your production environment, please add it using the Vercel console instead (or any other service you use to deploy the project).
The private key is fundamental to running your app with Admin permissions on the server-side. From the same page, click on "Generate Private key".
You should see the modal below:
Once you open the generated JSON file, copy the
private_key property and place it in your CI or your environment file as long as you do not commit the environment file.
The environment variable to populate is
Do not commit the file if you add the private key to your local environment file
Now it's time to set up Firestore DB. From the main panel on the left-hand side of the Firebase Console, click on
Once you click on the
Create Database CTA, you will se a modal like in the
Don't overthink what to choose: we use the default MakerKit Firestore rules which use the production configuration by default.
The next step is to choose the Firestore Database's location.
Which option to choose here depends entirely on where you think most of your users come from.
Be careful to the Firebase notice:
After you've set this location, you cannot change it later. Also, this location setting will be the location for your default Cloud Storage bucket.
If you're not sure, think it through. You do not need this step to start working on your app with the Emulators, so feel free to come back to this later when you have made a decision.
App Check is a Firebase service that helps you to protect your web app from bots.