The docker-compose.yml for the whole stack
- 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
The only dependencies for this project should be docker and docker-compose.
Starting the project with hot-reloading enabled (the first time it will take a while):
docker-compose up -d
To run the alembic migrations (for the users table):
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
docker-compose build
docker-compose restart
docker-compose down
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
cd frontend
npm install
npm test
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.
There is a helper script for both frontend and backend tests:
./scripts/test.sh
docker-compose run backend pytest
any arguments to pytest can also be passed after this command
docker-compose run frontend test
This is the same as running npm test from within the frontend directory
docker-compose logs
Or for a specific service:
docker-compose logs -f name_of_service # frontend|backend|db
backend
└── app
├── alembic
│ └── versions # where migrations are located
├── 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