030 - Création d'un backend node

Tu as réussi à développer un début d'application React. Cette application propose un formulaire qui est prêt à enregistrer un nouvel utilisateur. Maintenant tu vas devoir mettre en place un backend pour connecter ton application dessus et permettre la gestion de l'inscription.

Objectifs

• Dans cette quête tu vas mettre en place un serveur NodeJs, accompagné par la librairie ExpressJs, qui permet de gérer l'API Rest de ton serveur. Le serveur devra proposer une route /auth/signup qui servira à React par la suite.

Création d'un serveur NodeJs

• Tu dois créer un répertoire /back à la racine du répo Git et travailler dedans.

Afin de bien démarrer, tu devras créer un fichier package.jsonà la racine avec le contenu suivant :

{
  "name": "serveur",
  "version": "1.0.0",
  "description": "serveur de la Wild",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "author": "wilder",
  "dependencies": {
    "express": "^4.16.3",
    "morgan": "^1.9.0"
  }
}

Ensuite tu vas créer le fichier root de ton application app.js à côté du package.json. N'oublie pas de créer aussi un .gitignore dans ce même répertoire, où tu indiqueras que tu veux ignorer les node_modules

Implémentation de l'app.js

L'implémentation d'une application node/express est composée de 3 parties. la déclaration

// je déclare l'ensemble des librairies nécessaires
const  http  =  require('http');
const  path  =  require('path');
const  express  =  require('express');
const  morgan  =  require('morgan');
const  app  =  express();

la configuration

// je configure l'application
app.use(morgan('dev'));
app.use(express.urlencoded({ extended:  false }));
app.use(express.json());
app.use(express.static(__dirname  +  '/public'));

le fonctionnel

// j'implémente la partie API
app.get("/", (req,res) => {
    res.send("youhou");
});

/// dans le cas d'une route non trouvée, je retourne le code 404 'Not Found'
app.use(function(req, res, next) {
    const  err  =  new  Error('Not Found');
    err.status  =  404;
    next(err);
});

//je lance le serveur node
app.listen( process.env.PORT  ||  3000, function(){
    console.log('Listening on port '  +  server.address().port);
});

Tester le serveur

Tu peux lancer le serveur avec le script défini dans le package.json:

npm start

À l'aide de Postman tu peux tester un GET http://localhost:3000/et tu devrais voir afficher : "youhou".

Il est important que le serveur soit fonctionnel avant de poursuivre !

Création du fichier auth.js qui permettra la gestion de l'enregistrement de compte

Introduction

Coté backend, lorsque l'on s'intéresse à la création d'une API Rest, il est important de dissocier ce qui représente un chemin dans l'application (i.e page 'home', page 'authentification', ...) de ce qui représente une donnée ou un service (i.e données utilisateurs, données blogs, authentification, etc).

Dans le cas d'un chemin dans l'application, nous nous attendons à quelques choses du type :

GET / #permet d'afficher la page d'accueil de l'application
GET /login #permet d'afficher la page d'authentification
GET /profile #permet d'afficher la page de profil de l'utilisateur
GET /blog #permet d'afficher la page de blog de l'application

Dans le cas d'un accès à une donnée ou un service, il n'y a pas de standard, mais l'identification se fait généralement par une route enfant. Nous pouvons par exemple avoir :

/auth #auth ici est une sous-route gérant la partie authentification
POST /auth/signin #permet de gérer le login
POST /auth/signup #permet de gérer l'enregistrement

/api #api ici est une sous-route gérant les données métiers de l'application
GET /api/profile/:id #accède au profil de l'utilisateur d'id :id
POST/api/blog #post un nouvel article de blog

Nous envoyons ou récupérons généralement des JSON.

Dans notre cas précisément

Dans la quête, nous n'allons pour le moment considérer que la route du signup.

• Afin de bien structurer notre arborescence de fichier et permettre une meilleure évolutivité, tu vas délocaliser dans un dossier /routes l'ensemble des routes de l'application. Et dans /routes/auth l'ensemble des routes touchant à l'authentification.

• Une fois l'arborescence créée, il faut ajouter un fichier auth.js dans /routes/auth

Mise en place d'une route signup

Export du module

Express peut historiquement gérer les routes directement à l'aide d'express() :

const  app  =  express();
app.get("/", (req,res)=>{
    res.send("youhou");
})

Cependant, Express fournit nativement un objet Router qui est dédié à l'usage des routes. Il est recommandé de l'utiliser par la suite.

Dans /routes/auth/auth.js, l'objectif est de configurer ou d'ajouter de nouvelles routes à Router.

• Tu vas devoir le déclarer avec express.Router() (attention aux dépendancex).
• Tu vas devoir implémenter l'ensemble des actions de l'API. Ici nous allons nous concentrer sur POST /signup :

router.post('/signup', function(req, res, next) {
  res.send('I am in POST signup');
});

• Enfin tu devras exporter router qui porte les informations. Il sera importé dans app.jspar la suite.

Import du module

Dans app.js, tu vas importer le router ci-dessus. Et nous voulons le faire pointer sur /auth, ce qui donne :

app.use('/auth', authRouter); //où authRouter est issu de l'importation

Attention à l'ordre de définition des routes. Lorsque Node reçoit une requête http, la lecture de app.js est linéaire. Dès qu'il trouve une route correspondante, il l'exécute sans aller vérifier les routes suivantes. Dans notre cas lorsqu'il recevra la requête POST /auth/signup, au moment de la lecture de app.js, express identifiera app.user('/auth', authRouter comme point d'entrée et continuera sa lecture dans authRoutersoit /routes/auth/auth.js. Dans ce dernier il identifiera router.post('/signup', action()) et exécutera action().

Tester le serveur

Challenge

Show me your property

• Construis une arborescence structurée
• Utilise Router pour l'implémentation des routes
• Fais en sorte que la route /auth/signup fonctionne

Critères de validation

• Postman doit afficher 'I am in POST signup' à l'issue de la requête