MCluck90 / foal-ts-monorepo

Boilerplate for building a volatility-based system using Foal for the server and Create React App for the client

Foal Monorepo Example

Boilerplate for an application with a selection of technologies.

Prerequisites

1. Install Node.js
2. Install Yarn
3. Install Docker
4. Install path-exists

   yarn global add path-exists-cli

5. Install VS Code

Getting Started

1. Install all dependencies from the root of the project

yarn install

2. Copy .env.example and modify any values as necessary

   cp .env.example .env

3. Start the database.

   docker compose up -d

4. Open app.code-workspace with VS Code.

5. Press F5 or go to the Run and Debug section and launch Debug (workspace).

6. This will launch the server and the client. The debugger automatically pauses when the server starts. Click the Continue button to continue launching the app.

Technologies

• TypeScript
• Foal
• TypeORM
• Create React App
• Docker
• PostgreSQL
• Redux
• Redux Saga
• Jest
• ESLint
• Prettier
• Yarn
• Husky

Philosophy

The first thing you'll notice is that this project is built as a monorepo. By managing all of the pieces of the system in a single place, this aids in velocity as the entire system can be modified at the same time.

The different packages are separated using ideas outlined in Righting Software. This document will go in to a high-level explanation of each of the layers. See Use Volatility-Based Decomposition for a more in-depth explanation.

┌────────┐            ┌─────────┐
│        │            │         │
│ Client ├────────────►         │
│        │            │         │
└────┬───┘            │         │
     │                │         │
┌────▼────┐           │         │
│         │           │         │
│ Manager │           │         │
│         ├───────────►         │
└──┬─────┬┘           │         │
   │     │            │         │
   │     │            │         │
   │  ┌──▼─────┐      │         │
   │  │        │      │ Utility │
   │  │ Engine ├──────►         │
   │  │        │      │         │
   │  └─────┬──┘      │         │
   │        │         │         │
   │        │         │         │
┌──▼─────┐  │         │         │
│        ◄──┘         │         │
│ Access │            │         │
│        ├────────────►         │
└────────┘            └─────────┘

For more information about each of the decisions made for this project, go check out the ADRs folder.

Workspaces

To make it easier to work on a particular part of the application at a time, custom workspaces have been assembled. Open the workspace that makes the most sense for you or just load the entire project in to VS Code at once if you'd prefer.

Creating New Packages

To make it easier to create your own packages for each layer, there is a new script. The script takes in a package type (as defined by layer) and a name. It will take care of putting together the necessary boilerplate for you.

Usage: yarn new [type] [name]

Example

$ yarn new engine validation