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>
Top comments (0)