https://github.com/fanqingsong/fastapi_react_boilerplate
Template for FastAPI + React Projects. Using PostgreSQL, SQLAlchemy, and Docker. From https://github.com/Buuntu/fastapi-react
https://github.com/fanqingsong/fastapi_react_boilerplate
Last synced: 3 months ago
JSON representation
Template for FastAPI + React Projects. Using PostgreSQL, SQLAlchemy, and Docker. From https://github.com/Buuntu/fastapi-react
- Host: GitHub
- URL: https://github.com/fanqingsong/fastapi_react_boilerplate
- Owner: fanqingsong
- Created: 2022-09-16T12:05:52.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-17T11:44:18.000Z (over 2 years ago)
- Last Synced: 2025-01-14T13:53:59.435Z (5 months ago)
- Language: Python
- Homepage:
- Size: 65.5 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# project template for fastapi + reactjs
Generate from https://github.com/Buuntu/fastapi-react
Then find a bug caused by React 18，solved by suggestion:
https://github.com/facebook/react/issues/24304
https://github.com/remix-run/react-router/issues/8794
## Features
- **FastAPI** with Python 3.8
- **React 16** with Typescript, Redux, and react-router
- Postgres
- SqlAlchemy with Alembic for migrations
- Pytest for backend tests
- Jest for frontend tests
- Perttier/Eslint (with Airbnb style guide)
- Docker compose for easier development
- Nginx as a reverse proxy to allow backend and frontend on the same port
## Development
The only dependencies for this project should be docker and docker-compose.
### Quick Start
Starting the project with hot-reloading enabled
(the first time it will take a while):
```bash
docker-compose up -d
```
To run the alembic migrations (for the users table):
```bash
docker-compose run --rm backend alembic upgrade head
```
And navigate to http://localhost:8000
_Note: If you see an Nginx error at first with a `502: Bad Gateway` page, you may have to wait for webpack to build the development server (the nginx container builds much more quickly)._
Auto-generated docs will be at
http://localhost:8000/api/docs
### Rebuilding containers:
```
docker-compose build
```
### Restarting containers:
```
docker-compose restart
```
### Bringing containers down:
```
docker-compose down
```
### Frontend Development
Alternatively to running inside docker, it can sometimes be easier
to use npm directly for quicker reloading. To run using npm:
```
cd frontend
npm install
npm start
```
This should redirect you to http://localhost:3000
### Frontend Tests
```
cd frontend
npm install
npm test
```
## Migrations
Migrations are run using alembic. To run all migrations:
```
docker-compose run --rm backend alembic upgrade head
```
To create a new migration:
```
alembic revision -m "create users table"
```
And fill in `upgrade` and `downgrade` methods. For more information see
[Alembic's official documentation](https://alembic.sqlalchemy.org/en/latest/tutorial.html#create-a-migration-script).
## Testing
There is a helper script for both frontend and backend tests:
```
./scripts/test.sh
```
### Backend Tests
```
docker-compose run backend pytest
```
any arguments to pytest can also be passed after this command
### Frontend Tests
```
docker-compose run frontend test
```
This is the same as running npm test from within the frontend directory
## Logging
```
docker-compose logs
```
Or for a specific service:
```
docker-compose logs -f name_of_service # frontend|backend|db
```
## Project Layout
```
backend
└── app
├── alembic
│ └── versions # where migrations are located
├── api
│ └── api_v1
│ └── endpoints
├── core # config
├── db # db models
├── tests # pytest
└── main.py # entrypoint to backend
frontend
└── public
└── src
├── components
│ └── Home.tsx
├── config
│ └── index.tsx # constants
├── __tests__
│ └── test_home.tsx
├── index.tsx # entrypoint
└── App.tsx # handles routing
```