Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Adjust Images to latest and moves to latest node lts #615

Merged
merged 1 commit into from
Jan 9, 2025
Merged

Docs: Adjust Images to latest and moves to latest node lts #615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/content/ci/azure-pipelines.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
- checkout: self
displayName: "Get Full Git History"
fetchDepth: 0
- task: NodeTool@0
- task: UseNode@1
displayName: "Install Node.js"
inputs:
versionSpec: "20.12.2"
version: "22.12.0"
- task: Cache@2
displayName: "Install and cache dependencies"
inputs:
Expand Down Expand Up @@ -71,15 +71,15 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
jobs:
- job: Playwright
displayName: "Run Playwright"
container: mcr.microsoft.com/playwright:v1.49.0-jammy
container: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout: self
displayName: "Get Full Git History"
fetchDepth: 0
- task: NodeTool@0
- task: UseNode@1
displayName: "Install Node.js"
inputs:
versionSpec: "20.12.2"
version: "22.12.0"
- task: Cache@2
displayName: "Install and cache dependencies"
inputs:
Expand Down Expand Up @@ -112,10 +112,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
- checkout: self
displayName: "Get Full Git History"
fetchDepth: 0
- task: NodeTool@0
- task: UseNode@1
displayName: "Install Node.js"
inputs:
versionSpec: "20.12.2"
version: "22.12.0"
- task: Cache@2
displayName: "Install and cache dependencies"
inputs:
Expand Down Expand Up @@ -153,17 +153,17 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
jobs:
- job: Cypress
displayName: "Run Cypress"
container: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
container: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
variables:
npm_config_cache: $(Pipeline.Workspace)/.npm
steps:
- checkout: self
displayName: "Get Full Git History"
fetchDepth: 0
- task: NodeTool@0
- task: UseNode@1
displayName: "Install Node.js"
inputs:
versionSpec: "20.12.2"
version: "22.12.0"
- task: Cache@2
displayName: "Install and cache dependencies"
inputs:
Expand Down Expand Up @@ -198,10 +198,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
- checkout: self
displayName: "Get Full Git History"
fetchDepth: 0
- task: NodeTool@0
- task: UseNode@1
displayName: "Install Node.js"
inputs:
versionSpec: "20.12.2"
version: "22.12.0"
- task: Cache@2
displayName: "Install and cache dependencies"
inputs:
Expand Down
10 changes: 5 additions & 5 deletions src/content/ci/bitbucket-pipelines.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
<IntegrationSnippets>
<Fragment slot="storybook">
```yml title="bitbucket-pipelines.yml"
image: node:iron
image: node:jod

definitions:
caches:
Expand All @@ -44,7 +44,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
</Fragment>
<Fragment slot="playwright">
```yml title="bitbucket-pipelines.yml"
image: node:iron
image: node:jod

