CI/CD Storybook project to S3 static website by integrating AWS CodePipeline with GitHub

4 min readFeb 26, 2022

1. Create a GitHub repo

- git clone your repo to local
- e.g. my repo name is “storybook-codepipeline-s3-demo”

2. Set up Storybook project

use create-react-app initiate a typescript react app (I prefer typescript, so… you can do it with — template typescript)

npx create-react-app storybook-codepipeline-s3-demo --template typescript

add Storybook to your project

npx sb init

3. set up CodePipeline connection with GitHub

follow this tutorial to set up

“you will create a pipeline that connects to your GitHub repository, uses the full clone option for source data, and run a CodeBuild build that clones your repository and performs Git commands for the repository”

The outcome from this tutorial is whenever you push new changes to your branch, it will trigger CodePipeline which will trigger CodeBuild to run build commands(archive your source code), and then send the zip file to the S3 bucket.

4. Instead of just archiving your code and sending a zip file, we want it to automatically build Storybook and deploy it S3. So you can see live updates on the S3 website.

create a new S3 bucket and enable “static website hosting”
- set document to “index.html” (because later when you run build-storybook, you would get an index.html which will be the entry file)
remember you set up a service role in the CodeBuild project when you go through the tutorial, we need to update that service role to make it have access to the new bucket we just created

update the policy in that service role to make it have “s3:ListBucket” and “s3:PutObject” to your new bucket. because we will operate “aws s3 sync” command in the codebuild instance.

Your AWS configuration has been set up if you manage to get to this step. Congrats! 🥳
now there is still one npm package required in your project — “Storybook Deployer”
- which will help you auto build Storybook into a temp folder and then run “aws s3 sync”
- I would recommend you to have a look at the source code of this package, which doesn’t have much code, but helps you understand what it does.
- of course, you can write your own commands in “Buildspec”. which would handle build+deploy
install storybook-deployer in your project

npm i @storybook/storybook-deployer --save-dev

add a new npm script in package.json

"deploy-storybook": "storybook-to-aws-s3 --bucket-path=your-bucket-name/ --aws-profile=NONE"------------NOTICE-----------
"--aws-profile=NONE" is important because the instance for running CodeBuild does NOT have "default" aws profile set up.

Sorry, I think I lied about AWS config has all been setup…🤫
- you still need to update “Buildspec” in your CodeBuild project, which will run npm install and “deploy-storybook” we just defined.
- in “install section” I installed yarn, which you might not need to, I am just used to use yarn
- in “pre_build” stage, “npm install” to install npm packages
- in “build” stage, “yarn deploy-storybook” will storybook and push your build file to S3 bucket you just created

version: 0.2env:
  git-credential-helper: yes
phases:
  install:
    #If you use the Ubuntu standard image 2.0 or later, you must specify runtime-versions.
    #If you specify runtime-versions and use an image other than Ubuntu standard image 2.0, the build fails.
    runtime-versions:
      nodejs: 12
      # name: version
    #commands:
      # - command
      # - command
    commands:
      - echo node -v
      - node -v
      - echo npm -v
      - npm -v
      - echo install yarn...
      - npm install -g yarn
      - echo yarn -v
      - yarn -v
      
  pre_build:
    commands:
      - echo install packages...
      - npm install
  build:
    commands:
      # - echo build storybook...
      # - yarn build-storybook
      - echo what aws profile configured in this instance
      - echo aws configure list...
      - aws configure list
      - yarn deploy-storybook
  #post_build:
    #commands:
      # - command
      # - command
# artifacts:
  # files:
    # - storybook-static/**/*
    # - location
  #name: $(date +%Y-%m-%d)
  #discard-paths: yes
  #base-directory: location
#cache:
  #paths:
    # - paths