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

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.

Comments

[Emin Deniz]

Hello, thanks for your post.
How do you use git?