Monorepo support

[ghengeveld]

By @isaac-martin in https://github.com/chromaui/action/issues/30:

Would love an option on this action to run the job inside a certain directory.

defaults:
  run:
    working-directory: web

We have a mono repo with the below dir structure

cms
web
 .storybook

Github actions need to live in the root - so currently we cant use this action and have to manually run chromatic using the script in our package.json
I can implement this change if someone can point me in the right direction.

---

By wendylw in https://github.com/chromaui/action/issues/61:

# This is a basic workflow to help you get started with Actions

name: Chromatic

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: master

defaults:
  run:
    working-directory: frontend

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  test:
    env:
      EXTEND_ESLINT: true
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0 # Required to retrieve git history
      - run: |
          EXTEND_ESLINT=true yarn && yarn build-storybook
      - uses: chromaui/action@v1
        with:
         token: ${{ secrets.GITHUB_TOKEN }}
         projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
         storybookBuildDir: ./storybook-static

Error: The "path" argument must be one of type string, Buffer, or URL. Received type object
Error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be one of type string, Buffer, or URL. Received type object
    at readFile (fs.js:295:10)
    at go$readFile (/home/runner/work/_actions/chromaui/action/v1/node_modules/graceful-fs/graceful-fs.js:118:14)
    at readFile (/home/runner/work/_actions/chromaui/action/v1/node_modules/graceful-fs/graceful-fs.js:115:12)
    at /home/runner/work/_actions/chromaui/action/v1/node_modules/universalify/index.js:8:12
    at new Promise (<anonymous>)
    at readFile (/home/runner/work/_actions/chromaui/action/v1/node_modules/universalify/index.js:7:14)
    at Object._readFile (/home/runner/work/_actions/chromaui/action/v1/node_modules/jsonfile/index.js:19:58)
    at Object._readFile [as readFile] (/home/runner/work/_actions/chromaui/action/v1/node_modules/universalify/index.js:20:45)
    at runChromatic (/home/runner/work/_actions/chromaui/action/v1/lib/main.js:66:42)
    at async Promise.all (index 0)
Error: The "path" argument must be one of type string, Buffer, or URL. Received type object

---

Also requested by another customer.

┆Issue is synchronized with this Asana task by Unito

[yigityuce]

Hi there,

This feature would be very helpful to me right now. Is there any due date or plan to add this feature to the github action?

[patcon]

I'm interested in this too. Haven't tried it yet, but in the interim, can just checkout the repo into a subdir, and then copy your own path out of that into the GITHUB_WORKSPACE itself :)

# .github/workflows/chromatic.yml

# name of our action
name: 'Chromatic'
# the event that will trigger the action
on: push

