loading...
Cover image for Setting up a Full-Stack TypeScript Web App Monorepo with Live Reload

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

vsalbuq profile image Vinícius Albuquerque ・3 min read

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.

Posted on Jun 2 by:

vsalbuq profile

Vinícius Albuquerque

@vsalbuq

(He/him) Plays guitar and sings when no one is around to relieve tension, but please don't tell anyone he does that.

Discussion

markdown guide