Creating a Monorepo with Vue & Laravel by Lerna & Yarn Workspaces

This is the GitHub reposiroty: https://github.com/hungthai1401/universal-monorepo-template

Getting Started

Lerna

First, let’s create a new project and set up Lerna.

mkdir monorepo
cd monorepo
npx lerna init

This creates a package.json file for your project.

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^3.22.1"
  }
}

Add scripts to root package.json

{
  "name": "root",
  "private": true,
  "scripts": {
    "bootstrap": "lerna bootstrap --use-workspaces",
    "start": "lerna run start --parallel",
    "build": "lerna run build --parallel"
  },
  "devDependencies": {
    "lerna": "^3.22.1"
  }
}

You’ll notice a lerna.json file has also been created, as well as a packages folder which will contain our libraries.

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "npmClient": "yarn",
  "useWorkspaces": true
}

We’ll also need to modify our package.json to define where the Yarn workspaces are located.

{
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "lerna": "^3.22.1"
  }
}

Vue

Installing Vue CLI globally

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Next we have to create a frontend layer in packages directory

cd packages
vue create frontend

Follow steps till become successful, we will go to frontend directory

cd frontend

and modify package.json

{
  "name": "@mono/frontend",
  ...
  "scripts": {
    ...
    "start": "yarn serve"
  },
  ...
}

Laravel

Installing Laravel by issuing the Composer

cd ..
composer create-project --prefer-dist laravel/laravel backend

After successfully, we will go to backend directory

cd backend

and modify package.json

{
  "name": "@mono/backend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "php artisan serve"
  }
}

Go to root repository

cd ../..

and install and link all dependencies.

yarn bootstrap

Start all packages

yarn start

Refs:

• Lerna: The Monorepo manager
• Vue CLI: The full system for rapid Vue.js development
• Vue: The frontend layer
• Laravel: The backend layer