All Collections
Frontend Config
Adding frontend-config locally
Adding frontend-config locally
Updated over a week ago

To add Frontend Config to your local environment, follow the steps below:

Creating the config index file

  1. Create a new index.js file under src/lib/built-in/config.

  2. Add the code below to 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

  1. Open .storybook/main.js file.

  2. Search for the config.resolve.alias object.

  3. Add the frontend-config alias to the object: 'frontend-config': path.join(__dirname, '../src/lib/built-in/config').

  4. Final code should look like this:


// 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 = {
'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"]
Did this answer your question?