Define the global configuration of your MakerKit SaaS application with Remix and Firebase

Learn how to define the global configuration of a MakerKit application with Remix 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:

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: `/resources/stripe/checkout`,
     billingPortal: `/resources/stripe/portal`,
   },
   searchIndex: `/public/search-index`,
 },
 firebase: {
   apiKey: process.env.FIREBASE_API_KEY,
   authDomain: process.env.FIREBASE_AUTH_DOMAIN,
   projectId: process.env.FIREBASE_PROJECT_ID,
   storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
   messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
   appId: process.env.FIREBASE_APP_ID,
   measurementId: process.env.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.APPCHECK_KEY,
 navigation: {
   style: NavigationStyle.TopHeader,
 },
 environment: process.env.VERCEL_ENV ?? 'development',
 emulatorHost: process.env.EMULATOR_HOST,
 emulator: process.env.EMULATOR === 'true',
 production: process.env.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.

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:

EMULATOR=true
GCLOUD_PROJECT=demo-makerkit
FIREBASE_PROJECT_ID=demo-makerkit
FIREBASE_STORAGE_BUCKET=demo-makerkit.appspot.com
SITE_URL=http://localhost:3000
FIREBASE_AUTH_DOMAIN=localhost
FIREBASE_EMULATOR_HOST=localhost
FIRESTORE_EMULATOR_PORT=8080
FIREBASE_AUTH_EMULATOR_PORT=9099
FIREBASE_STORAGE_EMULATOR_PORT=9199
# Change this with your project's APP ID
FIREBASE_APP_ID=<MAKERKIT_DEV_APP_ID>
# Change this with your project's API KEY
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 FIREBASE_APP_ID and 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:

FIREBASE_API_KEY=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
FIREBASE_MEASUREMENT_ID=
SITE_URL=
SERVICE_ACCOUNT_CLIENT_EMAIL=
## SECRET KEYS ARE BEST ADDED TO YOUR CI
SERVICE_ACCOUNT_PRIVATE_KEY=
SECRET_KEY=
SECRET_APPCHECK_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.

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.