Logo

dev-resources.site

for different kinds of informations.

How to stop Storybook opening a new webpage on start (automatically with zsh)

Published at
5/21/2024
Categories
zsh
webdev
storybook
yarn
Author
timreach
Categories
4 categories in total
zsh
open
webdev
open
storybook
open
yarn
open
Author
8 person written this
timreach
open
How to stop Storybook opening a new webpage on start (automatically with zsh)

This started as a tip for Storybook users but it is probably useful for anyone who uses zsh -

Do you find it annoying that whenever you run $ yarn storybook, Storybook takes the liberty of opening itself in a brand new tab? No fun if you're just restarting it because hot reload isn't working or something.

You may or may not know that there is an option to prevent this from happening: $ yarn storybook --ci will start Storybook but not open a tab. Hoorah.

But even knowing this, I often forget and become annoyed for literally microseconds as I close the superfluous tab. Sure, I could just suck up the minor inconvenience, meditate more, drink less caffeine, get some perspective. Or, I could just automate a fix.

I don't want to impose my preference upon the whole team so I don't want to just add the flag to the scripts definition in package.json so instead let's just configure the terminal to add the flag in automatically.

Simply add the following to your ~/.zshrc

function yarn() {
  if [[ "$1" == "storybook" ]]; then
    command yarn storybook --ci "${@:2}"
  else
    command yarn "$@"
  fi
}
Enter fullscreen mode Exit fullscreen mode

P.S. don't forget to restart your terminal before testing it works...

This basically does a check any time yarn is run and if you're executing storybook will automatically add the flag. I'm sure you can imagine other uses of this pattern for similar issues where you want edit the default way a script executes on your machine but not your team's.

storybook Article's
30 articles in total
Favicon
Integrate Storybook with VueJS
Favicon
Run Storybook with NX Expo and React Native Paper
Favicon
Storybook for UI Components: Build, Test, and Document Your React Components in Isolation
Favicon
Integrating Storybook into an existing next.js project
Favicon
How to customize storybook (custom theme and layout option)?
Favicon
How to add custom fonts and viewports in storybook?
Favicon
Made AI-Powered Interactive Storybook Generator with Next.js, Gemini and Elevenlabs ️‍🔥
Favicon
Storybook: The Workshop for Modern Frontends
Favicon
SanS-UI v0.0.1 Quick Start!
Favicon
SanS-UI Released v0.0.1
Favicon
Using Storybook with Angular and Vite 🎨
Favicon
Documentation of components in React with TypeScript using Storybook
Favicon
Documentação de componentes em React com Typescript usando Storybook
Favicon
Tutorial de utilização Storybook
Favicon
Component Driven Development with Storybook React Native
Favicon
Storybook: Stories for Smart Components
Favicon
Tutorial de instalação do Storybook com Tailwind
Favicon
📚 How to Handle Multiple MSW Handlers in Storybook Stories
Favicon
Beginner Guide to React Storybook
Favicon
Comparing Vue Component Documentation tools
Favicon
How to stop Storybook opening a new webpage on start (automatically with zsh)
Favicon
Manual setup for a minimal Storybook
Favicon
Setup Your Universal App with React Native, Expo Router, Tamagui, and Storybook
Favicon
Configuring Storybook in Your Nuxt Project
Favicon
Documentando seus componentes no Storybook
Favicon
Build component library using Storybook
Favicon
Integrating Storybook with PrimeNG and TailwindCSS in an Nx Workspace
Favicon
Storybook setup: Virtual Screen Reader with Web Components
Favicon
Simple setup: Virtual Screen Reader in Storybook
Favicon
Using fonts in Storybook for Next.JS and Tailwind Projects

Featured ones: