No environment variables in chromatic github action

Using the github action, I want to disable stories on a global level in .storybook/preview.js with an environment variable. It doesn’t work and, when I render a story with <pre>{JSON.stringify(process.env, null, 4)}</pre>, all I get is:

{
    "NODE_ENV": "production",
    "NODE_PATH": "",
    "STORYBOOK": "true",
    "PUBLIC_URL": "."
}

This must be filtering out environment variables somehow, considering that there is a large list of environment variables that are available in github actions.

Is there a way to not filter these out? Or at least allow me to define some environment variables I want to allow through?

[phil-r]

I think it’s not a chromatic issue, but storybook’s. Storybook only works with env variables that start with STORYBOOK_

Here is what worked for us, The part of our workflow file(we use secret, not a github action env variable, you’ll need to figure out how to rename it):

   - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}
          exitOnceUploaded: true
        env:
          STORYBOOK_API_URL: ${{ secrets.API_URL }}

and in code we can now access process.env.STORYBOOK_API_URL.

IMHO this should be better documented on chromatic’s side.

[brett-east]

Is there not a way that you can allow environment variables that come from ${{ secrets.VAR_NAME }}, like @saiichihashimoto says, trying to chain these environment variables in the code doesn’t make sense at all.

My app shouldn’t need to know anything at all about storybook, and I don’t want any storybook specific code in a component or page.

I would love to be able to specifically and intentionally pass in environment variables into my chromatic.yml file like so:

        env:
          #👇 Sets the environment variable
          SOME_VAR: 'a random string'
          SOME_OTHER_VAR: ${{ secrets.SOME_OTHER_VAR }}

I’m getting storybook errors because I can’t start some parts of the app that require keys, and it doesn’t seem to make any sense to me at all to need to include STORYBOOK_ and check for it anywhere in my code.

For what it’s worth, storybook deploys completely fine from the cli, because it is running though my webpack in the main.ts, but for some reason this isn’t working with the github action.

How can I get an environment variable that isn’t prefixed with STORYBOOK_ into my storybook build, or how can I get the github action to behave like the chromatic cli where I can make the builds work.

Or at the very least what is the expected pattern? Writing something like STORYBOOK_PAYPAL_INIT_KEY, and then using in my codebase, just so that storybook can also use it feels a lot like smelly code.

Am I missing something? Like why does the cli work and the github action doesn’t, when adding my environment variables?