Create a Storybook Sandbox (Starter project)

[00:00] To start, we wanna create a sandbox for ourselves. Now, sandboxes are typically used for error reproduction, but they're also the fastest way to initialize a project that already has a UI framework and builder set up. So let's copy this command and paste it in a terminal. We will make one change. Now typically, we want to get the latest and greatest [00:19] version, but because this course is based on Storybook 7, I wanna make sure that you are looking at the same code that I'm looking at. So we're going to npx storybook at 7 sandbox. We can scroll through all of the available sandboxes. I'm going to use React, Vite, and JavaScript for this tutorial. Well, you could [00:39] follow along in TypeScript and use a different framework. This is React specific. For the new project directory, I'll use my storybook and hit enter. Now we just need to follow the commands. We'll cd into the my storybook project directory. Run yarn install. This [00:59] may take a minute. Okay. Once that's done, we run yarn storybook to kick off a storybook server. Start storybook automatically, but you can also visit this URL that's printed right in the console every time you kick off the storybook server. And here we see the whole storybook environment that was set up for us with all of [01:19] these sample stories that we can kinda poke around and learn from without having to jump around in the docs right away. Now, where can we find these sample stories? That's a great question. Let's open our project in an editor. I'll use Versus Code which I have open right over here. Now in this storybook, we can look in the source directory, in the [01:39] stories directory, and find everything that storybook created for us by default. This includes a button component, button CSS, that config doc that you saw right at the start, and a few other components that we'll explore soon. For right now, let's just make one change to the button component, find the primary story, this named export [01:59] here, and change the text to fun times with storybook. Now back over in our storybook, we navigate to the primary story, we'll see our updated button. And that's it. With a few simple steps, you now have a storybook sandbox using React.