TL;DR:
- removed `--configuration={args.scope}` from `storybook:static:test`
for the `storybook:static` part, as it was making `front-sb-test` jobs
in CI not reuse the cache from the `front-sb-build` job and re-build
storybook every time.
- replaced it with a new `test` configuration which optimizes storybook
build for tests and builds storybook 2x faster.
## Fix storybook:build cache usage in CI
`storybook:static:test` executes two scripts in parallel:
1. `storybook:static`, which depends on `storybook:build`
1.a. it builds storybook first with `storybook:build`, the output
directory is `storybook-static`.
1.b. then it launches an `http-server`, using what has been built in
`storybook-static`
2. `storybook:test` to execute tests (needs the storybook http-server to
be running)
When passing `--configuration=pages` or `--configuration=modules` to
`storybook:static` from step 1, those configurations are passed to the
`storybook:build` script from step 1.a as well.
But for Nx `storybook:build` and `storybook:build --configuration=pages`
(or `modules`) are not the same command, therefore one does not reuse
the cache of the other because they could output completely different
things.
As `front-sb-test` jobs are passing `--configuration={args.scope}` to
`storybook:static`, the cache of the previously executed
`storybook:build` (from `front-sb-build`) is not reused and therefore
each job re-builds Storybook with its own scope, which increases CI
time.
### Solution
- Removed scope configurations from `storybook:static` and
`storybook:build` scripts to avoid confusion.
- `storybook:test` and `storybook:dev` can keep scope configurations as
they can be useful and this doesn't impact storybook build cache in CI.
### Improve Storybook build time for testing
Added the `test` configuration to `storybook:build` and
`storybook:static` which makes Storybook build time 2x faster. It
disables addons that slow down build time and are not used in tests.
142 lines
4.6 KiB
YAML
142 lines
4.6 KiB
YAML
name: CI Front
|
|
on:
|
|
push:
|
|
branches:
|
|
- main
|
|
paths:
|
|
- 'package.json'
|
|
- 'packages/twenty-front/**'
|
|
- 'packages/twenty-ui/**'
|
|
pull_request:
|
|
paths:
|
|
- 'package.json'
|
|
- 'packages/twenty-front/**'
|
|
- 'packages/twenty-ui/**'
|
|
concurrency:
|
|
group: ${{ github.workflow }}-${{ github.ref }}
|
|
cancel-in-progress: true
|
|
|
|
jobs:
|
|
front-sb-build:
|
|
runs-on: ubuntu-latest
|
|
env:
|
|
REACT_APP_SERVER_BASE_URL: http://localhost:3000
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
|
steps:
|
|
- name: Cancel Previous Runs
|
|
uses: styfle/cancel-workflow-action@0.11.0
|
|
with:
|
|
access_token: ${{ github.token }}
|
|
- name: Fetch local actions
|
|
uses: actions/checkout@v4
|
|
- name: Install dependencies
|
|
uses: ./.github/workflows/actions/yarn-install
|
|
- name: Front / Restore Storybook Task Cache
|
|
uses: ./.github/workflows/actions/task-cache
|
|
with:
|
|
tag: scope:frontend
|
|
tasks: storybook:build
|
|
- name: Front / Write .env
|
|
run: npx nx reset:env twenty-front
|
|
- name: Front / Build storybook
|
|
run: npx nx storybook:build twenty-front --configuration=test
|
|
front-sb-test:
|
|
runs-on: ci-8-cores
|
|
needs: front-sb-build
|
|
strategy:
|
|
matrix:
|
|
storybook_scope: [pages, modules]
|
|
env:
|
|
REACT_APP_SERVER_BASE_URL: http://localhost:3000
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
|
steps:
|
|
- name: Fetch local actions
|
|
uses: actions/checkout@v4
|
|
- name: Install dependencies
|
|
uses: ./.github/workflows/actions/yarn-install
|
|
- name: Install Playwright
|
|
run: cd packages/twenty-front && npx playwright install
|
|
- name: Front / Restore Storybook Task Cache
|
|
uses: ./.github/workflows/actions/task-cache
|
|
with:
|
|
tag: scope:frontend
|
|
tasks: storybook:build
|
|
- name: Front / Write .env
|
|
run: npx nx reset:env twenty-front
|
|
- name: Run storybook tests
|
|
run: npx nx storybook:static:test twenty-front --configuration=${{ matrix.storybook_scope }}
|
|
front-sb-test-performance:
|
|
runs-on: ci-8-cores
|
|
env:
|
|
REACT_APP_SERVER_BASE_URL: http://localhost:3000
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
|
steps:
|
|
- name: Fetch local actions
|
|
uses: actions/checkout@v4
|
|
- name: Install dependencies
|
|
uses: ./.github/workflows/actions/yarn-install
|
|
- name: Install Playwright
|
|
run: cd packages/twenty-front && npx playwright install
|
|
- name: Front / Write .env
|
|
run: npx nx reset:env twenty-front
|
|
- name: Run storybook tests
|
|
run: npx nx storybook:performance:test twenty-front
|
|
front-chromatic-deployment:
|
|
if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
|
|
needs: front-sb-build
|
|
runs-on: ubuntu-latest
|
|
env:
|
|
REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
|
|
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
|
steps:
|
|
- uses: actions/checkout@v4
|
|
with:
|
|
fetch-depth: 0
|
|
- name: Install dependencies
|
|
uses: ./.github/workflows/actions/yarn-install
|
|
- name: Front / Restore Storybook Task Cache
|
|
uses: ./.github/workflows/actions/task-cache
|
|
with:
|
|
tag: scope:frontend
|
|
tasks: storybook:build
|
|
- name: Front / Write .env
|
|
run: |
|
|
cd packages/twenty-front
|
|
touch .env
|
|
echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
|
|
- name: Publish to Chromatic
|
|
run: npx nx run twenty-front:chromatic:ci
|
|
front-task:
|
|
runs-on: ubuntu-latest
|
|
env:
|
|
NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
|
|
strategy:
|
|
matrix:
|
|
task: [lint, typecheck, test]
|
|
steps:
|
|
- name: Cancel Previous Runs
|
|
uses: styfle/cancel-workflow-action@0.11.0
|
|
with:
|
|
access_token: ${{ github.token }}
|
|
- name: Fetch custom Github Actions and base branch history
|
|
uses: actions/checkout@v4
|
|
with:
|
|
fetch-depth: 0
|
|
- name: Install dependencies
|
|
uses: ./.github/workflows/actions/yarn-install
|
|
- name: Front / Restore ${{ matrix.task }} task cache
|
|
uses: ./.github/workflows/actions/task-cache
|
|
with:
|
|
tag: scope:frontend
|
|
tasks: ${{ matrix.task }}
|
|
- name: Reset .env
|
|
uses: ./.github/workflows/actions/nx-affected
|
|
with:
|
|
tag: scope:frontend
|
|
tasks: reset:env
|
|
- name: Run ${{ matrix.task }} task
|
|
uses: ./.github/workflows/actions/nx-affected
|
|
with:
|
|
tag: scope:frontend
|
|
tasks: ${{ matrix.task }} |