Demo outline for a containerized React Typescript frontend, Flask Python backend, PostreSQL database application. I was building an application and thought it would be helpful to release this barebones outline for others who are begining development using the same frameworks.
Install docker from https://www.docker.com. The frontend and backend run in seperate docker containers. Both are configured as development servers where changes are detected and applied in real time, allowing for faster development.
Build and spin up the frontend:
cd frontend
docker-compose up --build
In a seperate terminal, build and spin up the backend (including database):
cd backend
docker-compose up --build
Now you can begin development. Any changes made to the dockerfiles or compose.yamls will require you to restart the container.
The frontend is a React js app developed in typescript. It can be accessed at http://localhost:3000/.
api.tsx provides an API class that wraps the fetch function to communicate with the backend via HTTP protocols. Example.tsx contains a React component that uses the API class.
The backend is a Flask Python 3.11 server with a postgreSQL database.
api.py provides api endpoints for the requests from the frontend.
Here are some links to helpful documentation for the various frameworks used in this architecture:
- Typescript: https://www.typescriptlang.org/docs/
- React: https://www.typescriptlang.org/docs/handbook/react.html
- Python: https://docs.python.org/3.11/
- Flask: https://flask.palletsprojects.com/en/3.0.x/
- Postman extension for VScode (useful for api testing): https://blog.postman.com/introducing-the-postman-vs-code-extension/
- PostgreSQL: https://www.postgresql.org/docs/