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

Creating the config index file

Create a new index.js file under src/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"]
}