Tutoriel React FR — Partie 1 (Next.JS / Apollo / GraphQL / Express.js) [FR/EN]
Partie 1 : Configuration du front-end et du back-end
Si vous n’avez pas lu l’introduction, lisez là maintenant, 8 parties sont deja disponibles
Vous rêvez de réaliser un site internet à la AirBnb / Blablacar / DropBox / Facebook, vous ne savez pas comment gérer toutes les parties tel un développeur fullStack aguerrit ? Ce tutoriel ÉNORME est fait pour vous ! Dans ce tutoriel vous apprendrez comment réaliser aussi bien un frontend, qu’un backend le tout en “Server Side Rendering” ainsi que la partie déploiement et base de données !
Informations avant de commencer sur les différents outils qui seront utiliser pendant ce tutoriel
Bonjour,
Ce projet à pour but de vous former à React, plus précisément à Next.js avec des technologies au top que ce soit en terme d’utilisation, de structuration de code, de compréhension, de maintenance, que ce soit pour des projets persos ou un peu plus importants.
Ce tutoriel est inspiré des technologies utilisées par WesBos dans son cours avancé sur React. Vous apprendrez comment créer une application en SSR, utiliser un ORM, utiliser GraphQL, Builder et Déployer votre application sur plusieurs types de plateformes, le tout en intégrant des propriétés CSS innovantes et les styled Components et en vérifiant que vos données sont propres et que votre code est correctement testé !
L’idée est de faire une sorte de Blog avec du contenu qui peut potentiellement être payant pour votre communauté, cela permettra de voir la création, la lecture, la pagination, l’édition, la suppression, la gestion des droits ainsi que le système de paiement.
A LIRE AVANT DE COMMENCER : Au début de ce tutoriel vous utiliserez un certain nombre de dépendances dans votre front et votre back. Les versions de ces dépendances ne sont pas figées, elles bougerons tout au long de ce tutoriel.
|Edit lors de l’écriture de la partie 6 |
Je me rends déjà compte que la nouvelle version de Prisma (2) est sortie, et que Styled-Components est passé en version 4 par exemple. Ne vous inquiétiez donc pas si vous voyez des numéros de version qui ne vous semble pas cohérents.
React.js
Next.js => Server Side Randering + Routing
Utilisation de Styled Components
React-Apollo (pour intéragir avec Apollo Client)
Apollo Client
Mutations (CREATE UPDATE DELETE)
Queries (GET) avec graphQL
Système de cache pour les données dans GraphQL
State Local (Remplacement de Redux)
Mise à disposition d’outils pour gérer les requêtes asynchrones
GraphQL (yoga)
Server ExpressJS avec GraphQL
Résoudre les Queries et Mutations
Chargement d’une carte de crédit
Envoie de Mail
Authentification avec un JWT (token)
Gestion des permissions
Prisma
ORM / Interface de base de données GraphQL
Création / Edition/ Suppression/ Visualisation avec MySQL ou PostGres
Permet de définir un schéma de données
Permet de gérer les relations entre données (jointure)
Exécute les requêtes directement sur le serveur Yoga
Heroku / Zeit.now
Hebergement de la partie Back et / ou Front + Base de données
Architecture
Tous les choix de nommages sont personnels, vous pouvez choisir ce que vous voulez.. mais ça permettra de peut être mieux vous y retrouver :)
Créer un dossier principal “ Projet “
Créer 2 dossiers à l’intérieur :
- frontend
- backend
Front-End
Configuration
Commençons par le Front-end.
Comme notre projet n’utilisera pas à proprement parler REACT mais NEXT.JS nous devons l’importer mais pour cela nous devons construire la base du projet en lui même :
npm init
Appuyer sur ENTRER jusqu’à la fin. On ne va pas perdre de temps sur le fichier package.json qui est le fichier de configuration de notre frontend (pour ceux que ça intéresse, vous pouvez trouver sur le web toutes les infos à remplir mais rien d’obligatoire)
Vous vous retrouvez maintenant avec un fichier package.json. Ajoutez lui un attribut “dependencies” ainsi qu’un attribut “devDependencies” comme ci dessous avec toutes les mêmes valeurs, je vais vous expliquer tout ça.
Pensez à faire un
npm update
car mes dépendances sont peut être dépassées :)
- Apollo-boost et Apollo-client : outils relatifs à l’utilisation d’Apollo
- babel-core et babel-plugin-styled-components : Outils pour babel, permet aux navigateurs ne connaissant pas les nouvelles syntaxes de JavaScript de compiler le code correctement. Permet également d’interpréter correctement la syntaxe des “styled components” qui sont une façon d’écrire son CSS sous forme de composant
- date-fns : Si vous connaissez moment.js c’est un peu le même principe. date-fns permet de manipuler les dates (surtout en javascript / node.js)
- downshift: Composant Autocomplete sous forme de SELECT (Dropdown) accessible et qui s’intègre facilement à REACT.
- enzyme et enzyme-adapter-react-16 : Utilitaire de test pour React.js. Permet de tester facilement les composants React
- graphql et graphql-tag : Implémentation de GraphQL et de sa syntaxe littéral avec Apollo
- lodash.debounce : Utilitaire permettant d’ajouter du Delay (via la librairie Lodash)
- next et next-with-apollo : Implémentation de Next.js et de sa relation avec Apollo
- nprogress: Outils permettant d’avoir une barre de chargement un peu comme sur “Amazon”
- prop-types : Outils propre à React permettant de vérifier le type des props
- react, react-adopt, react-apollo, react-dom, et react-transition-group: Tous les outils liés à React afin d’intégrer apollo, le dom, les transitions
- react-stripe-checkout : Implémentation du système STRIPE de paiement
- styled-components: Implémentation de Styled Components, permettant de créer des composants pour le CSS
Ensuite, il va falloir déclarer la configuration des différents outils que nous allons utiliser. Je me doute que cette partie est assez barbante et surement pas très compréhensive lorsque l’on commence un projet de ce type.
Retenez simplement que pour babel ou jest, ces données sont trouvables en ligne, et que bien souvent, le nom des objets parle de lui même.
Voici la configuration que j’ai utilisé : (IMPORTANT)
https://gist.github.com/thibautjeanpierrepartner/0078516e53e9fa776c0ff9b962e5c89d
et que vous devez impérativement ajouter à votre package.json, sans quoi, votre code ne sera pas bien interpréter par le navigateur, vous aurez des erreurs, les styled-components ne fonctionnent pas, vos tests ne fonctionnent pas… etc :)
La dernière étape de la configuration concerne les commandes d’exécution NPM.
Dans votre package.json vous trouverez un attribut “script” qui est un objet reprenant l’ensemble de vos scripts d’exécution sous forme de simple commandes.
Le choix des noms est libre mais pour l’instant la seule chose qui nous intéresse est de pouvoir lancer notre application et la build. Alors ajoutez ces commandes :
(le 7777 est le port sur le localhost d’exécution de votre frontend)
L’étape la plus agréable
npm install
qui va installer toutes vos dépendances dans un dossier /node_modules. Cela va également créer un fichier package-lock.json qui résulte de cette installation. A partir de là, il ne manque plus que 2 ou 3 coups de tournevis pour que votre front-end soit correctement configuré !
Le point suivant est donc de configurer rapidement JEST qui est notre framework de testing, c’est une des dernières fonctionnalités que nous étudierons mais autant que le projet soit propre dès le commencement.
Créez un fichier jest.step.js. Recopiez ce code, on verra pour le reste plus tard !
Dernière étape de la configuration, notre petit fichier de configuration publique du front.
Créez un fichier config.js toujours à la racine, et ajoutez simplement la ligne :
export const endpoint = `http://localhost:4444`;
qui se trouve être l’URL de notre backend !
Arborescence
En premier lieu, pour toute question ou problème, la solution se situera surement sur la documentation de Next.js ! https://nextjs.org/learn/basics/getting-started
La première puissance de Next.js réside dans son système de Routing. Fini le Router.js à créer, et la déclaration de chaque Routes. Ici vous devez simplement créer un dossier /pages dans lequel vous mettrai n’importe quel fichier, et le nom de fichier sera votre route.
Par exemple si vous avez un fichier Home.js alors son code sera présent sur l’URL http://localhost:7777/home
Pour l’instant, créez simplement ce dossier et laissez le vide.
Ensuite, créez un dossier /static dans lequel nous mettrons tous les fichiers qui ne sont pas destinés à être modifier, ou très rarement. Dans un premier temps nous allons simplement ajouter le CSS de notre progressBar nprogress.css.
Je vous mets à disposition le code CSS sur une page GIST ici :
https://gist.github.com/thibault60000/4016a35afcd2f7bd7e720d3adc9454a1
Dernier dossier (Promis ! Je sais que c’est long). Mais ce dossier est trèèèès important! C’est le dossier /components qui comme son nom l’indique va accueillir tous nos composants.
Je vous conseille comme moi de créer un dossier /styles à l’intérieur, dans lequel nous mettrons tous les “styled components”
Le seul fichier que je vais créer pour l’instant est un fichier ErrorMessage.js qui va simplement retourner le message d’erreur GraphQL car la structure est assez complexe. Pour l’instant laissez simplement ce petit bout de code, nous le compléterons plus tard :
Backend
Architecture
Même topo que pour la partie Front ! On commence avec un package.json (vous pouvez utiliser la commande “npm init” si vous le souhaitez.
Je vous fourni la liste des dépendances.
Encore une fois on retrouve Babel, un outils pour la gestion des cookies, un outils pour la gestion des variables d’environnement, tout ce qui est relatif à graphql, graphql Yoga (le serveur express), ce qui permet la gestion du token (JWT), nodemon (qui permet de démarrer votre serveur et de voir les modifications en temps réel), prisma (ORM), et Stripe (paiement).
Au niveau des scripts d’exécution on retrouve le script pour démarrer le serveur, le même en mode debug, et celui permettant de déployer.
N’oubliez pas le npm install sinon aucune dépendance ne sera installé !
La partie qui commence à être intéressante concerne la configuration de Graphql (sous forme de fichier YAML)
Créez donc un fichier .graphqlconfig.yml
et inscrivez cette configuration :
Elle permet de spécifier le chemin du schéma de données, le ENDPOINT (donc l’url d’attaque) de notre backend et le chemin du fichier des méthodes générées.
Vous voyez donc des URL qui mènent à un dossier que nous n’avons pas encore. Alors créons le dossier /src et dedans créez un dossier /generated et un dossier resolvers
Le dossier generated comportera du code généré uniquement. Tandis que le dossier resolvers regroupe toutes les mutations et queries de l’application (que nous verrons bientôt), mais histoire d’initialiser ça, dans le dossier resolvers créez deux fichiers : Mutation.js et Query.js avec un simple import comme ci dessous :
Créons maintenant à la racine de notre dossier /src le fichier principal de notre application : index.js. Laissons le vide pour le moment.
Ensuite créons un fichier variables.env.sample à la racine de notre dossier backend qui regroupe l’ensemble de nos variables d’environnement.
Pour le moment ajoutez simplement dans ce fichier
FRONTEND_URL=”http://localhost:7777"
PRISMA_ENDPOINT=”test123"
PRISMA_SECRET=”test123"
APP_SECRET=”ttest123"
PORT=4444
Nous allons bientôt remplir ces valeurs avec de vraies données !
Résumé
L’architecture de notre projet est maintenant mise en place. Vous pouvez effectuer votre premier commit sur Github !
N’oubliez pas : Créez un fichier .gitignore à la racine de votre projet global regroupant frontend + backend et spécifier dans ce fichier les deux lignes suivantes :
/backend/node_modules
/frontend/node_modules
Sinon vous allez déployer des milliers de fichiers de dépendances en tout genre.. :)
Vous devez donc maintenant vous retrouver avec une arborescence très proche de celle ci :
La prochaine partie (disponible ici) portera sur la création de nos premières pages et du routing entre elles
