[ ← blog / 24for2019 ](/) Dec 05, 2019  ·  \#24for2019  ·  2 min read 

# Yarn workspaces for building multiple GatsbyJS sites



Yesterday I made an attempt to use a single GatsbyJS instance to [create multiple build outputs](https://glamanate.com/blog/supporting-multiple-build-outputs-one-gatsbyjs-setup). That didn't work out so well. I also realized I was trying to fit a square peg through a round hole. Why fight how GatsbyJS works? I went back and read the GatsbyJS [theme tutorial](https://www.gatsbyjs.org/tutorial/building-a-theme/). Themes allow you to share functionality that build a GatsbyJS site - from components to page creation - acros multiple sites. That *exactly* what I am trying to do. In the tutorial you also use Yarn workspaces to setup your theme package and a site. So why not setup multiple site workspaces?

     ![VS Code screenshot of GatsbyJS workspaces](/sites/default/files/styles/large/public/2019-12/Screen%20Shot%202019-12-05%20at%209.15.40%20PM.png?itok=zOFgGegY) 

 

Workspaces [allow you to develop multiple packages](https://yarnpkg.com/lang/en/docs/workspaces/) in one way that only requires a single ***yarn install*** and shared dependencies. Which is amazing. Because my biggest disk eater is ***node\_modules*** folders littered across my computer.

> Your dependencies can be linked together, which means that your workspaces can depend on one another while always using the most up-to-date code available.

Yay! This is great. Because themes are almost like "mini" GatsbyJS sites.

Here is what my root ***package.json*** contains. I have followed the GatsbyJS theme tutorial pretty much verbatim, except I made multiple "site" packages.

```json
{
    "private": true,
    "workspaces": [
        "gatsby-theme-centarro-commerce",
        "storefront-us",
        "storefront-uk",
        "storefront-de"
    ]
}

```

Each of the storefront packages has the same ***package.json*** information.

```json
{
  "private": true,
  "name": "storefront-us",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "gatsby": "^2.18.7",
    "gatsby-theme-centarro-commerce": "*",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

```

They all have the script ***build***, ***develop***, and ***clean***. We can use the yarn workspaces command to execute a command across all of our workspaces! That means we can build each storefront at once.

```bash
yarn workspaces run build
```

Unfortunately, there doesn't seem to be a way to skip a specific workspace (we don't need to build the theme.) But, that's pretty neat!

     ![workspace gatsbyjs build](/sites/default/files/styles/large/public/2019-12/Screen%20Shot%202019-12-05%20at%209.32.02%20PM.png?itok=PX3bBaZr) 

 

This allows running a docker-compose set up with the Gatsby Docker onbuild image as well.

The next blog will include getting things up and running. Each site can import and use a shared config file, and more!

 

  ![](/themes/custom/mglaman/images/headshot.webp)Thanks for reading

I write about Drupal, PHP, and the quiet infrastructure behind large sites — caching, config, and testing. New posts land every week or two.

 [Subscribe via RSS →](/rss.xml) [About me →](/about-me) 

 



 

  [← Older

Supporting multiple build outputs from one GatsbyJS setup 

 ](/blog/supporting-multiple-build-outputs-one-gatsbyjs-setup) [Newer →

Beginning the build of a GatsbyJS theme

 ](/blog/beginning-build-gatsbyjs-theme)