@spine/config v0.0.40

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>