How to configure Publish to Chromatic

[Shawn Williams]

Hi, I am trying to publish to chromatic and have added the configs to my bitbucket pipeline but I am getting the following error...

yarn run v1.22.5

error Couldn't find a package.json file in "/opt/atlassian/pipelines/agent/build"

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My pipeline is below, I have removed the token for the purpose of posting this question.  Any advise is welcome.

  # 👇 Adds Chromatic as a step
- step:
    name: 'Publish to Chromatic'
    caches:
      - node
    script:
      - yarn install
      # 👇 Runs Chromatic
      - yarn chromatic --project-token=XXX

[willrun4cake]

I encountered this error as well trying to Publish to Chromatic from BitBucket. Reviewing the tutorial I was following it looks like I needed to perform the below steps:

1. Verify chromatic is installed for the project.

   npm install --save-dev chromatic

2. Create a Chromatic account (chromatic.com). You can use your BitBucket account.
3. In Chromatic, connect your BitBucket application/repo to your Chromatic project, e.g., select the BitBucket repo you are working on.
4. Copy the `project-token` that Chromatic generated and execute it in the terminal.

   yarn chromatic --project-token=<project-token>

5. Navigate to the resulting URL once the build passes:
   
6. You should see a message stating "Nice. You published a Storybook."
   

[Theodora Boudale]

Hi @Shawn Williams and welcome to the community!

I am not familiar with Chromatic, but based on the output you posted here the command is failing because there is no package.json file in the clone directory where the build is running.

Just to give you some context: for every step in your bitbucket-pipelines.yml file, a Docker container starts, your repo is cloned in the directory /opt/atlassian/pipelines/agent/build, then the commands of that step's script are executed, and afterwards the container gets destroyed.

If Chromatic needs a package.json file, you can create this in your repository so that it will be available during the Pipelines builds. I would suggest checking the documentation of the package to see what needs to be configured in the package.json file:

https://classic.yarnpkg.com/en/docs/cli/run
https://yarnpkg.com/package/chromatic
https://www.chromatic.com/docs/cli

Kind regards,
Theodora