StartER - Un framework Express + React complet et lisible
Framework React + Express pensé pour le prototypage rapide et l’apprentissage.
Conçu pour être compris avant tout, et facilement adaptable grâce à un système de clonage de modules.
⭐️ Si vous trouvez ce projet utile, laissez une étoile pour soutenir le projet !
Vue d'ensemble
StartER est un starter full-stack combinant Express (backend) et React (frontend) dans un seul projet cohérent. Il est conçu à la fois comme un outil pédagogique et comme une base de production solide pour prototyper rapidement des applications web modernes.
Technologies incluses
Côté serveur et client
- Express : framework minimaliste pour créer des serveurs web et des API avec Node.js.
- React : bibliothèque JavaScript pour construire des interfaces utilisateur interactives et modulaires.
Outils et écosystème
Dans l'ordre alphabétique (liste non exhaustive) :
- Biome : linter, formateur et analyseur statique performant pour garantir un code propre.
- Docker : conteneurisation pour des environnements de développement et de déploiement reproductibles.
- MySQL : système de gestion de bases de données relationnelles.
- Pico CSS : kit CSS minimaliste et sémantique.
- React Router (Mode Data) : gestionnaire de routes pour React.
- TypeScript : superset de JavaScript ajoutant des types statiques.
- Vite : outil de build rapide pour le développement et la production.
- Vitest : framework de test intégré à Vite.
- Zod : validation et typage de schémas TypeScript.
Installation et utilisation
Une documentation complète est disponible dans le wiki du projet.
Pour débuter, consultez les pages principales :
Structure des fichiers sources
.
├── .env
├── .env.sample
├── compose.yaml
├── compose.prod.yaml
├── Dockerfile
├── index.html
├── server.ts
└── src
├── database
│ └── schema.sql
├── express
│ ├── routes.ts
│ └── modules
│ └── ...
├── react
│ ├── routes.tsx
│ └── components
│ └── ...
└── types
└── index.d.ts
Commandes de base
| Commande | Description |
|---|---|
docker compose up --build |
Build et démarre les services (ajouter -d pour démarrer en mode détaché). |
docker compose -f compose.prod.yaml up --build -d |
Build et démarre l'application en mode production. |
docker compose logs -t |
Affiche les logs avec timestamps. |
docker compose run --build --rm server npm run database:sync |
Synchronise la base de données avec src/database/schema.sql (-- --use-seeder pour remplir la base de données avec src/database/seeder.sql). |
docker compose run --build --rm server npm run test |
Exécute les tests. |
npm run biome:check |
Contrôle la qualité du code avec Biome (exécuté en pre-commit). |
npm run types:check |
Contrôle la cohérence des types TypeScript (exécuté en pre-commit). |
npm run make:clone <source> <destination> <OldName> <NewName> |
Clone un module ou un fichier en renommant automatiquement les identifiants. |
npm run make:purge |
Supprime les modules par défaut (-- --keep-auth pour conserver user et auth). |
REST cheatsheet
StartER repose sur une architecture RESTful, où chaque ressource (par exemple items ou users) expose un ensemble d'endpoints structurés autour des opérations CRUD/BREAD classiques :
- Browse : parcourir toutes les ressources
- Read : lire une ressource spécifique
- Add : créer une nouvelle ressource
- Edit : modifier une ressource existante
- Destroy : supprimer une ressource
Ce tableau récapitule les conventions utilisées dans les modules Express du projet (comme itemRoutes), les méthodes HTTP associées et les réponses attendues.
Il sert de référence rapide lorsque vous développez vos propres modules ou testez vos API.
| Opération | Méthode | Chemin d'URL | Corps de la requête | SQL | Réponse (succès) | Réponse (erreur) |
|---|---|---|---|---|---|---|
| Browse | GET | /api/items | — | SELECT | 200 (OK), liste des items. | — |
| Read | GET | /api/items/:id | — | SELECT | 200 (OK), un item. | 404 (Not Found), si id invalide. |
| Add | POST | /api/items | Données de l'item | INSERT | 201 (Created), id d'insertion. | 400 (Bad Request), si corps invalide. |
| Edit | PUT | /api/items/:id | Données de l'item | UPDATE | 204 (No Content). | 400 (Bad Request), si corps invalide ; 404 (Not Found), si id invalide. |
| Destroy | DELETE | /api/items/:id | — | DELETE | 204 (No Content). | — |
Licence
Ce projet est distribué sous licence MIT. Vous êtes libre de l'utiliser, le modifier et le redistribuer à des fins éducatives ou professionnelles.