We are going to initialize the application. We will create a monorepo for our backend and frontend app; you can see the repository here. Here is the current folder structure.

- apps
    - client -> React, Vite, Typescript app
    - server -> Express, Postgres, Typescript App
- packages
    - libs -> Reuseable library
    - validation -> Reuseable library

Server Folder

This app uses Express, Postgres, and Typescript. We are going to create a REST API to serve the client, and we are also utilizing Postgres to save the data.

Client Folder

The frontend of this app uses React, Vite, and Typescript. We are going to create a Todo App that fetches data from the server app that we have created.

Packages Folder

This is our reusable code that can be used in both our client and server. To import the package in Yarn, you can do it like this in the package.json file.

"dependencies": {
  "libs": "*",
  "validation": "*"
}

Installation

In a Yarn workspace, you need to provide the folder path for Yarn to recognize the packages.

{
  "name": "aws-devops-fullstack",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "workspaces": {
    "packages": [
      "packages/*",
      "apps/*"
    ]
  }
}

To command all packages, you can use the workspaces command. Ensure that the script command exists in your packages.

yarn workspaces run <command>

To run a command individually for each package, you can use the workspace command.

yarn workspace <package-name> <command>