├── projects ├── app │ ├── .browserslistrc │ ├── .gitignore │ ├── babel.config.js │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ └── App.vue │ └── package.json ├── lib │ ├── .browserslistrc │ ├── .gitignore │ ├── babel.config.js │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── components │ │ │ ├── index.js │ │ │ ├── AwesomeButton.vue │ │ │ └── HelloWorld.vue │ │ └── App.vue │ └── package.json └── server │ ├── index.js │ └── package.json ├── cleanup.sh ├── package.json ├── .gitignore └── README.md /projects/app/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /projects/lib/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /projects/app/.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | 3 | # local env files 4 | .env.local 5 | .env.*.local -------------------------------------------------------------------------------- /projects/lib/.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | 3 | # local env files 4 | .env.local 5 | .env.*.local 6 | 7 | -------------------------------------------------------------------------------- /projects/app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /projects/lib/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /projects/app/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/lib/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /projects/app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doppelmutzi/monorepo-playground/HEAD/projects/app/public/favicon.ico -------------------------------------------------------------------------------- /projects/app/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doppelmutzi/monorepo-playground/HEAD/projects/app/src/assets/logo.png -------------------------------------------------------------------------------- /projects/lib/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doppelmutzi/monorepo-playground/HEAD/projects/lib/public/favicon.ico -------------------------------------------------------------------------------- /projects/lib/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doppelmutzi/monorepo-playground/HEAD/projects/lib/src/assets/logo.png -------------------------------------------------------------------------------- /cleanup.sh: -------------------------------------------------------------------------------- 1 | find . -type f -name 'yarn.lock' -exec rm {} + 2 | find . -type f -name 'package-lock.json' -exec rm {} + 3 | find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 4 | -------------------------------------------------------------------------------- /projects/app/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /projects/lib/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /projects/server/index.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | app.get("/", function(req, res) { 4 | res.send("Hello World!"); 5 | }); 6 | app.listen(3000, function() { 7 | console.log("Example app listening on port 3000!"); 8 | }); 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "yarn-lerna", 3 | "version": "0.1.0", 4 | "description": "Awesome mono repo", 5 | "author": "Sebastian Weber", 6 | "license": "MIT", 7 | "private": true, 8 | "scripts": { 9 | "cleanup": "./cleanup.sh" 10 | } 11 | } -------------------------------------------------------------------------------- /projects/lib/src/components/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import AwesomeButton from "./AwesomeButton.vue"; 3 | 4 | const Components = { 5 | AwesomeButton 6 | }; 7 | 8 | Object.keys(Components).forEach(name => { 9 | Vue.component(name, Components[name]); 10 | }); 11 | 12 | export default Components; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # Log files 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | *.sw* 17 | 18 | # For this showcase helpful to ignore 19 | yarn.lock 20 | package-lock.json -------------------------------------------------------------------------------- /projects/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "Sebastian Weber", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "node index.js" 9 | }, 10 | "dependencies": { 11 | "express": "^4.16.3" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/lib/src/components/AwesomeButton.vue: -------------------------------------------------------------------------------- 1 | 4 | 12 | 13 | 19 | 20 | -------------------------------------------------------------------------------- /projects/app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doppelmutzi/awesome-app", 3 | "license": "MIT", 4 | "author": "Sebastian Weber", 5 | "version": "0.1.0", 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.17", 12 | "@doppelmutzi/awesome-components": "../lib" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.0.3", 16 | "@vue/cli-service": "^3.0.3", 17 | "vue-template-compiler": "^2.5.17" 18 | } 19 | } -------------------------------------------------------------------------------- /projects/app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | app 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /projects/lib/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | common 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /projects/app/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /projects/lib/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | 32 | -------------------------------------------------------------------------------- /projects/lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@doppelmutzi/awesome-components", 3 | "license": "MIT", 4 | "author": "Sebastian Weber", 5 | "version": "0.1.0", 6 | "main": "./dist/awesome.common.js", 7 | "files": [ 8 | "dist/*", 9 | "src/*", 10 | "public/*", 11 | "*.json", 12 | "*.js" 13 | ], 14 | "scripts": { 15 | "serve": "vue-cli-service serve", 16 | "build": "vue-cli-service build", 17 | "build:lib": "vue-cli-service build --target lib --name awesome ./src/components/index.js" 18 | }, 19 | "dependencies": { 20 | "vue": "^2.5.17" 21 | }, 22 | "devDependencies": { 23 | "@vue/cli-plugin-babel": "^3.0.3", 24 | "@vue/cli-service": "^3.0.3", 25 | "vue-template-compiler": "^2.5.17" 26 | } 27 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Showcase of Different Mono Repo Approaches 2 | 3 | Companion project to my [blog post](https://doppelmutzi.github.io/monorepo-lerna-yarn-workspaces/) on mono-repo approaches with different package managers. 4 | 5 | This is only a showcase. Do not expect an awesome app. The focus is on showing different mono repo approaches and which steps are required. 6 | 7 | _Switch branches to see different approaches_ 8 | You can clean the mono repo with the following command to start from a clean workspace: 9 | 10 | ```bash 11 | $ yarn cleanup 12 | ``` 13 | 14 | ## Approach 1 – Do it yourself 15 | 16 | All 3 projects are located at _projects_ folder. The following steps are required to run the app: 17 | 18 | 1. Install dependencies of lib project. Build lib. 19 | 20 | ```bash 21 | $ cd projects/lib 22 | $ yarn 23 | $ yarn build:lib 24 | ``` 25 | 26 | 2. Install dependencies of app project. Run app. 27 | 28 | ```bash 29 | $ cd projects/app 30 | $ yarn 31 | $ yarn serve 32 | ``` 33 | 34 | 3. Install dependencies and run server. 35 | 36 | ```bash 37 | $ cd projects/server 38 | $ yarn 39 | $ yarn start 40 | ``` 41 | -------------------------------------------------------------------------------- /projects/lib/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | --------------------------------------------------------------------------------