Fastapi React screenshot

Fastapi React

Author Avatar Theme by Buuntu
Updated: 18 Feb 2022
2568 Stars

Cookiecutter Template for FastAPI + React Projects. Using PostgreSQL, SQLAlchemy, and Docker

Categories

Overview:

FastAPI + React is a cookiecutter template that allows developers to easily bootstrap a project using a modern stack. The template includes features such as FastAPI (Python 3.8), JWT authentication using OAuth2 “password flow” and PyJWT, React with Typescript, react-router v5 for routing, PostgreSQL for the database, SqlAlchemy for ORM, Celery for background tasks, Redis as a message broker, and more. It also includes utilities for authentication, deployment with Docker Compose and Nginx as a reverse proxy, testing with Pytest, and an admin dashboard using MaterialUI and react-admin.

Features:

  • FastAPI (Python 3.8)
  • JWT authentication using OAuth2 “password flow” and PyJWT
  • React (with Typescript)
  • react-router v5 for routing
  • Utility functions and higher-order components for handling authentication
  • PostgreSQL for the database
  • SqlAlchemy for ORM
  • Celery for background tasks and Redis as a message broker
  • Includes Flower for task monitoring
  • Alembic for database migrations
  • Pytest for backend tests
  • Includes test database, transaction rollbacks after each test, and reusable Pytest fixtures
  • Prettier/ESLint (Airbnb style guide)
  • Docker Compose for development
  • Nginx as a reverse proxy to allow backend/frontend on the same port
  • MaterialUI using recommended CSS-in-JS styling
  • react-admin for the admin dashboard
  • Using the same token-based authentication as FastAPI backend (JWT)

Installation:

To install the FastAPI + React template, follow these steps:

  1. Install cookiecutter if you don’t already have it.
<code>pip install cookiecutter</code>
  1. Install docker-compose if you don’t already have it.
<code>pip install docker-compose</code>
  1. In the desired directory for your project, run the following command and provide the required variables:
<code>cookiecutter https://github.com/<cookiecutter-template-url></code>
  1. Change into your project directory and run the following command to build and run the docker containers, run the alembic migrations, and load the initial data:
<code>docker-compose up --build</code>
  1. Once the containers are started, you can navigate to the specified port to access your project.

Summary:

FastAPI + React is a cookiecutter template that provides a streamlined and comprehensive project structure for building web applications using FastAPI and React. It includes various features such as authentication, database management, testing, and deployment using modern tools and technologies. By using this template, developers can save time on setting up the project’s infrastructure and focus more on building the core functionality of their application.