Global Configuration

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',
    onboarding: `/onboarding`,
    appHome: '/dashboard',
    api: {
      checkout: `/api/stripe/checkout`,
      billingPortal: `/api/stripe/portal`,
    }
  },
  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,
  },
  navigation: {
    style: NavigationStyle.TopHeader,
  },
  email: {
    host: '',
    port: 0,
    user: '',
    password: '',
  },
  autoBanners: true,
  emulatorHost: process.env.NEXT_PUBLIC_EMULATOR_HOST,
  emulator: process.env.NEXT_PUBLIC_EMULATOR === 'true',
  production: process.env.NEXT_PUBLIC_NODE_ENV === 'production',
  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 is not to be committed (at least not the "secret" variable). You should define those variables within your favorite CI/CD.

The .env template (.env.template) is the following:

# FIREBASE PUBLIC
NEXT_PUBLIC_EMULATOR=
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_FIREBASE_EMULATOR_HOST=
NEXT_PUBLIC_FIRESTORE_EMULATOR_PORT=8080
NEXT_PUBLIC_FIREBASE_AUTH_EMULATOR_PORT=9099
NEXT_PUBLIC_FIREBASE_STORAGE_EMULATOR_PORT=9199
NEXT_PUBLIC_SITE_URL=

# FIREBASE SECRET
GCLOUD_PROJECT=
FIREBASE_CLIENT_EMAIL=
FIRESTORE_EMULATOR_HOST=localhost:8080
FIREBASE_AUTH_EMULATOR_HOST=localhost:9099
FIREBASE_STORAGE_EMULATOR_HOST=localhost:9199
FIREBASE_PUBSUB_EMULATOR_HOST=localhost:8085

FIREBASE_PRIVATE_KEY=

# STRIPE PUBLIC
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=

# STRIPE SECRET
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

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 title of the blog 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 displayed by browsers. 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

Site Name

TBD

Twitter Handle

This is your or your company's Twitter handle you can use to link your blog posts to.

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 it and paste it in, as it's all is 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.