Setting up a Full-Stack TypeScript Web App Monorepo with Live Reload

#typescript #node #react #reactnative

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 folder packages. 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.