|
|
--- |
|
|
title: FastAPI + React Template |
|
|
emoji: 💻 |
|
|
colorFrom: blue |
|
|
colorTo: green |
|
|
sdk: docker |
|
|
app_port: 9481 |
|
|
pinned: false |
|
|
license: mit |
|
|
short_description: Template to vibe code a demo running on FastAPI + React |
|
|
hf_oauth: true |
|
|
--- |
|
|
|
|
|
# docker-space-fastapi-react |
|
|
|
|
|
This repo is a template to run a FastAPI server hosting a React+Tailwind app in a Hugging Face Space. |
|
|
|
|
|
Spaces are very well suited to vibe-code demos using Cursor, Lovable, Claude Code, etc. The hardest past is often to correctly configure the tooltip to make it work in the first place. This repo is intended to solve that. |
|
|
|
|
|
## Getting started |
|
|
|
|
|
The backend (Python + FastAPI) and the frontend (TS + React + Tailwind) are located respectively in the `backend/` and `frontend/` folder. |
|
|
|
|
|
### Backend |
|
|
|
|
|
To run the backend, you'll need `uv` and Python3.12 installed. |
|
|
Install dependencies with: |
|
|
|
|
|
```bash |
|
|
uv venv |
|
|
make install |
|
|
``` |
|
|
|
|
|
And then run the backend server with: |
|
|
|
|
|
```bash |
|
|
make dev |
|
|
``` |
|
|
|
|
|
For more details about backend development, check out [this README](./backend/README.md). |
|
|
|
|
|
### Frontend |
|
|
|
|
|
To run the frontend, you'll need nodeJS + pnpm installed. |
|
|
|
|
|
Install dependencies with: |
|
|
|
|
|
```bash |
|
|
pnpm install |
|
|
``` |
|
|
|
|
|
And then run the frontend app with: |
|
|
|
|
|
```bash |
|
|
pnpm dev |
|
|
``` |
|
|
|
|
|
Once both parts are running, go to the frontend URL. You should see a green "Backend Online" message in the top-right corner. Note that this message is only visible in development mode. When running in a Space, it won't be shown to your end users. |
|
|
|
|
|
For more details about frontend development, check out [this README](./frontend/README.md). |
|
|
|
|
|
## Deploy |
|
|
|
|
|
This repo is meant to be run in a [Docker Space](https://huggingface.co/docs/hub/spaces-sdks-docker). |
|
|
Configuration should be automatically done if you clone the on the Hugging Face Hub. |
|
|
|
|
|
If you want to run it on your own, you can use Docker: |
|
|
|
|
|
```bash |
|
|
docker build -t fastapi-react-space . |
|
|
docker run -e HF_TOKEN -p 9481:9481 fastapi-react-space |
|
|
``` |
|
|
|
|
|
Note that when running in Docker, the app runs in production mode without hot-reloading. |