# what the action will do
jobs:
  test:
    # the operating system it will run on
    runs-on: ubuntu-latest
    # the list of steps that the action will go through
    steps:
      - uses: actions/checkout@v2 # Note the v2, not v1 from chromatic docs
        with:
          path: monorepo
      # Copy all files (including hidden dotfiles)
      - run: |
          shopt -s dotglob
          cp -r monorepo/mysubdir/* .
      - run: yarn
      - uses: chromaui/action@v1
        # options required to the GitHub chromatic action
        with:
          projectToken: project-token
          token: ${{ secrets.GITHUB_TOKEN }}

EDIT: shoot. doesn't work:

EDIT2: Ok, this change is a bit kludgey, but seems to work fine:

      # Move all react files to root (including hidden dotfiles)
      - run: |
          shopt -s dotglob
          git mv react-ui/* ./ -fk

[yigityuce]

Actually I implemented this on forked repo within the feature branch but to be honest I couldn't have spare time to follow contribution guidelines and open a PR after doing those and probably I won't have time to do that in near future.

Anyone can do these steps is more than welcome 😄

Here you can find the changes I did. Btw it works as expected.

next...yigityuce:feature/action-input-workingdir

[patcon]

You could've just disappeared back into the night, so thanks for share back :) if someone else cares enough, they'll pick up where you left off. Thanks for carrying it partway!

[marsen]

I really need this enhancement.

And I must thank @yigityuce

Its work for me too, and help me a lot

I fork your repo and merge the feature/action-input-workingdir branch to next

And set .github/workflow/chromatic.yml just like below in my repo

# .github/workflows/chromatic.yml
# name of our action
name: 'Chromatic Deployment'
# the event that will trigger the action
on: push

# what the action will do
jobs:
  test:
    # the operating system it will run on
    runs-on: ubuntu-latest
    # the list of steps that the action will go through
    steps:
      - uses: actions/checkout@v2
      - run: cd src/marsen.react && yarn && yarn build && yarn build-storybook
      - uses: marsen/chromatic-cli@v1
        with:
          workingDir: ./src/marsen.react
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

I wish this will be the real feature in the next version,
but I don't know where has the contribution guidelines to follow

[QuinnNgo]

Looks like the fix for this has been implemented: #212. Adding a workingDIr argument to my action worked for me:

      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Chromatic GitHub Action options
        with:
          workingDir: frontend
          token: ${{ secrets.GITHUB_TOKEN }}
          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Only request to the team is to add this to the github action's docs!

[marsen]

I changed my only one line

      - uses: chromaui/action@v1

it did not work for me,
following is my error message

Run chromaui/action@v1
  with:
    workingDir: ./src/marsen.react
    projectToken: ***
    token: ***
    storybookBuildDir: storybook-static

Chromatic CLI v5.5.0
https://www.chromatic.com/docs/cli

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '*******db2t'
Retrieving git information
    → ✖ Found only one commit
This typically means you've checked out a shallow copy of the Git repository, which some CI systems do by default.
In order for Chromatic to correctly determine baseline commits, we need access to the full Git history graph.
In {bold GitHub Actions}, you can enable this by setting \`fetch-depth: 0\`.
ℹ Read more at https://www.chromatic.com/docs/ci#github-actions

✖ Failed to retrieve git information
✖ Found only one commit
This typically means you've checked out a shallow copy of the Git repository, which some CI systems do by default.
In order for Chromatic to correctly determine baseline commits, we need access to the full Git history graph.
In {bold GitHub Actions}, you can enable this by setting \`fetch-depth: 0\`.
ℹ Read more at https://www.chromatic.com/docs/ci#github-actions
→ View the full stacktrace below

If you need help, please chat with us at https://www.chromatic.com/docs/cli for the fastest response.
You can also email the team at support@chromatic.com if chat is not an option.

Please provide us with the above CLI output and the following info:
{
  "timestamp": "2021-01-13T09:54:05.702Z",
  "sessionId": "3f459ce4-5024-4fee-92a6-bfc1e5089a32",
  "nodePlatform": "linux",
  "nodeVersion": "12.13.1",
  "packageName": "chromatic",
  "packageVersion": "5.5.0",
  "flags": {
    "projectToken": "***",
    "workingDir": "./src/marsen.react",
    "storybookBuildDir": "storybook-static",
    "fromCI": true,
    "interactive": false,
    "exitZeroOnChanges": true,
    "exitOnceUploaded": false,
    "allowConsoleErrors": false
  },
  "errorType": "Error",
  "errorMessage": "✖ Failed to retrieve git information"
}

Error: ✖ Failed to retrieve git information
✖ Found only one commit
This typically means you've checked out a shallow copy of the Git repository, which some CI systems do by default.
In order for Chromatic to correctly determine baseline commits, we need access to the full Git history graph.
In {bold GitHub Actions}, you can enable this by setting \`fetch-depth: 0\`.
ℹ Read more at https://www.chromatic.com/docs/ci#github-actions
    at getCommitAndBranch (/home/runner/work/_actions/chromaui/action/v1/bin/git/getCommitAndBranch.js:41:11)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async setGitInfo (/home/runner/work/_actions/chromaui/action/v1/bin/tasks/gitInfo.js:24:13)
    at async Task.task (/home/runner/work/_actions/chromaui/action/v1/bin/lib/tasks.js:13:7)
Error: non-zero exit code

[dwnste]

Looks like the fix for this has been implemented: #212. Adding a workingDIr argument to my action worked for me:

      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Chromatic GitHub Action options
        with:
          workingDir: frontend
          token: ${{ secrets.GITHUB_TOKEN }}
          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Only request to the team is to add this to the github action's docs!

It didn't work for me though. Still had to explicitly set working directory as well as "workingDir" param, otherwise it fails on "Collecting Storybook metadata" step.

[AngelAlvarado]

I think this is not clear for the documentation but if your package.json lives in the monorepo or a subdirectory then you'll need something like: working-directory: frontend so the libraries get installed correctly

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    steps:
      - uses: actions/checkout@v1
      - name: Install dependencies
        run: yarn
        # 👇 Runs yarn in ./frontend
        working-directory: frontend
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          # 👇 Runs Chromatic CLI in ./frontend
          workingDir: frontend
          token: ${{ secrets.GITHUB_TOKEN }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

[flo-sch]

I had issues in a monrepo using yarn v1 workspaces that working-directory did not solve: I had a hoisted dependency (rimraf) hoisted in the root package.json, but invoked as an npm script before building storybook:

# ./package.json (root)
{
  "scripts": {
    "build:storybook": "yarn workspace @my-scope/storybook run build"
  },
  "devDependencies": {
    "rimraf": "^3.0.2"
  }
}

Storybook project in subfolder (located under packages/storybook)

# ./packages/storybook/package.json (extract)
{
  "name": "@my-scope/storybook",
  "scripts": {
    "build": "build-storybook -c .storybook",
    "prebuild": "rimraf ./storybook-static/*"
  },
  "dependencies": {
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/react": "^6.3.6",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@storybook/builder-webpack5": "^6.3.6",
    "@storybook/manager-webpack5": "^6.3.6",
    "chromatic": "^5.9.0",
    "webpack": "^5"
  }
}

Running the following GitHub Action workflow failed:

# .github/workflows/chromatic.yml
jobs:
  # Deploy Chromatic
  chromatic:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: packages/storybook
    steps:
      # [...] checkout git history, setup node, cache etc.
      # Install dependencies
      - name: Install
        run: yarn install --frozen-lockfile
        working-directory: packages/storybook
      # Chromatic deployment
      - uses: chromaui/action@v1
        with:
          buildScriptName: build # script defined in packages/storybook/package.json
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}
          workingDir: packages/storybook

The "prebuild" script fails, I guess because chromaui/action uses npm to build storybook, which is unaware of hoisted dependencies in my case?

Command failed with exit code 1: npm run --silent build -- --output-dir /tmp/chromatic--XXXX

ℹ Storybook build output:
/home/runner/[...]/packages/storybook/build-storybook.log

sh: 1: rimraf: not found
→ Command failed: npm run --silent build -- --output-dir /tmp/chromatic--XXXX

I solved that by building storybook with yarn before invoking the action with storybookBuildDir:

# .github/workflows/chromatic.yml
jobs:
  # Deploy Chromatic
  chromatic:
    runs-on: ubuntu-latest
    steps:
      # [...] checkout git history, setup node, cache etc.
      # Install dependencies
      - name: Install
        run: yarn install --frozen-lockfile
      # Build Storybook
      - name: Build Storybook
        run: yarn run build:storybook # script defined in root ./package.json
      # Chromatic deployment
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: storybook-static # or align that to whichever name you use if you set it with "build-storybook -o XXX"
          token: ${{ secrets.GITHUB_TOKEN }}
          workingDir: packages/storybook

[rasben]

I know this is an old issue, but personally it took a lot of trial and error before I got this working for me

I'll put my learnings here - maybe it'll help someone else :)

I have a Drupal (CMS), with a theme folder where I had my package.json and .storybook (among other things)
It lived in web/themes/custom/MYTHEME

I quickly found out that I had to move package.json out in the root of the git, or Chromatic would never work. Sigh.

In my package.json I could however do this:

  "config": {
    "themepath": "web/themes/custom/THEMENAME"
  },
  "scripts": {
    "build-storybook": "build-storybook --config-dir $npm_package_config_themepath/.storybook"
  }

So far so good!

Now for the Github Action:

.github/workflows/chromatic.yml

name: 'Chromatic Deployment'
# the event that will trigger the action
on: push

jobs:
  # Deploy Chromatic
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 0 # 👈 Required to retrieve git history

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - run: npm install
      - run: npm run build
      - run: npm run build-storybook
      # Chromatic deployment
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: storybook-static
          token: ${{ secrets.GITHUB_TOKEN }}
          workingDir: ./

Thank you all for your examples :) I would never have figured this out without this thread.