Это руководство поможет вам создать полнофункциональное приложение с использованием FastAPI для бэкэнда, React.js с Vite для фронтэнда и Material-UI для чистого пользовательского интерфейса, все это с помощью TypeScript. Выбранный стек идеален для современных приложений благодаря скорости и асинхронным возможностям FastAPI, быстрой среде разработки и модульной структуре фронтэнда React и Vite, а также отполированному и профессиональному виду MUI. Структура проекта состоит из папки backend для приложения FastAPI и папки frontend для приложения React с Vite.
Чтобы настроить FastAPI, вам нужно создать новую директорию, установить poetry, добавить зависимости FastAPI и uvicorn. Затем вы можете создать файл main.py с базовым приложением FastAPI и запустить сервер с помощью uvicorn. Для фронтэнда вам нужно создать новую директорию, установить Vite и React с TypeScript, а также добавить зависимости MUI и axios. Кроме того, вам нужно добавить настройки прокси в файл vite.config.ts для проксирования запросов API на сервер FastAPI.
Чтобы подключить React к FastAPI, вам нужно создать компонент App, который делает запрос API на сервер FastAPI с помощью axios и отображает сообщение ответа. Наконец, вы можете запустить оба сервера бэкэнда и фронтэнда и получить доступ к приложению по адресу http://localhost:3000. Это руководство предоставляет базовую настройку для полнофункционального приложения, и вы также можете ознакомиться с полным шаблоном с функциями, такими как аутентификация пользователей и интеграция базы данных для готовности к производству и стартап-проектов.
dev.to
Modern Full-Stack Setup: FastAPI + React.js + Vite + MUI with TypeScript