definitions:
caches:
Expand All @@ -57,7 +57,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
steps:
- step:
name: "Playwright"
image: mcr.microsoft.com/playwright:v1.49.0-jammy
image: mcr.microsoft.com/playwright:v1.49.0-noble
caches:
- npm
- node
Expand All @@ -81,7 +81,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
</Fragment>
<Fragment slot="cypress">
```yml title="bitbucket-pipelines.yml"
image: node:iron
image: node:jod

definitions:
caches:
Expand All @@ -96,7 +96,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
- step:
name: "Cypress"
# Configure the ELECTRON_EXTRA_LAUNCH_ARGS environment variable in your project settings to run Cypress tests with Chromatic.
image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
caches:
- npm
- node
Expand Down
30 changes: 15 additions & 15 deletions src/content/ci/circleci.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
executors:
chromatic-ui-testing:
docker:
- image: cimg/node:20.12.2
- image: cimg/node:22.12.0
working_directory: ~/repo

jobs:
Expand All @@ -35,7 +35,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-{{ checksum "package-lock.json" }}
- v1-dependencies-
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
- run: npm ci
Expand All @@ -44,7 +44,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
name: Save NPM cache
paths:
- ~/.npm
key: v1-dependencies-{{ checksum "package.json" }}
key: v1-dependencies-{{ checksum "package-lock.json" }}

workflows:
UI_Tests:
Expand All @@ -57,24 +57,24 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
version: 2.1

executors:
pw-jammy-development:
pw-noble-development:
docker:
- image: mcr.microsoft.com/playwright:v1.49.0-jammy
- image: mcr.microsoft.com/playwright:v1.49.0-noble
working_directory: ~/repo
chromatic-ui-testing:
docker:
- image: cimg/node:20.12.2
- image: cimg/node:22.12.0
working_directory: ~/repo

jobs:
Playwright:
executor: pw-jammy-development
executor: pw-noble-development
steps:
- checkout
- restore_cache:
name: Restore NPM cache
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-{{ checksum "package-lock.json" }}
- v1-dependencies-
- run:
name: "Install Playwright dependencies"
Expand All @@ -84,7 +84,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
name: Save NPM cache
paths:
- ~/.npm
key: v1-dependencies-{{ checksum "package.json" }}
key: v1-dependencies-{{ checksum "package-lock.json" }}
- run:
name: "Run Playwright tests"
command: npx playwright test
Expand All @@ -104,7 +104,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
- restore_cache:
name: Restore NPM cache
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-{{ checksum "package-lock.json" }}
- v1-dependencies-
- run: npm ci
- attach_workspace:
Expand All @@ -131,11 +131,11 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
executors:
cypress:
docker:
- image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
- image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
working_directory: ~/repo
chromatic-ui-testing:
docker:
- image: cimg/node:20.12.2
- image: cimg/node:22.12.0
working_directory: ~/repo

jobs:
Expand All @@ -146,7 +146,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
- restore_cache:
name: Restore NPM cache
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-{{ checksum "package-lock.json" }}
- v1-dependencies-
- run:
name: "Install Cypress dependencies"
Expand All @@ -157,7 +157,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
paths:
- ~/.npm
- ~/.cache
key: v1-dependencies-{{ checksum "package.json" }}
key: v1-dependencies-{{ checksum "package-lock.json" }}
- run:
name: "Run development server"
command: npm run dev
Expand All @@ -183,7 +183,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
- restore_cache:
name: Restore NPM cache
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-{{ checksum "package-lock.json" }}
- v1-dependencies-
- run: npm ci
- attach_workspace:
Expand Down
10 changes: 5 additions & 5 deletions src/content/ci/custom-ci-provider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo
<IntegrationSnippets>
<Fragment slot="storybook">
```yml title="your-workflow.yml"
image: node:iron
image: node:jod

- run:
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
Expand All @@ -34,15 +34,15 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo
</Fragment>
<Fragment slot="playwright">
```yml title="your-workflow.yml"
image: node:iron
image: node:jod

- run:
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
command: npm ci
- run:
name: "Playwright"
displayName: "Run Playwright tests"
container: mcr.microsoft.com/playwright:v1.49.0-jammy
container: mcr.microsoft.com/playwright:v1.49.0-noble
options:
artifacts:
# Chromatic automatically defaults to the test-results directory.
Expand All @@ -60,15 +60,15 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo
</Fragment>
<Fragment slot="cypress">
```yml title="your-workflow.yml"
image: node:iron
image: node:jod

- run:
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
command: npm ci
- run:
name: "Cypress"
displayName: "Run Cypress tests"
container: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
container: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
environment:
ELECTRON_EXTRA_LAUNCH_ARGS: "--remote-debugging-port=9222"
options:
Expand Down
19 changes: 9 additions & 10 deletions src/content/ci/github-actions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 20
node-version: 22.12.0
- name: Install dependencies
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
run: npm ci
Expand All @@ -56,14 +56,14 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
playwright:
runs-on: ubuntu-latest
container:
image: mcr.microsoft.com/playwright:v1.49.0-jammy
image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 20
node-version: 22.12.0
- name: Install dependencies
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
run: npm ci
Expand All @@ -89,7 +89,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 20
node-version: 22.12.0
- name: Install dependencies
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
run: npm ci
Expand Down Expand Up @@ -120,15 +120,15 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
name: Run Cypress
runs-on: ubuntu-latest
container:
image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
options: --user 1001
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 20
node-version: 22.12.0
- name: Install dependencies
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
run: npm ci
Expand Down Expand Up @@ -156,7 +156,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 20
node-version: 22.12.0
- name: Install dependencies
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
run: npm ci
Expand Down Expand Up @@ -508,7 +508,7 @@ This means the latest build on main will be an ancestor of this ephemeral branch
If you decide to use the `pull_request` event, we recommend creating a separate workflow for Chromatic using the following strategy for the checkout step:

```yml
- uses: actions/checkout@v3
- uses: actions/checkout@v4
with:
fetch-depth: 0
# 👇 Tells the checkout which commit hash to reference
Expand Down Expand Up @@ -696,13 +696,12 @@ jobs:
uses: actions/checkout@v4
with:
fetch-depth: 0

- name: ⎔ Setup node
uses: actions/setup-node@v4
with:
cache: npm
cache-dependency-path: ./package.json
node-version: 20
node-version: 22.12.0
- name: 📥 Install deps
run: npm install
- name: Build Storybook
Expand Down
Loading
Loading