Ce tutoriel vous guide dans la construction d'une application full-stack en utilisant FastAPI pour le back-end, React.js avec Vite pour le front-end, et Material-UI pour une interface utilisateur propre, le tout avec TypeScript. La pile choisie est idéale pour les applications modernes en raison de la vitesse et des capacités asynchrones de FastAPI, de l'environnement de développement rapide et de la structure de frontend modulaire de React et Vite, et du look poli et professionnel de MUI. La structure du projet se compose d'un dossier backend pour l'application FastAPI et d'un dossier frontend pour l'application React avec Vite.
Pour configurer FastAPI, vous devez créer un nouveau répertoire, installer Poetry, ajouter les dépendances FastAPI et uvicorn. Ensuite, vous pouvez créer un fichier main.py avec une application FastAPI de base et lancer le serveur à l'aide d'uvicorn. Pour le frontend, vous devez créer un nouveau répertoire, installer Vite et React avec TypeScript, et ajouter les dépendances MUI et axios. Vous devez également ajouter des paramètres de proxy au fichier vite.config.ts pour proxy les requêtes API vers le serveur FastAPI.
Pour connecter React à FastAPI, vous devez créer un composant App qui fait une appel API au serveur FastAPI à l'aide d'axios et affiche le message de réponse. Enfin, vous pouvez lancer les serveurs back-end et front-end et accéder à l'application à l'adresse http://localhost:3000. Ce tutoriel fournit un setup de base pour une application full-stack, et vous pouvez également consulter un modèle de démarrage complet avec des fonctionnalités comme l'authentification utilisateur et l'intégration de base de données pour la production et les projets de démarrage.
dev.to
Modern Full-Stack Setup: FastAPI + React.js + Vite + MUI with TypeScript
