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

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/

Continue Reading 📚