Setting Up Vercel Monorepo

vercel-monorepo.MD

Vercel Monorepo

Why?

1. Code sharing: xxx-web project can directly access files and variables in xxx-api project vice versa. No need for a private npm module (i.e. @onextech/ens-api) for code sharing.
2. Integrated: Only 1 git repository to check-in to. No need to split across web and api, etc.

Benefits

1. Linked dependencies (i.e. node_modules) via Yarn Workspaces
2. Aliased imports (i.e. @app/web/src/*)

Installing Vercel Monorepo

1. Ensure that you've merged up all PRs/branches in your source repositories (xxx-web, xxx-api).
2. Create a new repository without the -web or -api suffix. Copy the code web and api folders in there.
3. Go to Vercel, click on the Import Repository button
4. Paste the https://bitbucket.org/1xt/ens git repository
5. Select 1xt as the personal account
6. Import a project for every package. For the project name, set it to the package name.
7. In the Vercel > Project > Project Settings > Root Directory, ensure to set the field to the package name for example for the ens-api project, the root directory should be set to packages/api and check the checkbox. Set the project name to ens-api
8. In your repo, make a release branch. In Vercel, go to the web and api project's repository settings to set the Production branch to Project Settings > Git > Production Branch to Custom and release
9. Link your projects. In web and api packages, do vc link. Follow the example below:

➜  web git:(develop) vc link
Vercel CLI 20.1.2
? Set up “~/Sites/asd/packages/web”? [Y/n] y
? Which scope should contain your project? 1xt
? Link to existing project? [y/N] y
? What’s the name of your existing project? asd-web
✅  Linked to 1xt/asd-web (created .vercel)

10. Go to each package and set the env vars by doing vercel-env development .env; vercel-env preview .env; vercel-env production .env

At this point, you will be able to deploy the projects in a Vercel monorepo. You will also be able to access code across the FE and BE.

To learn how to better manage your new monorepo, use Lerna. See the next section about Lerna.

Installing Lerna for better monorepo management

1. npx lerna init
2. Move repos into ./ens-api to packages/api. mv ens-api packages/api. Change name in api/package.json from ens-api to api. Repeat this step for the web repo.
3. Install Yarn Workspaces for dep management. Do lerna clean to remove node_modules everyday. Add "workspaces": ["packages/*"] to root package.json
4. Done.

How to link common deps across packages?

To link common dependencies, you would conventionally run lerna bootstrap which would generate the package-lock.json files. However, we could also use yarn workspaces by adding the workspace common in the root package.json. After doing so, simply running yarn install at root will hoist the common node_modules in root and also install node_modules for the individual packages.

Why am I getting this error: Attempted import error: 'Auth' is not exported from '@aws-amplify/auth'.?

The aws-amplify packages are of different versions in the web and api. Ensure that they are using the same major version.

Why am i getting this error: Attempted import error: 'createUser' is not exported from '../graphql' (imported as 'CREATE_USER'). when running the api app?

1. Go to src/graphql and do npm install
2. Then do yarn build
3. Relaunch app

How to setup yarn workspaces

• https://classic.yarnpkg.com/en/docs/workspaces/
• https://classic.yarnpkg.com/en/docs/cli/workspace/

What is the difference between lerna run and exec?

Both run and exec will skip commands that are absent in the individual packages. Exec will allow packages installed in the root to be executed to affect the individual packages. Most of the time for booting up apps and running application scripts, you'll want to use run. Exec is mostly for cleanup/manual scripts. For more info: https://medium.com/@antonybudianto/managing-packages-with-lernajs-a15aaa786366

Why is all the material-UI component typing breaking?

Because you probably upgrade the material ui package

Why am I running into error about Attempted import error: 'uuid' does not contain a default export (imported as 'uuid'). when trying to build the API folder?

This is because the uuid package is missing. Go to api/package.json and web/package.json and do yarn add uuid. In the component, change the imports to ensure that there is no import called import uuid from 'uuid'. Instead, it should be: import uuid from 'uuid/v1'.

How to share code between FE and BE?

1. In FE src/views/Home/index.tsx, you could just do import { routes as apiRoutes } from '../../../api/src/routes' to get access to BE files.

To simplify this ../../../api/src/routes path further, we could connect them via an alias. To do so, implement the following:

1. In packages/api/package.json, rename the package's name to @app/api. Do the same for the web.
2. In packages/web/package.json, Add the package "@app/api": "0.0.1" to the dependencies. Do the same for api.
3. To fix typing errors, in packages/web/tsconfig.json, add the following. Do the same for api:

"baseUrl": ".",
  "paths": {
    "@app/api/*": [""]
  }

4. Done! At this point you can now reference the above example like this import { routes as apiRoutes } from '@app/api/src/routes'

How to run both FE and BE together from root?

1. Do yarn dev from project root. There is a script there that programs web to http://localhost:3000 and api to http://localhost:3001.