Spine Config Utility

A configuration utility valid for both client and server

Key aspects

• Exports config safely on browser
• Typed config structure
• Namespaces

How to use it

1. Create a config directory in your project's root path

2. Create config/clientConfigFilter.ts and define which config should be safely exported to client

   import { ConfigSource } from '.';
   
   export const clientConfigFilter: ConfigSource['clientConfigFilter'] = {
    htmlPage: {
      welcomeMessage: true,
    },
   }

3. Create your config/index.ts to be imported in both client and server

   import {
    createConfig,
    ClientConfigFilter,
   } from '@spine/config';
   
   export interface MyProjectConfigSource {
    clientConfigFilter: ClientConfigFilter<this>;
    port: number;
    host: string;
    htmlPage: {
      welcomeMessage: string;
    };
   }
   
   export interface ConfigSource extends MyProjectConfigSource {}
   export const config = createConfig<ConfigSource>('MyProject', '__CONFIG__');
   export default config;
   
   const isBrowser = typeof window !== 'undefined';
   
   if (isBrowser) {
    config.hydrate();
   } else {
    require('./load');
   }

4. Create config/load.ts and load your config

   import * as envVars from '@spine/config/envVars';
   import { config } from '.';
   import { clientConfigFilter } from './clientConfigFilter';
   
   config.load({
    clientConfigFilter,
    port: envVars.number('PORT', 1337),
    host: envVars.number('HOST', '0.0.0.0'),
    htmlPage: {
      welcomeMessage: 'Welcome',
    },
   });

5. Start using your config inside your project

   import config from '../config';
   console.log(config.htmlPage.welcomeMessage);
   console.log(config('htmlPage.welcomeMessage'));

Export config from your server to your client

  import { renderClientConfig } from '@spine/config/server';
  import { config } from './config';
  console.log(renderClientConfig(config, config.clientConfigFilter, 'your nonce here'));

outputs

  <script nonce="your nonce here">
  window.__CONFIG__={
      htmlPage: {
        welcomeMessage: "Hello World"
      },
  }
  </script>