• Documentation
  • /
  • Next.js Firebase
  • /
  • Global Configuration

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.

You do not need any changes to start developing your application. Feel free to complete the configuration once you want to deploy the app for the first time.

The configuration has the following structure:

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,
  navigation: {
    style: NavigationStyle.TopHeader,
  },
  email: {
    host: '',
    port: 0,
    user: '',
    password: '',
  },
  emailEtherealTestAccount: {
    email: process.env.ETHEREAL_EMAIL,
    password: process.env.ETHEREAL_PASSWORD,
  },
  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: {
    plans: [
      {
        name: 'Basic',
        description: 'Describe your basic plan',
        price: '$249/year',
        stripePriceId: '<STRIPE_PRICE_ID>',
      },
      {
        name: 'Pro',
        description: 'Describe your pro plan',
        price: '$999/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.

When you first run your project build, ensure to fill the required environment variables using the ".env.production" environment file.

Development Environment Variables

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

NEXT_PUBLIC_EMULATOR=true

GCLOUD_PROJECT=demo-makerkit
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

FIREBASE_CLIENT_EMAIL=
FIREBASE_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=

FIREBASE_CLIENT_EMAIL=

## SECRET KEYS ARE BEST ADDED TO YOUR CI
FIREBASE_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=

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.

Email

This setting allows you to define your email provider's SMTP authentication details to send emails in your application.

While in development, you can leave this as-is: MakerKit uses the nodemailer test account.

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.


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor