- Code sharing:
xxx-web
project can directly access files and variables inxxx-api
project vice versa. No need for a private npm module (i.e.@onextech/ens-api
) for code sharing. - Integrated: Only 1 git repository to check-in to. No need to split across
web
andapi
, etc.
- Linked dependencies (i.e. node_modules) via Yarn Workspaces
- Aliased imports (i.e. @app/web/src/*)
- Ensure that you've merged up all PRs/branches in your source repositories (xxx-web, xxx-api).
- Create a new repository without the
-web
or-api
suffix. Copy the code web and api folders in there. - Go to Vercel, click on the
Import Repository
button - Paste the
https://bitbucket.org/1xt/ens
git repository - Select
1xt
as the personal account - Import a project for every package. For the project name, set it to the package name.
- 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 topackages/api
and check the checkbox. Set the project name toens-api
- In your repo, make a
release
branch. In Vercel, go to theweb
andapi
project's repository settings to set the Production branch toProject Settings > Git > Production Branch
toCustom
andrelease
- 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)
- 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.
- npx lerna init
- Move repos into ./ens-api to packages/api.
mv ens-api packages/api
. Changename
inapi/package.json
fromens-api
toapi
. Repeat this step for the web repo. - Install Yarn Workspaces for dep management. Do
lerna clean
to remove node_modules everyday. Add"workspaces": ["packages/*"]
to rootpackage.json
- Done.
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?
- Go to
src/graphql
and donpm install
- Then do
yarn build
- Relaunch app
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
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'
.
- In FE
src/views/Home/index.tsx
, you could just doimport { 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:
- In
packages/api/package.json
, rename the package's name to@app/api
. Do the same for the web. - In
packages/web/package.json
, Add the package"@app/api": "0.0.1"
to thedependencies
. Do the same forapi
. - To fix typing errors, in
packages/web/tsconfig.json
, add the following. Do the same forapi
:
"baseUrl": ".",
"paths": {
"@app/api/*": [""]
}
- Done! At this point you can now reference the above example like this
import { routes as apiRoutes } from '@app/api/src/routes'
- Do
yarn dev
from project root. There is a script there that programs web tohttp://localhost:3000
and api tohttp://localhost:3001
.