@brickblock/strong-config-browser

strong-config is a library for managing runtime-specific configuration such as:

1. Runtime environment (e.g. development / review / staging / production)
2. Sentry DSN or Logger config
3. Auth0 config
4. etc

It does 3 things:

1. Loads a yaml file into memory as an object
2. Optionally, validates the config against a json-schema
3. Exposes a React Context that can be used in child components

IMPORTANT: Do NOT store any secrets such as API secret keys in config files used in single-page applications. They WILL be available to client-side JavaScript including 3rd party scripts and browser extensions which should be avoided at all costs.

Installation

The library should be installed as a dependency:

yarn add @brickblock/strong-config-browser

Conventions

• strong-config-browser will read the config from public/config/${REACT_APP_BBK_ENV}.yml
• If a public/config/schema.yml exists, the resulting config object is validated against the schema using json-schema

Usage

REACT_APP_BBK_ENV=production yarn start

/* public/config/production.yml */

logger:
  level: INFO
  name: my-prod-logger

/* src/index.js */
import React from 'react'
import ReactDOM from 'react-dom'

import App from './app'
import { ConfigContext, loadConfig } from '@brickblock/strong-config-browser'

const render = async NextApp => {
  const config = await loadConfig()

  ReactDOM.render(
    <ConfigContext.Provider value={{ config }}>
      <NextApp />
    </ConfigContext.Provider>,
    document.getElementById('root')
  )
}

render(App)

Note the <ConfigContext.Provider> above.

This context can be used in child components in the usual ways that React.Context is used. We recommend using the useContext hook as follows:

import { ConfigContext } from '@brickblock/strong-config-browser'

const MyComponent = () => {
  const { config } = useContext(ConfigContext)
  return <span>{config.some.property}</span>
}

export default MyComponent