Configuring environment variables in Javascript Storybook

22 Sep 2023

storybook

Environment variables are an essential part of modern software development, allowing us to configure our applications based on different deployment environments. Storybook, a tool for developing UI components in isolation, also provides a way to configure environment variables.

In this blog post, we will explore how to configure environment variables in a JavaScript Storybook project.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

Node.js
NPM

Step 1: Create a `.env` File

Create a file named .env in the root directory of your Storybook project. This file will hold the environment variables.

API_URL=https://api.example.com
API_KEY=your-api-key

Replace https://api.example.com with your actual API endpoint and your-api-key with the corresponding API key.

Step 2: Install `dotenv` Package

Next, we need to install the dotenv package to load environment variables from the .env file. Run the following command in your terminal:

npm install dotenv

Step 3: Configure Storybook Webpack

Create a file named webpack.config.js in the .storybook directory. This file will contain the webpack configuration for Storybook.

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = ({ config }) => {
  // Load environment variables from .env file
  const env = dotenv.config().parsed;
  
  // Define environment variables
  const envKeys = Object.keys(env).reduce((acc, curr) => {
    acc[`process.env.${curr}`] = JSON.stringify(env[curr]);
    return acc;
  }, {});

  // Add environment variables to webpack config
  config.plugins.push(new webpack.DefinePlugin(envKeys));

  return config;
};

Step 4: Update Storybook Configuration

Open the .storybook/main.js file and add the following lines at the top:

require('dotenv').config();

Step 5: Access Environment Variables

Now, you can access the environment variables in your Storybook stories or any JavaScript file within your project:

console.log(process.env.API_URL); // Output: https://api.example.com
console.log(process.env.API_KEY); // Output: your-api-key

Congratulations! You have successfully configured environment variables in your JavaScript Storybook project.

Conclusion

Configuring environment variables in JavaScript Storybook allows you to manage different API endpoints, authentication keys, and other configuration parameters for development, staging, and production environments. By using this setup, you can easily switch between environments without modifying your codebase.

#javascript #storybook #environment-variables