galadrim.MéthodeÉquipeRéférencesBlogJobs 4ContactContact

Lancer un projet web avec un starter réutilisable en React.js, NestJS et MySQL

C'est une bonne pratique de ne pas recommencer chaque projet de zéro pour gagner en productivité. C’est ce que fait maven avec ses archétypes dans l’univers de Java ou create-react-app dans l’univers web. Celui-ci permet de pré-configurer un projet React pour commencer le développement le plus rapidement possible, en évitant la configuration de d'utilitaires comme Babel, Webpack… 

L’objectif de cet article est de présenter le starter web React.js / NestJS / MySQL que nous avons utilisé pour certains de nos projets clients. Il est disponible ici et a été développé par Fast Modular Project : une nouvelle plateforme qui partage des starters et des modules pour accélérer le développement web. Les starters sont des boilerplates minimalistes et réutilisables entre différents projets, et les modules sont des fonctionnalités ajoutables à la demande sur ces starters, en fonction des spécifications d'un projet.

React a été choisi comme technologie frontend car c'est un framework développé et maintenu par Facebook et très populaire dans le développement web. NestJS a été choisi en backend comme surcouche de Node.js, la technologie backend la plus utilisée dans les projets web, afin de mieux structurer l'application. Enfin, MySQL est la base de données gratuite et open-source la plus utilisée dans le monde.

Voici quelques exemples de nos projets utilisant le starter : un questionnaire pour patients à destination des médecins, une plateforme d'actualité et de recrutement dans le domaine de la musique ou encore un site web de rencontre.

Ses objectifs

Les objectifs de ce starter web sont de :

  • Donner un environnement complet avec un frontend, un backend et une base de données en local, lançable en une commande

  • Donner aux développeurs une structure de projet web générique avec une authentification, qui est réutilisable pour chaque nouveau projet ayant la même stack technique

  • Être indépendant du système d’exploitation et des configurations locales

  • Définir un socle sur lequel des fonctionnalités peuvent être ajoutées. On peut prendre l’exemple d’un upload de fichiers dans un bucket S3 qui serait ajouté sur le starter pour les besoins d’un projet. Ce point sera expliqué plus en profondeur dans la section "L'ajout de fonctionnalités sur le starter".

L'architecture du starter est accessible sur son repository Github.

Le fonctionnement

Le lancer en une commande

Dans les objectifs cités précédemment, nous expliquions que le fonctionnement du starter ne doit être affecté ni par le système d’exploitation du développeur, ni par des configurations locales. C’est pour résoudre cette problématique que Docker rentre en jeu. Si vous voulez avoir les fondamentaux de Docker en 10 minutes, vous pouvez jeter un œil à cet article.

Le starter contient 3 dossiers correspondant à sa stack :

  • un dossier "frontend" pour la partie React.js

  • un dossier "backend" pour notre API en NestJS

  • un dossier "database" pour notre base de données locale

Architecture du starter web React.js / NestJS / MySQL

Chacun de ces dossiers contient un Dockerfile spécifique qui définit les instructions à effectuer pour créer les images Docker de nos 3 services qui seront utilisés lorsque l’on lancera le projet. Nous définissons par exemple la version de Node et de MySQL à utiliser.

Le fichier docker-compose.yml permet quant à lui de gérer la création et l'interaction de ces 3 services en définissant : 

  • l’ordre de leur création

  • l'exposition des ports sur la machine locale

  • le volume Docker à utiliser pour persister les données de la base de développement

Vous pouvez maintenant lancer votre frontend, votre backend et votre base de données avec la commande docker-compose up.

Un frontend en React.js

La partie frontend et backend du starter définissent des conventions de nommage et une architecture afin de faciliter son utilisation et le partage de fonctionnalités autour de celui-ci. À noter qu’il n’ajoute en aucun cas une surcouche technique au-dessus de React.js ou de NestJS.

La convention de nommage des fichiers dépend de leur typologie. Par exemple, une page de login se nommerait “signin.screen.tsx”. Typologies des fichiers :

  • component (ex : "button.component.tsx")

  • service (ex : "auth.service.tsx")

  • navigator (ex : "pages.navigation.tsx")

  • store (ex : "configure.store.ts")

  • ...

