React Monorepo Boilerplate

template for building web applications with React

Features

• Auto Page Routing based on File System
• Pre-configured with VSCode code snippets and other VSCode settings
• Pre-configured with code quality tools: ESLint, Prettier, TypeScript, Vitest, etc.

Directory Structure

basically it's monopoe, so additional scripts or servers can be developed in repo

├──.github — GitHub configuration including CI/CD workflows
├──.vscode — VSCode settings, recommended extensions etc.
├──app — Web application front-end built with React
├──env — Application settings, API keys, etc.
├──scripts — Automation scripts such as deploy
├──tsconfig.json — The root TypeScript configuration
└──tsconfig.base.json — The common/shared TypeScript configuration

Tech Stack

• React, React Router, React Query
• Vite, Vitest, TypeScript, ESLint, Prettier, PNPm

Requirements

• Node.js v18+ with Corepack ($ corepack enable)
• VS Code editor with recommended extensions
• Optionally React Developer Tools and Reactime browser extensions

Getting Started

Generate a new project from this template, clone, install dependencies, update the environment variables found in env/*.env, and enjoy party :

$ git clone https://github.com/jarry3369/react-monorepo-boilerplate.git [app_name]
$ cd [app_name]

# can spell just `pnpm i`
$ pnpm install
$ pnpm dev

IMPORTANT: Ensure that VSCode is using the workspace version of TypeScript and ESLint.

add dependencies for party,

# This command will install Package on root
$ pnpm add -w <NODE_PACKAGE_NAME>
# If you want to add a dependency for special Repo,
$ pnpm add --filter <MONOREPO_PACKAGE_NAME> <NODE_PACKAGE_NAME>

wanna remove dependencies from party,

# When used inside a workspace, removes a dependency (or dependencies) from every workspace package.
# can spell 'rm' or 'uninstall' or 'un' as well
$ pnpm remove -r <NODE_PACKAGE_NAME>
# If you want to remove dependency for special Repo,
$ pnpm remove --filter <MONOREPO_PACKAGE_NAME> <NODE_PACKAGE_NAME>

check more infomations here

Scripts

• pnpm dev — Launches the app in development env
• pnpm preview — Launches the app in production env
• pnpm test — Run unit tests with Vitest, Supertest
• pnpm build — Run build for all projects in repository.

How to Deploy

Ensure that all the environment variables for the target deployment environment in /env/*.env files are up-to-date.

$ pnpm build
- theres no automation deploy yet, but _will be update_

MADE BY & BIG THANKS 🤡

     

Update Scheduled Features

• Vitest setup
• CI/CD pipeline Scripts for Amplify

License

Copyright © 2023 @jarry3369