Monorepo Setup for Javascript, Typescript and React (1/4)

Executive brief

Tooling

Goals

Sections

Example “ekzemplo” App Use Case

Architecture

ekzemplo
services/
ekzemplo-web/
ekzemplo-admin/
ekzemplo-apievents/
ekzemplo-apiusers/
packages/
ekzemplo-common/
ekzemplo-components/

1) Setup a Monorepo for Javascript backend service

Goals

Setup the repository

mkdir ekzemplo
cd ekzemplo
yarn init -yp
echo "node_modules" > .gitignore
{
"name": "ekzemplo",
"version": "0.0.0",
"license": "MIT",
"private": true,
"workspaces": [
"packages/*"
]
}
yarn add lerna microbundle --dev -W
yarn lerna init --independent
{
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true
}

Create the shared libary

mkdir -p packages/ekzemplo-common/src
cd packages/ekzemplo-common
yarn init -y
{
"name": "ekzemplo-common",
"version": "0.0.0",
"source": "/src/index.js",
"main": "dist/index.cjs",
"module": "dist/index.module.mjs",
"unpkg": "dist/index.umd.js",
"type":"module",
"license": "MIT",
"scripts": {
"start": "microbundle watch",
"build": "microbundle build"
}
}
yarn add faker
import faker from 'faker'export const event = ()=>{
return {
id: faker.random.uuid(),
name: faker.lorem.words(4),
date: faker.date.future(),
}
}
export const user = ()=>{
return {
id: faker.random.uuid(),
username: faker.internet.userName(),
password: 'pw',
}
}
export * from './appfakes'
yarn build

create microservice events

mkdir -p services/ekzemplo-apievents/src
cd services/ekzemplo-apievents
yarn init -y
yarn add express ekzemplo-common -W
const express = require('express')
const appfaker = require('ekzemplo-common')
const app = express()
const port = 3010
const apiPath = '/events'
app.get(apiPath, (req, res) => {
let events = [];
for (let index = 0; index < 10; index++) {
const Event = appfaker.event()
events.push(Event);
}
res.send(JSON.stringify(events))
})
app.listen(port, () => {
console.log(`microsoervice events listening at http://localhost:${port}${apiPath}`)
})
{
"name": "ekzemplo-apievents",
"version": "1.0.0",
"main": "./src/server.js",
"license": "MIT",
"dependencies": {
"ekzemplo-common": "^0.0.1",
"express": "^4.17.1"
},
"scripts":{
"start":"node src/server.js"
}
}
yarn start
[
{
"id": "aa4f1908-7805-41a3-a110-2440126eff60",
"name": "doloremque natus eius beatae",
"date": "2021-12-04T04:45:13.312Z"
},
{
"id": "f3fc0b0e-b448-4a28-92fa-fc539973d501",
"name": "nihil omnis tenetur qui",
"date": "2021-05-28T07:39:17.802Z"
}
]

create microservice users (ES6 module)

mkdir -p services/ekzemplo-apieusers/src
cd services/ekzemplo-apieusers
yarn init -y
yarn add express ekzemplo-common -W
import express from 'express'
import {user} from 'ekzemplo-common'
const app = express()
const port = 3011
const apiPath= '/users'
app.get(apiPath, (req, res) => {
let users = [];
for (let index = 0; index < 10; index++) {
const User = user()
users.push(User);

}
res.send(JSON.stringify(users))
})
app.listen(port, () => {
console.log(`microsoervice users listening at http://localhost:${port}${apiPath}`)
})
{
"name": "ekzemplo-apiusers",
"version": "1.0.0",
"main": "./src/server.js",
"type":"module",
"license": "MIT",
"dependencies": {
"ekzemplo-common": "^0.0.1",
"express": "^4.17.1"
},
"scripts":{
"start":"node src/server.js"
}
}
yarn start
[
{
"id": "fc6af2ae-6457-4de6-8573-0e86ab609a15",
"username": "Laurianne.Mertz37",
"password": "pw"
},
{
"id": "f331f161-27f0-4f53-aa46-b828573ac88b",
"username": "Yasmeen.Frami88",
"password": "pw"
}
]

Run all Services with one command

{
"name": "ekzemplo",
"version": "0.0.0",
"license": "MIT",
"main": "index.js",
"author": "Andreas Heissenberger <andreas@heissenberger.at>",
"private": true,
"workspaces": [
"packages/*"
],
"devDependencies": {
"lerna": "^3.22.1",
"microbundle": "https://github.com/aheissenberger/microbundle.git"
},
"scripts": {
"start": "lerna run start --parallel"
}
}

Fast-track professional successful in the design, development and deployment of technology strategies and policy. Experienced leading Internet and IS operations

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store