Skip to content

Commit

Permalink
docs: Added an available options docs page
Browse files Browse the repository at this point in the history
  • Loading branch information
patricklafrance committed Apr 11, 2024
1 parent 9064656 commit 32a279e
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 2 deletions.
43 changes: 43 additions & 0 deletions docs/available-options.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
icon: gear
---

# Available options

Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the `@workleap/chromatic-ado` script. If an option is not accepted, the script will output an error message.

In addition to Chromatic CLI options, a few environment variables are accepted.

## CHROMATIC_DEBUG

Add the `CHROMATIC_DEBUG` environment variable to your `chromatic.yml` pipeline to start a Chromatic build in "debug" mode and to benefit from additional logs from the `@workleap/chromatic-ado` script:

```yaml !#8 chromatic.yml
- task: CmdLine@2
displayName: Chromatic
inputs:
script: pnpm dlx @workleap/chromatic-ado
env:
CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
CHROMATIC_DEBUG: true
```
## CHROMATIC_DISABLE_TURBOSNAP
Add the `CHROMATIC_DISABLE_TURBOSNAP` environment variable to your `chromatic.yml` pipeline to start a Chromatic build without [TurboSnap](https://www.chromatic.com/docs/turbosnap/):

```yaml !#8 chromatic.yml
- task: CmdLine@2
displayName: Chromatic
inputs:
script: pnpm dlx @workleap/chromatic-ado
env:
CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
CHROMATIC_DISABLE_TURBOSNAP: true
```

!!!info
Note that we strongly encourage using TurboSnap as Chromatic snapshots are not cheap.
!!!
16 changes: 14 additions & 2 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
order: 100
icon: rocket
expanded: true
---

# Getting started
Expand Down Expand Up @@ -102,6 +102,10 @@ steps:
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
```
!!!info
Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the `@workleap/chromatic-ado` script. If an option is not accepted, the script will output an error message.
!!!

2.2. If your project doesn't include a template file to set up your pipelines, paste the following configuration:

```yaml #19,54,56-57 chromatic.yml
Expand Down Expand Up @@ -164,6 +168,10 @@ steps:
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
```

!!!info
Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the `@workleap/chromatic-ado` script. If an option is not accepted, the script will output an error message.
!!!

3. Create a new [Azure pipeline from an existing YAML file](https://www.nathannellans.com/post/azure-devops-yaml-pipelines-part-1). Name this new pipeline "Chromatic" or choose a name that best suits your project.

4. Add the newly created Chromatic pipeline as a **required** [build validation](https://learn.microsoft.com/en-us/azure/devops/repos/git/branch-policies?view=azure-devops&tabs=browser#build-validation) for your `main` branch. Ensure that the build validation is **required**. This is crucial as any visual changes detected by Chromatic will automatically be accepted on the main branch.
Expand Down Expand Up @@ -223,7 +231,7 @@ If you encounter issues with the Chromatic pipeline, follow these steps:

- Ensure that the `PULL_REQUEST_COMMENT_ACCESS_TOKEN` pipeline variable value is a valid, non-expired token.

- If issues persist, consider disabling [TurboSnap](https://www.chromatic.com/docs/turbosnap/) by adding the `CHROMATIC_DISABLE_TURBOSNAP` environment variable the `chromatic.yml`. However, note that TurboSnap should be re-enabled promptly as Chromatic snapshots are not cheap:
- If issues persist, consider disabling [TurboSnap](https://www.chromatic.com/docs/turbosnap/) by adding the `CHROMATIC_DISABLE_TURBOSNAP` environment variable the `chromatic.yml`:

```yaml !#8 chromatic.yml
- task: CmdLine@2
Expand All @@ -236,6 +244,10 @@ If you encounter issues with the Chromatic pipeline, follow these steps:
CHROMATIC_DISABLE_TURBOSNAP: true
```

!!!info
Note that TurboSnap should be re-enabled promptly as Chromatic snapshots are not cheap.
!!!




0 comments on commit 32a279e

Please sign in to comment.