add the option to only add and build storybook in development

[tcoopman]

see discussion here: https://elixirforum.com/t/phoenix-storybook-a-storybook-like-ui-interface-for-phoenix-components/48890/52?u=tcoopman

For me the reason is that I want to use storybook for a project that is not open source and doesn't share it's components. Here storybook is still a great way of showing all the possible components and creating a great style guide.

[cblavier]

Hey Thomas, 6 months later, here I am! 🤪 Do you think these two setting tweaks would be enough?

1. In router.ex, mount the storybook only in dev.

   if Application.compile_env!(:my_app, :env) == :dev do
   live_storybook "/dev/storybook", [...]
   end

2. In the application's storybook.ex file, set the story compilation_mode to :lazy, so that stories are only compiled when used (ie. never in production)

WDYT?

[tcoopman]

I'll try to have a look at it sooner than in 6 months 😂

The router trick I'm already using but the lazy compiling looks useful. I'll try it out!

[cblavier]

ok, I just set myself a reminder to come back here by April 10, 2024

[neilberkman]

Just a 👍 for this (timely since your reminder date is in 5 days). Storybook compilation adds about 1 minute to all of our CI runs, and as this is just wasted time and expense we'd love to have a way to avoid this. Thanks.

[crova]

To echo on @neilberkman 's comment, we tried the suggested steps and compilation_mode: :lazy helps in cutting the number of compiled assets. However, as the doc states, we still compile .index.exs, ideally we wouldn't.

In our case, we partition test, so for instance, we're compiling this file 4 times for each PR.

I think we want to be able to not start the compiler in some environments?

[cblavier]

The people has spoken! I'll have a look next week ;-)

[Gladear]

Hi ! I had the same problem (not because my project isn't open-source, but because I didn't want to use resources in my prod env with the storybook) and I think I figured out a solution 😄

• hide the routes behind any kind of dev flag. I used :dev_routes, the one generated by Phoenix for LiveDashboard and Swoosh mailbox, but if Mix.env() == :dev do does the trick too 😄 This ensures the route is only available in dev and the app's Storybook module won't be called.
• add runtime: Mix.env() == :dev to the dependency in mix.exs. This removes :phoenix_storybook from applications started at startup in non-dev environment, ensuring it doesn't take any runtime resource.

  {:phoenix_storybook, "~> 0.6.3", runtime: Mix.env() == :dev},

• add compilation_mode: :lazy to the Storybook module - not necessary, but avoids non-necessary compilation of files.

If I'm not mistaken, this solution removes both compile-time and runtime costs, and requires very little code changes. I'm open to feedback, if anyone sees a flaw or drawback I didn't notice. If you need more details, this was implemented in this PR: https://github.com/anacounts/app/pull/221

[cblavier]

Thanks a lot, @Gladear! If it does the trick for other folks involved, I'll close the issue.

[crova]

Just to chime in from our perspective, we ended up using a macro to avoid compiling any storybook related code in non-dev env. As I understood the great suggestion by @Gladear , it reduces the compile/runtime penalty to almost zero, but there is still some cost (e.g.: .index.exs will always be compiled).

As we see it, the ideal solution would come from the library itself. But we totally respect the decision of the maintainer on this subject if @cblavier decides to keep things as they are.

[cblavier]

@crova I agree that the library should provide a way to disable itself in some env. I have no time right now: would you mind opening a PR?