Set up Yarn Workspaces for Gatsby Theme Development

Share this video with your friends

Send Tweet

Learn how to structure folders and configure Yarn workspaces to make the development of Gatsby themes easy.

In this lesson, we'll create two workspaces: gatsby-theme-events and site.

We will see how each workspace can be run separately as well as one depending on the other. In this case, gatsby-theme-events will be a dependency in our site project

For a written version of this course, check out the Gatsby docs.

LANDR Dev
LANDR Dev
~ 5 years ago

In order for me to add the local gatsby-theme-xxx dependency to my site workspace, I needed to manually add the dependency to the dependencies object in my site/package.json file. Otherwise I got the following error:

zsh: no matches found: gatsby-theme-xxx@*
Chuck
Chuck
~ 5 years ago

In order for me to add the local gatsby-theme-xxx dependency to my site workspace, I needed to manually add the dependency to the dependencies object in my site/package.json file.

I am having the same issue. I can't seem to get by the local dependency. 

UPDATE
This is what works for me:
`yarn workspace site add gatsby react react-dom`

Manually edit `site/package.json` adding dependencies:
`"gatsby-theme-xxx": "1.0.0",`

Then install:
`yarn workspace site add gatsby-theme-xxx@1.0.0`
Jason Lengstorf
Jason Lengstorf(instructor)
~ 5 years ago

@LANDR and @Chuck, I looked into this and it appears that zsh doesn't allow the * to be unquoted, so it would need to be:

yarn workspace site add "gatsby-theme-xxx@*"
Chuck
Chuck
~ 5 years ago

Thanks Jason I did hear you refer to that on the Twitch this afternoon. I experimented and it appears zsh supports variations of this as well. For instance: gatsby-theme-xxx"@*"

Tony Brown
Tony Brown
~ 5 years ago

Great, I use zsh Glad I read the comments before I started the course

Jude Lee
Jude Lee
~ 5 years ago

Hi Jason, apologies for my out of scope question, but what font are you using in your editor? :o

Jason Lengstorf
Jason Lengstorf(instructor)
~ 5 years ago

Hi! I use Operator Mono. More details about my setup/gear: jason.af/uses

Jude Lee
Jude Lee
~ 5 years ago

Awesome, thanks! :)

Pala
Pala
~ 4 years ago

@LANDR and @Chuck, I looked into this and it appears that zsh doesn't allow the * to be unquoted, so it would need to be:

yarn workspace site add "gatsby-theme-xxx@*"

Hey Jason! Thanks for the tutorial. Is there any chance you have a link to any documentation on the "@*"? Just have never seen it before and can't seem to find it in the npm/yarn docs :)

Jason Lengstorf
Jason Lengstorf(instructor)
~ 4 years ago

@Pala as far as I can tell, the * in the CLI is a special character that gets handled differently between Mac and Windows. The quotes explicitly escape it, which avoids the Windows issue. I don't know of any docs; this is one of those "I know because I hit this error and someone told me how to fix it" things.

Samuel Suther
Samuel Suther
~ 4 years ago

Can you give a suggestion how to setup this with a theme in /packages? I ask, because I've did it like you suggest... directly in the root directory of the project. Now that I scope my theme, I didn't get the workspace to run anymore. It seems yarn has some issues with scoped packages. The suggestion I've found was to put it into /packages and then put only this in the main gatsby-config.js:

{
  "private": true,
  "workspaces": ["packages/*"]
}

Any suggestion is very welcome!

Jason Lengstorf
Jason Lengstorf(instructor)
~ 4 years ago

@samuel if you want to see an example of a monorepo with a site and a theme in it, my Learn With Jason site is set up that way: https://github.com/jlengstorf/learnwithjason.dev — I'd recommend using that as a reference to get set up

good luck!

Samuel Suther
Samuel Suther
~ 4 years ago

I got it now. Thanks.