Storybook & Atomic Design - 1.16. - Deploying Storybook to Netlify

by Jack Pritchard

Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!

GitHub - whatjackhasmade/storybook-atomic-design-react

Contribute to whatjackhasmade/storybook-atomic-design-react development by creating an account on GitHub.

So far our Storybook project has been confined to those with access to the project files, in this lesson we cover how to deploy Storybook to Netlify for free.

Netlify is an amazing hosting platform, focused on static projects they provide CD (Continuous Deployment) for our project, allowing us to focus on writing code and leaving them to handle hosting and deploying our project.

Setting up a Build Script

#

Before we can deploy our Storybook project to Netlify, we first need to provide a method of statically generating our project files.

Fortunately Storybook gives us a CLI command which automatically generates the files we need. To use the command, we need to add the following configuration to our package.json file -

"scripts": {
  "build-storybook": "build-storybook"
}

Now when we run 

npm run build-storybook'in the root directory of our project, we get an exported folder named
storybook-static'with our project available as HTML files.

You can go ahead and throw this folder into any hosting platform and it should work as expected.

Setting up Netlify

#

Now that we have our build command ready, we can configure Netlify.

If you haven't got an account, sign up over at - https://app.netlify.com/signup

I've signed up and logged in with my GitHub account.

Then I've select deploy a new site with our project repository and the following build settings -

If everything goes well you should be able to deploy and follow along with the build log.

Boom!

Our project is now live for the world to view - https://storybook-atomic-design.netlify.com/