Skip to main content

Yarn workspaces for building multiple GatsbyJS sites

Published on Thursday 5, December 2019

Yesterday I made an attempt to use a single GatsbyJS instance to create multiple build outputs. 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. 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

Workspaces allow you to develop multiple packages 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.

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

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

{
  "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.

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

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!