FastAPI + React TypeScript Template

A modern web application template using FastAPI for the backend API, React TypeScript for the frontend, MongoDB as the database, and Redis for caching.

Table of Contents

• Prerequisites
• Project Setup
• Development Environment
  • Docker Only Setup
  • Hybrid Setup
• Development Commands
• Production Deployment
• API Documentation

Prerequisites

Python Setup

1. Install Python 3.11

   • Download from Python Official Website
   • Verify installation: python --version

2. Install Poetry

   curl -sSL https://install.python-poetry.org | python3 -

   Verify installation: poetry --version

Node.js Setup

1. Install Node.js

   • Download from Node.js Official Website
   • Verify installation: node --version

2. Install Yarn

   npm install -g yarn

   Verify installation: yarn --version

Docker Setup

1. Install Docker and Docker Compose
   • Follow instructions at Docker Official Documentation
   • Verify installation:

     docker --version
     docker-compose --version

Project Setup

Environment Configuration

1. Backend Environment Setup

   cd backend
   cp .env-example .env

   Configure the following variables in .env:

   ENVIRONMENT=production
   MONGO_URI=mongodb://foo:bar@localhost:27017/  # Use 'mongo' as host if not working
   MONGO_DB=database
   REDIS_HOST=localhost  # Use 'redis' as host if not working
   REDIS_PASSWORD=password
   JWT_SECRET_KEY=secret
   

2. Database Environment Setup

   cd database
   cp .env-example .env

   Configure the following variables in .env:

   MONGO_INITDB_ROOT_USERNAME=username
   MONGO_INITDB_ROOT_PASSWORD=password
   MONGO_INITDB_DATABASE=database
   MONGO_INITDB_ROOT_EMAIL=user@example.com
   REDIS_PASSWORD=password
   

Development Environment

Docker Only Setup

Run the entire stack using Docker:

docker-compose -f docker-compose.yml up --build -d

Hybrid Setup

Run only MongoDB and Redis in Docker, with local development servers:

1. Start Required Services

   docker-compose -f docker-compose.yml up mongo redis --build -d

2. Setup Backend

   cd backend
   poetry install
   ./cmd.sh start  # Alternative: poetry run python -m app.main

3. Setup Frontend

   cd frontend
   yarn install
   yarn start

Development Commands

Code Formatting

Format backend code:

cd backend
./cmd.sh format

Format frontend code:

cd frontend
yarn lint

Service URLs

• Backend API: http://localhost:8000
• Frontend Application: http://localhost:3000

Production Deployment

Deploy the entire stack for production:

docker-compose -f docker-compose.prod.yml up --build -d

API Documentation

When the backend is running, access the API documentation at:

• Swagger UI: http://localhost:8000
• ReDoc: http://localhost:8000/redoc