DEV Community

Cover image for Setting up a Full-Stack TypeScript Web App Monorepo with Live Reload
Vinícius Albuquerque
Vinícius Albuquerque

Posted on

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

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.

Discussion (2)

Collapse
emindeniz99 profile image
Emin Deniz

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

Collapse
ptaberg profile image
Kolja Ptaberg

For MacOS use yarn create react-app packages/web --template=typescript
With another slash.