Angular Storybooks - changing environment dynamically

[agnislav]

Issue details

Angular CLI based app. Components' logic and styling can be changed based on a variable specified in the environment files.

Is it possible to use the existing functionality to view/build storybook for each environment file? If no, what should be added to the codebase to support it?

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/angular 3.4.0-alpha.8

[igor-dv]

We are trying to support as much as possible from angular cli. Can you please share some more details on the environment file? Maybe some working example so we can test it and think of a support/patch/workaround.

[agnislav]

Hi @igor-dv ,

Please check the following project: https://github.com/agnislav/env4storybook

Styling differs for different environments. The same approach is used for component configuration in our solution, so the same component can look and behave different (e.g. regexp, labels, colors, fonts etc).

[igor-dv]

As I see, the implementation of the "environments" is kinda deep inside of anguar-cli webpack configuration:

1. https://github.com/angular/angular-cli/blob/9bc9000a59c8b94fc890d843e220d2d0165534cb/packages/%40angular/cli/models/webpack-configs/typescript.ts#L74
2. https://github.com/angular/angular-cli/blob/9bc9000a59c8b94fc890d843e220d2d0165534cb/packages/%40ngtools/webpack/src/plugin.ts#L245

We can try to work around this with the module replacement or aliasing.

1. Create a full control mode webpack configuration in .storybook .
2. Add module replacement plugin that will replace environments/environment with the env you need.
3. Maybe you can even add a NODE_ENV variable for the environments customization via the CLI.

All these are just assumptions. so fix me if I am talking nonsense =)

[agnislav]

Hi @igor-dv , ways 1 and 2 are possible. AFAIK, way 3 will not work (at least it didn't work before). The only point is that those cases will work for the whole build. It's good and will be helpful, however it would be great if we can change or mock an environment per story. To your mind, is it possible?

[igor-dv]

I'm not sure what do you mean by environment per story, can you please elaborate? How would you like to configure it? Also, why doesn't 3 work for you?

[agnislav]

Would be great to set env per story, i.e.:

storiesOf('Notification', module)
  .add('Default view for Site 1', () => ({
    template: '<notification title="Notification"></ow-notification>',
    moduleMetadata: {
      declarations: [ NotificationComponent ],
      environment: 'site1',
    },
  }))
  .add('Default view for Site 2', () => ({
    template: '<notification title="Notification"></ow-notification>',
    moduleMetadata: {
      declarations: [ NotificationComponent ],
      environment: 'site2',
    },
  }))

Regarding # 3 - NODE_ENV is set by angular cli itself based on the environment file used.

[igor-dv]

I think this configuration is less possible, since the "storiesOf" runs in a run time, while the "environments" kick in build time.

Regarding the 3#, maybe you can use cross-env and set some custom argument, and then read it in the extended webpack.config

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[chucknelson]

For anyone that might hit this when trying to use a different environment.ts file when running storybook, option #2 discussed above seems to work fine. For example:

/.storybook/main.js

const webpack = require("webpack");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  core: {
    builder: "webpack5",
  },
  // Customize Storybook's webpack config
  // See https://storybook.js.org/docs/angular/configure/webpack
  webpackFinal: async (config, { configType }) => {
    config.plugins.push(
      /**
       * Storybook doesn't seem to use "fileReplacements" in angular.json.
       * This accomplishes the same result for the environment imports in the app.
       */
      new webpack.NormalModuleReplacementPlugin(
        /src[\\\/]environments[\\\/]environment.ts/,
        "./environment.my-other-env.ts"
      )
    );
    return config;
  },
};