Before going live to production, it's crucial to set the correct environment variables for your production environment. As we've already seen before, you can organize your environment variables into three files:
.env: here, you can add variables that are shared across environments
.env.local: here go the variables that should be limited to your own machine, and it's recommended not to check this file in your VCS
.env.development: here, you can add the variables that should only be used during development
.env.production: here, you add the variables that should be used in your production environment
Typically, you would never place private data in your
.env.production file because that would cause your data to be leaked.
You should set any value that is not secret or confidential (such as the API Key of your Firebase project or the value of a feature flag) in the
Alternatively, suppose you are using variables such as the project's private key or any value that is supposed to be secret: in that case, you should ensure to inject these values from a secure environment, for example, your CI or your Vercel console.
As mentioned above, we can add variables shared across environments in the
.env configuration file. MakerKit's
.env template looks like the below:
# firebase 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_PUBLIC_SITE_URL= FIREBASE_CLIENT_EMAIL= GCLOUD_PROJECT=
To use data that is only limited to your machine, use a
.env.local configuration file. Do not check this file in your VCS: therefore, you can use it to set private variables:
.env.development configuration, we will set variables such as the Firebase Emulator's configuration that will only run when running
next dev, e.g., when we're developing the application:
NEXT_PUBLIC_EMULATOR=true FIRESTORE_EMULATOR_HOST=localhost:8080 FIREBASE_AUTH_EMULATOR_HOST=localhost:9099 FIREBASE_STORAGE_EMULATOR_HOST=localhost:9199 FIREBASE_PUBSUB_EMULATOR_HOST=localhost:8085 NEXT_PUBLIC_FIREBASE_EMULATOR_HOST=localhost NEXT_PUBLIC_FIRESTORE_EMULATOR_PORT=8080 NEXT_PUBLIC_FIREBASE_AUTH_EMULATOR_PORT=9099 NEXT_PUBLIC_FIREBASE_STORAGE_EMULATOR_PORT=9199 FEATURE_FLAG=true
.env.production configuration, we will set variables for the production application.
Careful! Do not add sensitive data here. Instead, add it from your CI or Vercel Console.