Migration to monorepo in Vercel

The monorepo is a software development strategy where code for many projects is stored in the same repository. It has some advantages like Ease of code reuse.

Vercel supports monorepo deployment function. In this article, we’ll try to migrate our single project as monolithic architecture to monorepo & microservice architecture.

Create a monolithic app

First, let’s create a project for client users. In the B2C app, I used next.js because SEO(Search Engine Optimization) and FCP(First Contentful Pain) are important.

$ npx create-next-app@latest my-project --typescript
$ cd my-project
$ yarn build && yarn start

If the app starts successfully, then let’s deploy using vercel.

1. Create a GitHub repository and push our project

2. Visit vercel(https://vercel.com/). Add a new project and import the new git repository

3. Deploy the app without any additional configuration. Vercel detects your project’s framework and sets the deploy scripts automatically

THAT IS ALL! Visit our new app in your dashboard.

We can access the same next app we ran locally.

Using vercel, you just have to create a git repository and let know it to vercel. vercel will automatically deploy our app.

Migrate to monorepo

Fortunately, our service has grown so we need a service for administrators. While maintaining vercel project, we have to migrate our repository to monorepo and create an additional admin app.

1. Create a directory apps/my-app-b2c for the b2c app. And move all content to it

We’ll use an existing project directory as monorepo’s container to maintain git history.

└── apps
      └── my-app-b2c
            ├── .next
            ├── node_modules
            ├── pages
            ├── public
            ├── styles
            ... 
            └── yarn.lock

Let’s change the project’s name to my-app-b2c.

// apps/my-app-b2c
{
  "name": "my-app-b2c"
}

2. Set up the yarn workspace

$ yarn init

After generating new file package.json, add these lines.

// package.json
{
  "private": true,
  "workspaces": ["apps/*"]
}

Each project should not publish independently. So set the "private": true.

Workspaces is setted as all projects in the apps directory. If this script runs well, the setting is done successfully.

$ yarn workspace my-app-b2c dev

3. Change the configuration on vercel

Now, the root directory of b2c app is changed, we should notify to vercel app. Visit the settings page. Set the path of b2c project.

All settings are done. If we push new commits to remote repository, vercel starts to new deploy.

Create new admin app

The b2c app migrated successfully. Now add a additional project for admin. In the admin app, it is not important to improve SEO or FCP. So we’ll build it by vite.

1. Create a new vite project in apps.

$ yarn create vite my-app-admin --template react-ts 
$ yarn workspace my-app-admin install
$ yarn workspace my-app-admin dev

2. Add a new vercel project for admin app.

It’s not diffrent from our first app, B2C. Even up to here, our two apps will be deployed successfully. But one thing is missing.

The deploy scripts are triggered by new commit on our same remote repository. Even if you work only in b2c, the admin app also starts to re-deploy. It is not efficient.

3. Set the Ignored Build Step

There is a placeholder to compare between previous code and current code using git diff. Let’s use it. Set the configuration both two projects, b2c and admin.

Then if you push a new commit that changes only one project, the other project will not triggered re-deploy.

Refs.

Monorepos - Vercel

https://classic.yarnpkg.com/lang/en/docs/workspaces/