Project Configuration

Learn how to set up up your project's configuration

Makerkit can be configured from a single place: the src/configuration.ts object. This file exports a constant we use throughout the project to read our application's settings.

We retrieve some of this file's configuration using environment variables: these help us swap and tweak our settings based on which environment we're using, such as the Firebase configuration.

For example, in your Vercel console, you could run multiple projects:

  • one for production
  • and one for staging

Here is what the configuration file looks like:

const configuration = { site: { name: 'Awesomely - Your SaaS Title', description: 'Your SaaS Description', themeColor: '#ffffff', themeColorDark: '#0a0a0a', siteUrl: process.env.NEXT_PUBLIC_SITE_URL as string, siteName: 'Awesomely', twitterHandle: '', githubHandle: '', language: 'en', convertKitFormId: '', }, 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: enableMultiFactorAuth: false, // NB: Enable the providers below in the Firebase Console // in your production project providers: { emailPassword: true, phoneNumber: false, emailLink: false, oAuth: [GoogleAuthProvider], }, }, emulatorHost: process.env.NEXT_PUBLIC_EMULATOR_HOST, emulator: process.env.NEXT_PUBLIC_EMULATOR === 'true', production: process.env.NODE_ENV === 'production', paths: { signIn: '/auth/sign-in', signUp: '/auth/sign-up', emailLinkSignIn: '/auth/link', onboarding: `/onboarding`, appHome: '/dashboard', 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`, }, navigation: { style: LayoutStyle.Sidebar, }, appCheckSiteKey: process.env.NEXT_PUBLIC_APPCHECK_KEY, email: { host: '', port: 0, user: '', password: '', senderAddress: '', }, sentry: { dsn: process.env.SENTRY_DSN, }, stripe: { plans: [ { name: 'Basic', description: 'Description of your Basic plan', price: '$249/year', stripePriceId: 'basic-plan', features: [ 'Feature 1', 'Feature 2', 'common:plans.features.feature1' ], }, ], } };

Feel free to extend this configuration to your needs. For example, you could new properties to the site object to store your social media handles, or add new properties to the paths object to store the paths to your pages.

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