Define the global configuration of your MakerKit SaaS application with Next.js and Supabase Lite

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

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:

app/configuration.ts

export default {
 site: {
   name: '',
   description: '',
   themeColor: '#ffffff',
   themeColorDark: '#0a0a0a',
   siteUrl: process.env.NEXT_PUBLIC_SITE_URL,
   siteName: '',
   twitterHandle: '',
   githubHandle: '',
   language: 'en',
   convertKitFormId: '',
   locale: process.env.NEXT_PUBLIC_DEFAULT_LOCALE,
 },
 paths: {
   signIn: '/auth/sign-in',
   signUp: '/auth/sign-up',
   emailLinkSignIn: '/auth/link',
   appHome: '/tasks',
   settings: {
     profile: '/settings/profile',
     authentication: '/settings/profile/authentication',
     email: '/settings/profile/email',
     password: '/settings/profile/password',
   },
 },
 auth: {
   requireEmailConfirmation:
     process.env.NEXT_PUBLIC_REQUIRE_EMAIL_CONFIRMATION === 'true',
   // NB: Enable the providers below in the Supabase Console
   // in your production project
   providers: {
     emailPassword: true,
     phoneNumber: false,
     emailLink: false,
     oAuth: ['google'],
   },
 },
 email: {
   host: '',
   port: 0,
   user: '',
   password: '',
 },
 environment: process.env.NEXT_PUBLIC_ENVIRONMENT,
 production: process.env.NODE_ENV === 'production',
 features: {
   enableThemeSwitcher: true,
 },
 theme: Themes.Light,
 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.

export default { site: { name: '', description: '', themeColor: '#ffffff', themeColorDark: '#0a0a0a', siteUrl: process.env.NEXT_PUBLIC_SITE_URL, siteName: '', twitterHandle: '', githubHandle: '', language: 'en', convertKitFormId: '', locale: process.env.NEXT_PUBLIC_DEFAULT_LOCALE, }, paths: { signIn: '/auth/sign-in', signUp: '/auth/sign-up', emailLinkSignIn: '/auth/link', appHome: '/tasks', settings: { profile: '/settings/profile', authentication: '/settings/profile/authentication', email: '/settings/profile/email', password: '/settings/profile/password', }, }, auth: { requireEmailConfirmation: process.env.NEXT_PUBLIC_REQUIRE_EMAIL_CONFIRMATION === 'true', // NB: Enable the providers below in the Supabase Console // in your production project providers: { emailPassword: true, phoneNumber: false, emailLink: false, oAuth: ['google'], }, }, email: { host: '', port: 0, user: '', password: '', }, environment: process.env.NEXT_PUBLIC_ENVIRONMENT, production: process.env.NODE_ENV === 'production', features: { enableThemeSwitcher: true, }, theme: Themes.Light, 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>', } ], }, ], }, };