Converting Our NextJS Project to a Monorepo With Yarn Workspaces

Let’s add a Solidity development stack in our codebase

Photo by Remy_Loz on Unsplash

If you haven’t seen my last three posts setting up our project thus far, check out part one, part two, and part three.

We set up a NextJS boilerplate in part one, added Tailwind in part two, then added Web3 functionality in part three.

Up next, we will add a Solidity development stack into our project. Before we do though, let’s convert our project into a monorepo using yarn workspaces.

To utilize workspaces, let's upgrade yarn:

yarn set version berry
yarn -v

It should resolve to yarn 3.2.0 at least. You should also see a .yarn folder and a .yarnrc.yml config file.

Up next, let’s create a packages folder, and start moving our existing project into the web workspace folder.

mkdir packages && mkdir packages/web

Then go ahead and move everything from our Next project into packages/web except for the LICENSE README.md .husky .github .yarn and .yarnrc.yml

Copy your .gitignore and move one of the copies to the root. You can add /.yarn/&.yarnrc.yml

Also, delete your yarn.lock and node_modules for now.

And then rename the package.json “name” in packages/web/package.json to "name”: “web”

Now we are ready to initialize our monorepo, so run yarn init within the root directory. You can copy over most of the info from your inner package.json like version, author, repository, etc.

To let yarn recognize our workspace, add the workspace line to the root package.json. We also have to make it private, since workspaces are not meant to be published:

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

This will let yarn index any folder within packages/ as a workspace.

Then just run yarn to have it reconfigure.

Now you should be able to utilize the workspace.

Double-check by running yarn workspaces list and you should see . and packages/web

Additionally, run yarn workspace web dev to ensure the Next web app runs properly.

If everything looks good, expose our web scripts in the base package.json

"scripts": {
    "web": "yarn workspace web dev",
    "web:build": "yarn workspace web build",
    "web:start": "yarn workspace web start",
    "web:lint": "yarn workspace web lint",
    "web:test": "yarn workspace web test",
    "web:test:ci": "yarn workspace web test:ci",
    "web:cypress": "yarn workspace web cypress"
}

At this point, the local dev workflow should be about parity. All we need to do now is update a few minor things with the tooling. We already have testing and cypress working through our base package scripts, so let’s fix husky and the Github action.

Update husky with:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
cd packages/web
yarn lint-staged

We are still utilizing the pre-commit hook and the lint-staged script from the first article. It may not apply to our other workspaces, so it’s nice to have this contained. We can always add another script in the future.

The Github actions workflow is also a pretty quick change. I had attempted to see if Yarn 3 and workspaces could be used, but ended up just changing the working directory. If you want, you can use Yarn 2 with a third party action: https://github.com/Borales/actions-yarn but since we are using Yarn 3 and we can easily just change directories I opted to step around it.

Here’s the updated Github action file:

...
jobs:
  test:
    name: Setup
    runs-on: ubuntu-latest
    timeout-minutes: 5
    defaults:
      run:
        working-directory: ./packages/web
    steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v2-beta
          with:
            node-version: '16.8.0'
            check-latest: true
        
        - name: Install Npm Dependencies
          run: yarn install
        - name: Build App
          run: yarn build
        - name: Run tests with jest
          run: yarn test:ci
        - name: Cypress.io
          uses: cypress-io/github-action@v2
          with:
            working-directory: ./packages/web
            start: yarn start
            wait-on: 'http://localhost:3000'

Finally, all we need to do is edit the Vercel config’s Root Directory in Project Settings to package/web and we should have our project successfully deploy.

As an optional note, you can edit the next.config.js to allow Next to use code from outside the web workspace (which we will utilize in the next post) by adding this:

const nextConfig = {
  ...
  experimental: { 
    externalDir: true,
  }
}

Thanks for reading. You can check out the repo here.