Global Configuration

Learn how to define the global configuration of a MakerKit application with Next.js and Firebase

We store the global configuration of a MakerKit application in /configuration.ts.

Within any application file, we can use the path ~/configuration to import it from any other file.

The configuration has the following structure:

configuration.ts
export default { site: { title: '', description: '', themeColor: '', siteUrl: '', siteName: '', twitterHandle: '', language: 'en', }, paths: { signIn: '/auth/sign-in', signUp: '/auth/sign-up', emailLinkSignIn: '/auth/link', onboarding: `/onboarding`, appHome: '/tasks', settings: { profile: '/settings/profile', authentication: '/settings/profile/authentication', email: '/settings/profile/email', password: '/settings/profile/password', }, api: { checkout: `/api/stripe/checkout`, billingPortal: `/api/stripe/portal`, }, searchIndex: `/public/search-index`, }, firebase: { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID, }, auth: { // Enable MFA. You must upgrade to GCP Identity Platform to use it. // see: https://cloud.google.com/identity-platform/docs/product-comparison enableMultiFactorAuth: true, // NB: Enable the providers below in the Firebase Console // in your production project providers: { emailPassword: true, phoneNumber: false, emailLink: false, oAuth: [GoogleAuthProvider], }, }, appCheckSiteKey: process.env.NEXT_PUBLIC_APPCHECK_KEY, theme: Themes.Light, features: { enableThemeSwitch: true, enableAccountDeletion: true, enableOrganizationDeletion: true, }, navigation: { style: NavigationStyle.TopHeader, }, environment: process.env.NEXT_PUBLIC_VERCEL_ENV ?? 'development', emulatorHost: process.env.NEXT_PUBLIC_EMULATOR_HOST, emulator: process.env.NEXT_PUBLIC_EMULATOR === 'true', production: process.env.NEXT_PUBLIC_NODE_ENV === 'production', stripe: { products: [ { name: 'Basic', description: 'Describe your basic plan', plans: [ { price: '$249/year', stripePriceId: '<STRIPE_PRICE_ID>', } ], }, { name: 'Pro', description: 'Describe your pro plan', plans: [ { price: '$249/year', stripePriceId: '<STRIPE_PRICE_ID>', } ], }, ], }, };

These values are used throughout the application instead of being hardcoded into the codebase.

As you may have noticed, some of these values are taken from Node's environment. We will use an additional file name .env, which is used by Next to read the configuration.

This file will not be committed (at least not the "secret" variable). So instead, you should define those variables within your favorite CI/CD.

Environment Variables

Makerkit provides templates for configuring your environment variables correctly and the minimum environment variables to run your local environment.

To push your project to production, you must fill these variables by creating your Firebase project and adding the required values.

Development Environment Variables

The development environment variables set your application up for the Firebase Emulators:

NEXT_PUBLIC_EMULATOR=true NEXT_PUBLIC_FIREBASE_PROJECT_ID=demo-makerkit NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=demo-makerkit.appspot.com NEXT_PUBLIC_SITE_URL=http://localhost:3000 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=localhost 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 # Change this with your project's APP ID NEXT_PUBLIC_FIREBASE_APP_ID=<MAKERKIT_DEV_APP_ID> # Change this with your project's API KEY NEXT_PUBLIC_FIREBASE_API_KEY=<MAKERKIT_DEV_API_KEY> FIRESTORE_EMULATOR_HOST=localhost:8080 FIREBASE_AUTH_EMULATOR_HOST=localhost:9099 FIREBASE_STORAGE_EMULATOR_HOST=localhost:9199 FIREBASE_PUBSUB_EMULATOR_HOST=localhost:8085 SERVICE_ACCOUNT_CLIENT_EMAIL= SERVICE_ACCOUNT_PRIVATE_KEY=

Please remember to update the NEXT_PUBLIC_FIREBASE_APP_ID and NEXT_PUBLIC_FIREBASE_API_KEY with the ones from your Firebase project ID. The only reason they're predefined is to allow you to quickly start the application.

Production Environment Variables

When you go to production, create the .env.production by copying the content of .env.production.template:

NEXT_PUBLIC_FIREBASE_API_KEY= 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= SERVICE_ACCOUNT_CLIENT_EMAIL= ## SECRET KEYS ARE BEST ADDED TO YOUR CI SERVICE_ACCOUNT_PRIVATE_KEY= SECRET_KEY= SECRET_APPCHECK_KEY= NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY= # Add these in Vercel or .env.local STRIPE_SECRET_KEY= STRIPE_WEBHOOK_SECRET= # EMAIL EMAIL_HOST= EMAIL_PORT=587 EMAIL_USER= EMAIL_PASSWORD= EMAIL_SENDER='MakerKit Team <info@makerkit.dev>'

All the secret variables should be added from your Vercel or CI console; if you need them locally, you should add them to your .env.local file, an environment file that is ignored by Git, and, therefore, suitable for storing sensitive data that is local and isolated to your machine.

When pushing your project to Vercel, the build will pick up the values added to .env.production.

Configuring the Firebase Secret Key environment variable

If you are adding the Firebase secret key as an environment variable (as you should) from your Vercel console (or other providers), you should make sure to enter the key in a valid format. But, again, this can differ between providers.

If using Vercel, add the line breaks to the pasted code. To do so, you can use the following regexp to replace \\n with \n. You should be seeing the private key with the correct line breaks (instead of \n).

Next, you can paste the secret key in the correct format into your Vercel console.

MakerKit configuration details

Let's see the configuration in detail:

Site

In this section, we define some overall details about the website. We use most of these configuration properties in public pages, blog posts, and documentation.

Title

This property is the default title of the website. We use it in conjunction with the page's name. For example, the blog's title will be Blog - { site.name }.

Description

This title is the default description of the website. For blog posts, we override it with each entry's excerpt.

Theme Color

We use the property themeColor to define the primary color browsers display. For example, in a PWA, it is the background color of the window's header.

Site URL

This siteUrl property should be your website's URL, including the protocol, such as https://yourwonderfulwebsite.com

Twitter Handle

You can use this or your company's Twitter handle to link your blog posts.

Paths

Some of the paths are repeated many times throughout the codebase. For example: where should the user be redirected to after login?

These paths help you set up the default behavior when the user signs in, out, etc.

Of course, while we could store these in the codebase, it's the quickest way to get started with the boilerplate without changing any line of code.

Firebase

The firebase object is Firebase's configuration which you can retrieve from the Firebase console. You could copy and paste it in, as it's all required.

If you use multiple environments (for example, staging and production), I recommend creating two .env files and starting your application using the correct one.

We will show later how to do set-up multiple environments effectively.

Plans

Here you can store the plans that your application offers. They should match the plans that you are going to create in the Stripe Dashboard.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS