frontful-config is configuration provider for isomorphic applications, packages and Frontful infrastructure. frontful-config has two parts, configuration provider for applications (server and browser), and configuration provider for packages. Configuration is done in package.json or custom .js, .json or .yaml files.
Configuration does not get bundled with application and you can swap files after build. This results in few benefits
- Application environment agnostic build
- Configuration based on features and not application environment
- Application environment e.g. production specific secrets and credentials can be stored outside application code. Development config can by replaced by environment specific one deployment
Create property in package.json that contains configuration object or that points to configuration file. Frontful infrastructure uses convention of frontful property with sub-properties environment, config, common, babel for packages. You can create your own convention for your packages.
// package.json
{
"frontful": {
"environment": {...}, // Configuration object
"config": "./config.js" // Configuration file
}
}Frontful infrastructures package configuration objects or files will be automatically consumed by that package and exposed if at all in an interpreted form.
If you want to consume configuration objects as is or in your own package use frontful-config/provider utility, e.g.
import provider from `frontful-config/provider`
const config = provider('frontful.config')# Using yarn
yarn add frontful-config
# or npm
npm install -s frontful-configCreate your own configuration property in package.json and extract it using frontful-config/provider utility
// package.json
{
"my_config": ... // Configuration object or file
}import provider from `frontful-config/provider`
const config = provider('my_config')- Create configuration file as
.js,.jsonor.yamlfile and specify name of config file infrontful.configproperty inpackage.json.frontful.configmust contain three properties to ensure that potential secrets and credentials needed on server do not get exposed in browserbrowser- config object available in browser and on server asfrontful-config/browsercommon- config object will be merged withbrowserandserverpropertiesserver- config object available on server only asfrontful-config/server
// config.js ES5
module.exports = {
browser: {},
common: {},
server: {}
}// package.json
{
"frontful": {
"config": "./config.js"
}
}If you don't want separate file for configuration you can specify entire config object in package.json directly
// package.json
{
"frontful": {
"config": {
"browser": {},
"common": {},
"server": {}
}
}
}- Import
frontful-configinitialization script, this should be done in first entry point into server and before any other calls tofrontful-config.
Skip this step if usingfrontful-environmentas it has been done internally
import 'frontful-config'- Explicitly inject browser side configuration into
html.
frontful-config/browsergetScript()returns stringifiedscripttag with serialized content of browser side config object
import browserConfig from 'frontful-config/browser'
const html = `
<html>
<body>
...
${browserConfig.getScript()}
<!-- Other bundles that depend on configuration -->
</body>
</html>
`- Import configuration
frontful-config/browser- for code that runs on browser and server. This config contains all configuration properties frombrowserandcommonsectionsfrontful-config/server- for code that runs on server only. This config contains all configuration properties fromserverandcommonsections.
If you importfrontful-config/serverin file that gets bundled for browser you'll get an Error
import browserConfig from 'frontful-config/browser'
import serverConfig from 'frontful-config/server'