To add Frontend Config to your local environment, follow the steps below:
Creating the config index file
Create a new
index.js
file undersrc/lib/built-in/config
.Add the code below to
index.js
:
src/lib/built-in/config/index.js
export default function getShogunConfig() {
const publicRuntimeConfig = {
releaseVersion: process.env.RELEASE_VERSION || '',
storeId: process.env.SITE_ID || '',
storeName: process.env.STORE_NAME || '',
storePlatform: process.env.PLATFORM || '',
storePlatformApiType: process.env.PLATFORM_API_TYPE || '',
storePlatformDomain: process.env.PLATFORM_DOMAIN || '',
storePlatformPublicDomain: process.env.PLATFORM_PUBLIC_DOMAIN || '',
storeSharedCheckoutDomains: process.env.SHARED_CHECKOUT_DOMAINS
? process.env.SHARED_CHECKOUT_DOMAINS.split(' ')
: [],
}
const serverRuntimeConfig = {}
return { publicRuntimeConfig, serverRuntimeConfig }
}
Configuring Storybook to work with frontend-config
Open
.storybook/main.js
file.Search for the
config.resolve.alias
object.Add the
frontend-config
alias to the object:'frontend-config': path.join(__dirname, '../src/lib/built-in/config')
.Final code should look like this:
.storybook/main.js
// Code is suppressed for readability purposes
const path = require('path')
const AliasPlugin = require('enhanced-resolve/lib/AliasPlugin')
const toPath = _path => path.join(process.cwd(), _path)
module.exports = {
webpackFinal: config => {
/** Add aliases */
config.resolve.alias = {
...config.resolve.alias,
'Components/BuiltIn': path.join(__dirname, '../src/lib/built-in'),
// โ frontend-config alias
'frontend-config': path.join(__dirname, '../src/lib/built-in/config'),
'frontend-link': path.join(__dirname, '../src/lib/built-in/Link'),
'frontend-store': path.join(__dirname, '../src/lib/built-in/store/context'),
'frontend-head': path.join(__dirname, '../src/lib/built-in/head'),
'frontend-router': path.join(__dirname, '../src/lib/built-in/router'),
'frontend-lazy': path.join(__dirname, '../src/lib/built-in/lazy'),
'@emotion/core': toPath('node_modules/@emotion/react'),
'emotion-theming': toPath('node_modules/@emotion/react'),
}
return config
},
}
Starter Kit users
If your store is using Starter Kit, add the frontend-config
alias to tsconfig.json
under the paths
object:
{
"compilerOptions": {
"strict": true,
"checkJs": true,
"allowJs": true,
"module": "es2020",
"target": "es2020",
"rootDir": "./src",
"outDir": "out",
"moduleResolution": "node",
"esModuleInterop": true,
"noEmitOnError": true,
"skipLibCheck": true,
"baseUrl": "./src",
"paths": {
"Components/*": ["components/*", "sections/*"],
"frontend-config": ["lib/built-in/config"],
"frontend-link": ["lib/built-in/Link"],
"frontend-store": ["lib/built-in/store/context"],
"frontend-head": ["lib/built-in/head"],
"frontend-router": ["lib/built-in/router"],
"frontend-lazy": ["lib/built-in/lazy"]
},
"jsx": "react-native",
"types": []
},
"exclude": ["node_modules", "config", "scripts", "static"]
}