Un backend en NestJS avec TypeORM

Comme pour le frontend, une architecture est proposée afin de faciliter l'utilisation du backend et le partage de modules l’utilisant. Dans l’optique de réduire au maximum la complexité côté développeur, nous utilisons aussi TypeORM pour l’interaction avec la base de données. 

TypeORM nous permet d’avoir une création des tables, une mise à jour des colonnes... dans la base de données locale de façon automatique lors de l’écriture des Entities JavaScript. TypeORM apporte aussi des outils pour créer des requêtes complexes de façon intuitive. Si vous souhaitez comprendre NestJS et TypeORM en une dizaine de minutes, vous pouvez jeter un oeil à ces articles : comprendre NestJS, comprendre TypeORM.

L’ajout de fonctionnalités sur le starter

Un starter ne contient par définition aucune fonctionnalité spécifique à un projet. Grâce à l’architecture définie dans le frontend et le backend, l’intégration de fonctionnalités (modules) est facilitée et se fait à posteriori, selon le choix de l’utilisateur. Si le projet sur lequel le développeur travaille nécessite l’ajout d’une fonctionnalité, il pourra ajouter le module correspondant. Voici une liste non exhaustive des modules disponibles sur ce starter, :

La liste des modules disponibles sur ce starter est consultable sur la plateforme Fast Modular Project.

Le déploiement avec AWS (Amazon Web Services)

Le déploiement en production est une étape importante d’un projet, mais peut vite devenir chronophage pour des non initiés. Chez Galadrim, nous privilégions AWS, leader sur le marché des services Cloud. Même si cet article n’a pas pour objectif de présenter en détail le déploiement du starter, voici toutes les références et documentations utiles :

  1. Création de la base de données RDS : voir cet article.

  2. Création d’une infrastructure Elastic Beanstalk pour notre backend : voir cet article et celui-ci.

  3. Création d’une infrastructure pour héberger et servir notre frontend avec AWS S3 et Amazon CloudFront : voir cet article.

L’utilisation de l’intégration continue

L’intégration continue est déjà mise en place dans ce starter web. Vous pourrez donc, une fois votre infrastructure créée sur AWS, pousser votre code en production. 

Pour ce faire, il vous suffit d’éditer le fichier ".github/workflow/main.yml" du starter qui définit deux GitHub Actions pour déployer le frontend et le backend dans le bucket S3 et l’Elastic Beanstalk créés à l’étape précédente. 

Vous devrez alors : 

  • Renseigner le nom de la branche sur laquelle vous voulez déclencher l’intégration continue (généralement master ou main)

  • Renseigner le nom de votre bucket S3

  • Renseigner le nom de votre Elastic Beanstalk

  • Ajouter les secrets AWS_ACCESS_KEY_ID et AWS_SECRET_ACCESS_KEY à votre repository GitHub.

Fichier main.yml permettant de paramétrer l'intégration continue du projet

Conclusion

Un starter ou boilerplate permet de gagner en efficacité lors de la création de nouveaux projets. Si vous souhaitez l’utiliser, voici quelques liens qui pourraient vous intéresser : 

  • Le blog de Fast Modular Project expliquant les fondamentaux de la stack technique utilisée dans ce Starter

  • La plateforme Fast Modular Project qui liste des starters et les modules qui leur sont associés.

Quel hébergeur choisir pour mes données de santé ?
Les questions autour des données de santé sont particulièrement présentes depuis l'annonce par le gouvernement du projet ...
Clémence Nabet
Clémence Nabet
Business Developer @ Galadrim
Gestion de données globales sur une application React : Redux VS Context API
Parmi les multiples frameworks JavaScript disponibles dans l'écosystème du développement web, React fait partie des solutions ...
Damien Deredec
Damien Deredec
Full-Stack Developer @ Galadrim
Ce qu’il faut savoir sur les CMS headless
Les CMS (Content Management System ou systèmes de gestion des contenus) désignent les logiciels destinés à concevoir, mettre ...
Orianne Brion
Orianne Brion
Business Developer @ Galadrim