Deploying Storybook

[00:00:00]
>> The last step with Storybook is, we wanna actually deploy this, we want everyone to be able to go to a URL and see what we built. So, the first thing we're gonna do, let's commit, let's commit all of this, this is a very big commit. But let's do Addingstorybook.

[00:00:14]
Now, we haven't actually initialized a git-repository here, so let's go and do that really quickly. Let's go to GitHub. And we're gonna create a new repository. So, my awesome design system. It's gonna be public. Don't initialize with a readme, you can, you totally can. I'm gonna not, because I want you to see, if you haven't done this before, it actually gives you the steps here.

[00:00:43]
So, the first thing that we need to do, I'm gonna split screen. The first thing that we need to do in our terminal, we can stop our dev server, I am going to write, git init, this is gonna to initialize an empty git-repository. I am then going to add the remote origin.

[00:01:03]
I'm just gonna copy this for lack of typo. So, if you don't initialize with a readme on GitHub, it will provide you with all of these links. I'm gonna copy and paste that. So I've now set my upstream. I'm now gonna push all that code, so git push upstream origin master.

[00:01:22]
So now we should have a git-repository, it should have all of our code on it, great. Let's build Storybook. And we to back to package json, if you remember I said Storybook when we ran that npx command, it already provides a build storybook command for you. So, npm run build-storybook, okay?

[00:01:44]
This is going to build all of our Storybook files into a static folder, which we can then deploy to Netlify. So it creates a Storybook static folder and it has all of our files in it. All right, so once Storybook is done building, you should see this Storybook static folder on your sidebar.

[00:02:02]
So whilst this one's building, actually let's go and log into Netlify. Netlify is an awesome tool for easily deploying sites, it allows you to add custom domains really easily, their documentation is fantastic. Their team is fantastic, so I highly recommend using it, I use it for everything. So, when you log in, you're gonna create a new site from Git, this is why we push it to our git-repository.

[00:02:25]
You can also use GitLab or Bitbucket, but we're gonna use GitHub. So, select GitHub, it's going to ask you to authenticate, I'm already authenticated. I have an absurd amount of old repository, so let's search for design system. We can see that my awesome design system is recognized, so I'm gonna click that one.

[00:02:48]
As far as these build commands, when we built Storybook, that already gave us this command, so we wanna run this specific command. We don't wanna run yarn-build, we'll run, npm run build-storybook. And our publish directory, you can see here, it published to storybook-static, so we want this to be storybook-static, okay?

[00:03:14]
All we have to do is hit Deploy, it's gonna work, hopefully, and it's gonna be really great. This should probably take about a minute and a half, two minutes. And once it deploys, you can see, this is the URL it's gonna be at, and mystifying-leakey doesn't sound super nice to me, so I'm gonna go into Domain Settings here.

[00:03:33]
Again, they make it super easy to add a custom domain. And their documentation on it is excellent. So, if we just open this while it's deploying, you can see, they have step by step instructions for how to actually change your DNS. So that's wonderful. But, I don't have a custom domain, so I am just going to click Options and edit the site name.

[00:03:53]
And I'm gonna make it called, emmas-awesome-style-guide, why not? So when it is published, this is gonna be the URL. This is actually exactly how I made the course website, was with Netlify, so it's very, very simple to use, really like it a lot. So, once this is published, it is now gonna be readily available for everyone.

[00:04:17]
And, what's really nice is, you can set up auto deploys anytime you push, it can build and redeploy, which is excellent. Since this is a static site you can also publish this on GitHub Pages, so. You don't have to use Netlify, if you wanna deploy it to GitHub Pages, you can go into your settings, and you can do it this way.

[00:04:36]
Originally I had it this way, but then I thought Netlify was a lot more seamless. So if you wanna use GitHub Pages you can select your branch, and you can select the folder that you wanna deploy. Typically they would go inside of docs. But Netlify's a lot nicer in my opinion to work with, so that's why we picked it today.

[00:04:54]
Another really cool thing that you can do with Netlify is, have auto previews for your pull requests or branches, you can integrate this with GitHub so that, if someone opens a pull request or a branch it'll auto preview it for you. It'll actually create a URL for you to use in that pull request, which is extremely nice.

[00:05:11]
And one other feature of Netlify, unfortunately, it's paid, but to be honest, it's an excellent, excellent tool, is Analytics. And so what this does is, if you're open sourcing your design system, for example, you probably wanna aggregate data about, who's accessing your style guide, where they come from.

[00:05:27]
This is gonna allow you to kind of prioritize different things. So, if the majority of your traffic is coming from, I don't know, Europe or somewhere in Asia, or somewhere else, you can kind of. For example, if you have a lot of people from Germany who are accessing your style guide, perhaps you wanna add in a language toggle to your Storybook, that could be another configuration that you add in.

[00:05:49]
Guess what? It's published. So, we can actually go view it. And it looks great. This theme is really on brand. But, yeah, your documentation is now public. You can view the docs here just like you would a traditional style guide. So, that is a great way to share documentation with your company.