This is a template for building web applications with FastAPI and Angular. The backend is built with FastAPI, PostgreSQL, SQLAlchemy, and Pydantic. The frontend is built with Angular, Angular Material, and Angular Flex-Layout. The project structure is organized in such a way that the backend and frontend are separated into their own directories for easy development and deployment. The backend is served by Uvicorn and the frontend is served by the Angular CLI development server. Both the backend and frontend can be deployed using Docker and Docker Compose.
The project structure should be organized as follows:
src
│
└───backend
│ │ main.py
│ │ requirements.txt
│ │
│ └───app
│ │ __init__.py
│ │ db.py
│ │ models.py
│ │ routers.py
│ │ schemas.py
src
│
└───frontend
│ │ angular.json
│ │ package.json
│ │ tsconfig.json
│ │ ...
│ │
│ └───src
│ │ app
│ │ assets
│ │ environments
│ │ ...
- Backend:
- FastAPI
- PostgreSQL
- SQLAlchemy
- Alembic
- Pydantic
- Uvicorn
- Docker
- Docker Compose
- Frontend:
- Angular
- Angular Material
- Angular Flex-Layout
- Angular CLI
- Docker
- Docker Compose
-
Clone the repository:
git clone https://github.com/lpl212757/fastapi-angular-template
-
Navigate to the project directory:
cd src
-
Install the dependencies for the backend:
pip install -r backend/requirements.txt
-
Install the dependencies for the frontend:
cd frontend npm install
-
Start the backend server:
uvicorn main:app --reload
-
Start the frontend development server:
ng serve
-
Open your browser and visit
http://localhost:4200
to see the application. -
Happy coding!
-
Build the Docker images:
docker-compose build
-
Start the containers:
docker-compose up -d
-
Open your browser and visit
http://localhost
to see the application. -
Happy coding!