This is a how-to article (and a very straight-to-the-point one). It is so straight forward that it is almost only a checklist. But if you do the spells correctly, some magic will happen.
If you want to see the pros and cons for setting up a monorepo architecture, using TypeScript or even how live reload makes you more productive as a developer, you're not going to get it here. I plan writing about that (and other explanations about things I did here) later, so...
Follow me and you'll get a notification when I post it 😅!
In this post I show how to set up:
- A monorepo project using Yarn Workspaces;
- An Node.js server using Express and Typescript with live reload;
- A React app with Typescript;
- A sexy
package.json
to start everything using a single command in the root folder.
Ready? Let's go!
Prerequisites
- You must have Node.js installed in your machine. You can do that via package manager or just download the best installer for your SO.
- You must have Yarn installed. Install here.
Monorepo
- Create a folder for your project, with the name you want for the repository.
- Open the terminal on that folder and run
yarn init -y
. - Open the recently created
package.json
file and add"private": true,
and"workspaces": { "packages": ["packages/*"]}
to it. It will be somewhat like this:
{
"name": "MySexyProject",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"workspaces": {
"packages": [
"packages/*"
]
}
}
- Create a folder
packages
. You will put all projects of this repository inside that folder.
Server
- Create a folder called
server
inside of the folderpackages
. Your folder structure will be something like this:
📂- root
└📂- packages
| └📂- server (👋🏻 I'm here!)
└📝- package.json
└📝- yarn.lock
- Open the terminal in
server
folder and run:yarn init -y
yarn add typescript -D
yarn tsc --init
yarn add express
yarn add @types/express -D
yarn add ts-node -D
yarn add ts-node-dev -D
- Create the folder and the TypeScript file which will be the starting point of your server application. In this example, it will be
packages/server/src/server.ts
.
import express from "express";
const app = express();
app.get('/',(req, res)=>{
res.json({"message":"Hello World!"});
});
app.listen(3333);
- On
packages/server/package.json
, add this script:
"scripts": {
"dev": "ts-node-dev src/server.ts"
},
- Now, open a terminal on this folder and run
yarn dev
. - 🎉 🎉 🎉 🎉 🎉
Web
- Go to the root of your monorepo and open the terminal there.
- Run
yarn create react-app packages\web --template=typescript
and wait this never-ending script to finish. - Done.
🧙🏻♂️Running everything with one command
- Open the terminal at monorepo's root folder.
- Run
yarn add npm-run-all -D -W
. - Open monorepo's
package.json
and add the scripts bellow:
"scripts": {
"server-dev": "yarn workspace server dev",
"web-dev": "yarn workspace web start",
"start": "run-p server-dev web-dev"
}
- Now run
yarn start
and see the magic happening ✨ ✨ ✨
P.S.: If you don't want to add that dependency and you are using Windows' CMD or PowerShell, you can achieve a similar result using
start yarn workspace server dev && start yarn workspace web start
, but it will open two terminal windows and each of them will run one of the scripts.
Top comments (1)
Hello, thanks for your post.
How do you use git?