Setting up a Full-Stack TypeScript Web App Monorepo with Live Reload
Tags: typescript, node, react, reactnative
Published: 2020-06-02 00:04:53

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](https://nodejs.org/en/download/package-manager/) or just [download the best installer for your SO](https://nodejs.org/en/download/).
- You must have Yarn installed. Install [here](https://yarnpkg.com/getting-started/install#global-install).

#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:
```json
{
  "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`.
```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:
```json
  "scripts": {
    "dev": "ts-node-dev src/server.ts"
  },
```
- Now, open a terminal on this folder and run `yarn dev`.
- :tada: :tada: :tada: :tada: :tada:

#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:
```json
  "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 :sparkles: :sparkles: :sparkles:

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