The Bling Boys of Alabama Gospel band singing

Gospel Stack

React Router Monorepo Check the README.md file for instructions on how to get this project deployed.

Getting started

Opinionated defaults help you grow from prototype to production: use Turbo for packages, React Router for routing, Hono for edge-ready APIs, and Drizzle for migrations.

Bootstrap the workspace

Requirementspnpm

Scaffold the project with degit, this will clone the repository and clean up the git history. Then cd into your newly created project.

pnpm dlx degit PhilDL/react-router-gospel-stack my-app
cd my-app

Set up your stack

RequirementsDocker if choosing PostgreSQL

When you are in your project folder, install the dependencies and run the setup script.

pnpm install && pnpm run setup

The setup script will prompt you to choose:

The name of your monorepo organization (e.g. @my-org)
The database you want to use: Turso or PostgreSQL [require Docker]
The ORM you want to use: Drizzle or Prisma

Start the development server

Start your the developpement server of the webapp and begin developing your application.

pnpm dev --filter=@react-router-gospel-stack/webapp

Read the development guide

Architecture overview

Classic monorepo architecture

This monorepo architecture is composed of the classic apps and packages structure.

Most organizations have packages that are consummed directly by apps, so we don't have build step for packages and use just-in-time compilation. The vite bundler will take care of that, and typescript config paths will help you to import packages directly from the source.


├── apps
│   └── webapp
├── config
│   ├── eslint
│   └── tsconfig
├── docs
├── packages
│   ├── business
│   ├── infrastructure (Database)
│   └── ui
├── pnpm-workspace.yaml
├── package.json
└── turbo.json

Business & Infrastructure layer

We borrow and overly simplify DDD concepts (you are free to follow it more religiously) to layer our application in a way that doesn't couple the business logic to the infrastructure too much.

Concretly, business code will define a Repository Interface and use it in business actions/commands/queries. Infrastructure will implement the concrete Drizzle/Prisma implementation of this interface and be used by the business code.

And dependency injection happens in the different apps, when we setup the server.

Full-stack

Hono server + React Router

We use Hono for its support for any runtime and clean middleware system.

Our server file will set-up dependencies and provide repositories (database access) through the React Router AppLoadContext.

This allows you to use fully resolved repositories in your loaders and actions, and keep dependency injection in one file.

No users yet

An example seed script is provided in the infrastructure package. It will create a test user in the database. You can run it with the following command:

pnpm run db:seed

Do you like this stack?

I would greatly appreciate your feedback and support, consider starring the repository on GitHub and sharing it with your friends.

Star the repository