NodeJS

La base de données est MySQL

Installation de Prisma

npm init -y

npm install express @prisma/client

npx tsc --init   // va créer le fichier tsconfig.json

npx prisma --init  //


Fetching latest updates for this subcommand...

✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Run prisma dev to start a local Prisma Postgres server.
2. Define models in the schema.prisma file.
3. Run prisma migrate dev to migrate your local Prisma Postgres database.
4. Tip: Explore how you can extend the ORM with scalable connection pooling, global caching, and a managed serverless Postgres database. Read: https://pris.ly/cli/beyond-orm

More information in our documentation:
https://pris.ly/d/getting-started

A ce stade un fichier .env et un répertoire prisma a été créé. Le .env contient la chaine de connexion, par défaut c’est pour du postgres, mais on va changer en mysql. Il faut créer la base prisma_demo_ts avant de faire les opérations de migration.

DATABASE_URL="mysql://root:password@localhost:3306/prisma_demo_ts"

Maintenant on va constituer un fichier de modèle pour créer les tables dans

Création des fichiers de migration et migration dans la même commande !

npx prisma migrate dev --name add-user-contact-table 


Environment variables loaded from .env
Prisma schema loaded from prisma\schema.prisma
Datasource "db": MySQL database "prisma_demo_ts" at "localhost:3306"

Applying migration `20251018092422_add_user_contact_table`

The following migration(s) have been created and applied from new schema changes:

prisma\migrations/
  └─ 20251018092422_add_user_contact_table/
    └─ migration.sql

Your database is now in sync with your schema.

Le script index.ts

import express from 'express'
import { PrismaClient } from '@prisma/client'

const app = express()
const prisma = new PrismaClient()

app.use(express.json())

// GET all users
app.get('/users', async (req, res) => {
    const users = await prisma.user.findMany()
    res.json(users)
})

// POST new user
app.post('/users', async (req, res) => {
    const { name, email } = req.body
    const user = await prisma.user.create({ data: { name, email } })
    res.json(user)
})

app.listen(3000, () => console.log('🚀 Serveur démarré sur http://localhost:3000'))

Si vous avez une erreur de type commonJS blabla, c’est que la syntaxe import n’est pas commonJs. Pour voir la différence entre commonJS et ESM voir cet article.

Si vous avez un message d’avertissement relatif à verbatimModuleSyntax, commentez la ligne dans tsconfig.json.

Pour lancer la compilation du fichier index.ts, désignez le répertoire de sortie des fichier JS, c’est dans tsconfig.json, la clé outDir doit être décommentée :  « outDir »: « ./dist »,

npx tsc

ensuite faites
node node dist/index.js

Installations de Prisma

// Créez un répertoire pour votre projet Prisma et entrez dedans

npm init -y
npm i prisma --save-dev

Créez la base de données

CREATE DATABASE prisma_demo;

// Dans le fichier .env mettre cette chaine de connexion

DATABASE_URL="mysql://root:password@localhost:3306/prisma_demo"

npm install  @prisma/client   

npx prisma init


✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.
Next steps:
1. Run prisma dev to start a local Prisma Postgres server.
2. Define models in the schema.prisma file.
3. Run prisma migrate dev to migrate your local Prisma Postgres database.
4. Tip: Explore how you can extend the ORM with scalable connection pooling, global caching, and a managed serverless Postgres database. Read: https://pris.ly/cli/beyond-orm

Un répertoire prisma a été créé dans le projet. Dans le fichier schema.prisma mettez le code ci-dessous :

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
}

Ce modèle crée une table User avec :

• id auto-incrémenté
• email unique
• name optionnel
• createdAt avec la date de création

Faire la migration

npx prisma migrate dev --name init

Cela crée :

• table User
• Génère le client Prisma dans node_modules/.prisma/client
• un fichier de migration

Execution du script d’exploitation de la base de donnée :

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main() {
    // Créer un utilisateur
    const newUser = await prisma.user.create({
        data: {
            email: 'alice@example.com',
            name: 'Alice',
        },
    })
    console.log('Utilisateur créé :', newUser)

    // Lire tous les utilisateurs
    const users = await prisma.user.findMany()
    console.log('Liste des utilisateurs :', users)
}

main()
    .catch((e) => console.error(e))
    .finally(async () => {
        await prisma.$disconnect()
    })

Ce script une fois exécuté va créer un utilisateur dans la base de données.

Visualiser la base de données avec Studio

npx prisma studio

Syntaxe de l’ORM Prisma

// Trouver un user par email
const user = await prisma.user.findUnique({
  where: { email: 'alice@example.com' },
})

    // Mettre à jour un user
    const updatedRecord = await prisma.user.update({
        where: { id: 1 },
        data: { email: 'yvon.huynh@hotmail.com' },
    })
    console.log('Updated utilisateur :', updatedRecord )

// Supprimer un user
    // const deletedRecord = await prisma.user.delete({
    //     where: { email: 'yvon.huynh@gmail.com' },
    // })

    // console.log('Effacement utilisateur :', deletedRecord)

Récemment pour les besoin de développement d’une extension Chrome, j’ai cherché un moyen de rafraichir l’extension car le process de rafraichissement était un peu fastidieux. Il fallait aller dans le menu des extensions (chrome://extensions) et rafraichir en cliquant sur un bouton. Je voulais automatiser cette procédure comme le fait le plugin Liveserver.

Installation du projet NodeJS

npm init -y
npm install --save-dev nodemon chokidar

#pour setup avancé (optionnel)
npm install --save-dev chrome-extension-cli

Création du script de reload

import chokidar from "chokidar";
import { exec } from "child_process";

const EXTENSION_PATH = "./dist"; // or your extension folder
const CHROME_PROFILE = "--profile-directory=Default"; // optional

// watch all files in your extension folder
chokidar.watch(EXTENSION_PATH, { ignoreInitial: true }).on("all", (event, path) => {
  console.log(`File ${path} changed — reloading Chrome extension...`);

  // command to reload the extension via Chrome debugger API
  exec(`osascript -e 'tell application "Google Chrome" to reload active tab'`);

  // alternative: use chrome-cli on macOS (brew install chrome-cli)
  // exec(`chrome-cli reload`);
});

Mise en place de nodemon

Dans package.json ajouter le script :

"scripts": {
  "dev": "nodemon --watch src --exec \"node reload-extension.js\""
}

et faites npm run dev

Dorénavant, il vous suffit de fermer et rouvrir pour réactiver l’extension si c’est une extension pour les devtools.

Mettons nous dans le contexte d’une application avec front et back découplé. NodeJS/Express est le back avec une base de données, et le front par exemple est une application ReactJS. Toute l’application n’est que webservice, et l’on pourra tester l’application rien qu’avec Postman.

Ce dernier prend en charge l’authentification, grâce à la possibilité de stocker le token JWT et de le renvoyer à chaque requête.

Installation des packages NPM

Je suppose que vous avez déjà bootstrappé une application node/Express/Typescript, sinon allez visiter la page du lien. LEs paquet à installer sont jsonwebtoken, bcrypt et comme on travaille en typescript il faudra les fichier type pour l’autocomplétion. Je mets aussi mysql2 au cas où vous ne l’auriez pas installé.

npm install mysql2 bcrypt jsonwebtoken
npm install --save-dev @types/bcrypt @types/jsonwebtoken

Configurer le fichier d’environnement .env

JWT_SECRET=ta_cle_secrete_ici_change_la
JWT_EXPIRES_IN=1h
BCRYPT_SALT_ROUNDS=10

Voici le code de la route (!) qui s’occupe de l’authentification

app.post('/api/auth', async (req: Request, res: Response) => {

    const { email, password } = req.body

    if (!email || !password) {
        res.status(400).json({ message: "Email et mot de passe requis." });
    }
    try {
        const [rows] = await pool.execute(
            "SELECT id, email, password FROM utilisateurs WHERE email = ?", [email]
        )

        const users = rows as any[];

        if (users.length === 0) {
            res.status(401).json({ message: "Utilisateur inconnu." })
        }
        // vérification du mot de passe
        const user = users[0]
        const match = await bcrypt.compare(password, user.password);

        if (!match) {
            res.status(401).json({ message: "Mot de passe incorrect." });
        }

        // sinon on génère un JWT token
        const token = jwt.sign(
            { id: user.id, email: user.email },
            process.env.JWT_SECRET || "secretKey",
            { expiresIn: "24h" }
        );

        res.json({ token });

    } catch (err) {
        console.log(error);
        res.status(500).json({ message: 'Erreur serveur' })
    }

})

Je vous laisse mettre les imports qu’il faut. Aussi il vous faudra avoir la table utilisateurs pour

Requêter avec Postman.

Postman c’est comme un navigateur sans écran, en fait un navigateur est composé d’un écran et d’une antenne émettrice-réceptrice. Installez Postman, et démarrez votre serveur nodeJS, la route de l’authentification est http://localhost:3000/api/auth, faites une requête POST

Vous recevrez le JWT en réponse.

Stocker le JWT dans Postman

Copiez le token (sans les guillements et collez dans le champs avec à gauche la liste déroulante mis sur l’item Bearer Token.

Comprendre le fonctionnement du JWT

A chaque requêtes le serveur, en en-tête Authorization sera envoyé

Authorization: JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwiZW1haWwiOiJ5dm9uLmh1eW5oQGdtYWlsLmNvbSIsImlhdCI6MTc1ODQ3NzgwOSwiZXhwIjoxNzU4NTY0MjA5fQ.JZ2Z5WRzCdSYiFcbIxknV5B9byJ_Fo9ueNDT9-iH40U

Côté serveur, on crée un middleware qui va :

• Vérifier la présence du token.
• Le valider avec jsonwebtoken.verify.
• Attacher les infos décodées (userId, email, …) à req.user.
• Laisser passer la requête si le token est valide.

Création du middleware pour authentifier la requête

Nous avons une route protégée, toute requête doit passer par la vérification de la validité du token, non expiré et valide.

app.get('/api/utilisateur/add', requireAuth, (req: AuthRequest, res: Response) => {
    res.json({ message: "accès  réussi" })
})

requireAuth est un middleware, il va filtrer toutes les requêtes qui viennent d’un client, l’avantage du middleware est qu’on n’a pas besoin de faire la validation manuellement dans la route, c’est automatique. Je le mets dans le répertoire src/middleware

fichier middleware/auth.ts

import { Request, Response, NextFunction } from "express";
import jwt from "jsonwebtoken";
import dotenv from "dotenv";

dotenv.config();

// solution JWT Stateless simple
const JWT_SECRET = process.env.JWT_SECRET || "dev_secret";
;

const verifyJwt = <T = object>(token: string): T => {
    return jwt.verify(token, JWT_SECRET) as T
}


export interface AuthRequest extends Request {
    user?: any;
}

export const requireAuth = (req: AuthRequest, res: Response, next: NextFunction) => {
    const authHeader = req.headers.authorization;
    if (!authHeader || !authHeader.startsWith("Bearer ")) {
        res.status(401).json({ message: "Missing or invalid authorization header" });
        return;//le simple fait de mettre return permet à authHeader de ne plus avoir de undefined possible (enlever le return pour montrer l'erreur)
    }

    const token = authHeader.split(" ")[1];

    if (!token) {
        return res.status(401).json({ message: "Token invalide" });
    }
    try {
        const payload = verifyJwt(token);
        req.user = payload;
        next();
    } catch (err) {
        res.status(403).json({ message: "Forbidden, vous êtes authentifié mais n'avez pas accès à la ressource, problème de permission" });
    }
}

Pour aller plus loin : https://www.youtube.com/watch?v=AU5WLAJkaC8

si vous êtes depuis un moment dans le monde de Javascript NodeJs et autres framework front end, vous avez dû déjà croiser au moins 3 de ces 5 programmes.

Mais à quoi servent ils? Nous allons voir un par un ces gestionnaires de paquets.

NPM Node Package Manager

Il est né en même temps que Node JS. Très largement utilisé en général. Il permet d’installer, d’éxécuter un process (build par exemple)

NVM Node Version Manager

Il vous permet d’installer plusieurs version de NodeJS. Il vous permet de chcker la version de NodeJS

NPX Node Package Execute

Il est inclus avec NPM à partir de la version 5.2 de NPM. Le X comme execute permet à NPX d’exécuter des paquets. Oui mais NPM sait aussi exécuter un package, mais à condition qu’il soit installé en global. Si un paquet est installé en local, il est local au projet, càd dans le répertoire node_modules du projet.

C’est là que NPX prend la relève, ce dernier est capable d’exécuter un paquet. Il va d’abord chercher dans la variable PATH puis dans les fichiers binaire. S’il ne trouve pas, il est capable d’aller chercher sur Internet.

YARN Yet Another Resource Negociator (Facebook)

Yarn installe les paquets en parallèle, et donc il est plus rapide.

PNPM Performant NPM

PNMP utilise un endroit centralisé pour installer les paquets. Avec NPM vous pouvez installer un paquet en global ou en local.

Vous savez sans doute charger des images en PHP, mais savez vous le faire en NodeJS? On petu être perdu dans on aborde une nouvelle technologie. Nous allons voir comment le faire avec NodeJs. Le principe est un peu le même, on envoit un binaire via hTTP depuis la pageHTML, et côté serveur on récupère le fichier, mais là vous devez faire un peu plus de choses.

Installation de NodeJS

voici le contenu de package.json
{
  "name": "nodeupload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.21.2",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^3.1.9"
  }
}

Et le contenu du fichier server.js

//https://blog.logrocket.com/multer-nodejs-express-upload-file/

const express = require('express');
const app = express();
const multer = require('multer');
// configuration de multer
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
})
const upload = multer({
    storage: storage
})


const path = require('path');
app.use(express.static(path.join(__dirname, './')))


app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// app.post('/upload_files', (req, res) => {
//     console.log(req.body);
// })
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})

app.post('/upload_files', upload.array("files"), (req, res) => {
    console.log(req.files);
    console.log(req.body);
    res.json({ message: "Files uploaded successfully" });
})

app.listen(3000, () => {
    console.log("Server is running on port 3000");
})

Le code de la page HTML

On fera au plus simple, un formulaire, avec une chose d’importance, l’envoi doit se faire en multipart/form-data. Qu’est ce que c’est? Lorsque vous avez un formulaire simple qui envoit des caractères alphanumériques, vous ne spécifiez pas le type d’envoi (enctype)

<form action="/submit" method="POST">
  <input type="text" name="username" value="example_user">
  <input type="text" name="age" value="30">
  <button type="submit">Submit</button>
</form>

Le format urlencode

En fait il y a un enctype par défaut qui est application/x-www-form-urlencoded, cela encode les données des champs sous forme de paire clé-valeur comme dans une url, ce qui le fait ressembler à un querystring. Les caractères spéciaux sont remplacé, par exemple le caractère space est remplacé par %20, les successions de paries clé-valeur sont liées par le signe esperluette « & ». Le request body est :

id=3&nom=antoine

C’est le mode préféré quand on n’a pas de fichier à uploader.

Ensuite si on veut envoyer des fichier binaires, on choisit l’enctype multipart/form-data.

Le format multipart/form-data

Utilisez ce format pour l’nevoi de fichiers. Si vous faites un envoi en multipar, observez le header envoyé, il a la forme suivante :

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

Boundary veut dire limite ou frontière en anglais. Vos données envoyée se font par troçon délimité par la frontière.

Le request body est le suivant

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="username"

example_user
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="file"; filename="example.jpg"
Content-Type: image/jpeg

<binary content of the file>
------WebKitFormBoundary7MA4YWxkTrZu0gW--

Les données envoyée sont délimitées par la chaine « boundary=–« . On utilise ce mode quand il y a u nmix de texte et de fichier binaire.

Le format text/plain

username=example_user
age=30

Ce format est plus rare, et vous n’avez pas besoin de l’utiliser. Il envoit les données sans encoder

Mise en oeuvre du projet

Il va falloir installer NodeJs, avec la librairie multer our récupérer les binaires. Le fichiet HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h1>File Upload</h1>
        <form id='form'>
            <div class="input-group">
                <label for='name'>Your name</label>
                <input name='name' id='name' placeholder="Enter your name" />
            </div>
            <div class="input-group">
                <label for='files'>Select files</label>
                <input id='files' type="file" multiple>
            </div>
            <button class="submit-btn" type='submit'>Upload</button>
        </form>
    </div>
    <script src='./script.js'></script>
</body>

</html>

Le fichier JS front end

const form = document.getElementById("form");

form.addEventListener("submit", submitForm);

function submitForm(e) {
    e.preventDefault();
    const name = document.getElementById("name");
    const files = document.getElementById("files");
    const formData = new FormData();
    formData.append("name", name.value);
    for (let i = 0; i < files.files.length; i++) {
        formData.append("files", files.files[i]);
    }
    fetch("http://localhost:3000/upload_files", {
        method: 'POST',
        body: formData
    })
        .then((res) => console.log(res))
        .catch((err) => console.log("Error occured", err));
}

Le fichier style

/* style.css */
body {
    background-color: rgb(6, 26, 27);
}

* {
    box-sizing: border-box;
}

.container {
    max-width: 500px;
    margin: 60px auto;
}

.container h1 {
    text-align: center;
    color: white;
}

form {
    background-color: white;
    padding: 30px;
}

form .input-group {
    margin-bottom: 15px;
}

form label {
    display: block;
    margin-bottom: 10px;
}

form input {
    padding: 12px 20px;
    width: 100%;
    border: 1px solid #ccc;
}

.submit-btn {
    width: 100%;
    border: none;
    background: rgb(37, 83, 3);
    font-size: 18px;
    color: white;
    border-radius: 3px;
    padding: 20px;
    text-align: center;
}

Le fichier server.js

//https://blog.logrocket.com/multer-nodejs-express-upload-file/

const express = require('express');
const app = express();
const multer = require('multer');
// configuration de multer
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
})
const upload = multer({
    storage: storage
})


const path = require('path');
app.use(express.static(path.join(__dirname, './')))


app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// app.post('/upload_files', (req, res) => {
//     console.log(req.body);
// })
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})

app.post('/upload_files', upload.array("files"), (req, res) => {
    console.log(req.files);
    console.log(req.body);
    res.json({ message: "Files uploaded successfully" });
})

app.listen(3000, () => {
    console.log("Server is running on port 3000");
})

J’ai fourni les scripts, je commenterai le fichier server.js puisque tout se joue dans ce fichier.

• on utilise multer pour prendre en charge l’upload de fichier,
• la variable storage paramètre le fonctionnement du multer, répertoire de sauvegarde des fichiers, nommage des fichiers
• Pour servir index.html, on utiliser express.static, notez l’argument de path.join qui spécifie le répertoire du fichier index.html. express.static permet de servir les fichiers statiques (css, texte,html,javascript), il faut le dire explicitement.
• app.use(express.urlencoded({ extended: true })); est un middleware, qui va attacher à req.body (le corps de la requête) la parsing des éléments envoyé par le formulaire avec un enctype=application/x-www-form-urlencoded. Concernant extended:true, c’est juste un choix de librairie de parsing, si à true, va utiliser la librairie qs qui supporte la récursivité des objets, alors que extende:false va utiliser la librairie querystring, qui ne supporte par la récursivité.

app.use(express.urlencoded({ extended: true}));
{
  "username": "JohnDoe",
  "details": {
    "age": "30"
  }
}

app.use(express.urlencoded({ extended: false }));
{
  "username": "JohnDoe",
  "details[age]": "30"
}

Facilitons nous la vie avec nodemon

J’utilise systématiquement nodemon pour redémarrer le serveur nodeJS quand il y a une modification de fichier, c’est très pratique pour développer, on n’ pas besoin de redémarrer manuellmenet à chaque fois en ligne de commande : node server.js, à la place on fait nodemon server.js.

La librairie multer

Il y a beaucoup plus d’option sur la librairie multer que je n’ai montré dans ce post, je vous renvois vers la documentation officielle de multer. Multer est un middleware d’express, qui permet de sauvegarder les fichiers binaires envoyés. Autres propriétés intéressant : mimetype, size, originalName, fileFilter pour filtrer les types de fichier.

Débug d’une application NodeJS exécutée dans une fenêtre VSCode

Aller dans Debug (icône avec un insecte), cliquer sur le triangle vert, puis sélectionner NodeJS. Mettre un point d’arrêt (Breakpoint). Une barre d’outil apparaît permettant de naviguer dans l’exécution pas à pas. C’est le mode de débug le plus simple (en dehor de console.log bien sûr).

Débug d’une application NodeJS initié depuis le navigateur en s’attachant au process

Il s’agit de s’attacher à un process avec VSCode. Clonez le projet :

https://github.com/gtsopour/nodejs-shopping-cart

Il vous faut faire un fichier de configuration launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\src\\server.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

Ensuite placez un breakpoint, et recharchez la page correspondante.

la clé « request » a pour valeur « launch« , le debugger est lancé quand vous exécutez le programme. Par contre si vous avez déjà démarré avec npm run dev, et que vous voulez débugger, il faudra rattacher le debugger au process, on associera la valeur « attach« 

Dans ce cas le launch.json ressemblera à ça (pas de clé program !)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Node",
      "port": 9229,
      "restart": true,
      "protocol": "inspector",
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**/*.js"
      ]
    }
  ]
}

Dans le package.json, pour lancer le serveur on avait ça:

    "serve": "concurrently \"tsc -w\" \"nodemon dist/server.js\""

Il faut ajouter --inspect à nodemon !

    "serve": "concurrently \"tsc -w\" \"nodemon --inspect dist/server.js\""

Débug en lançant le process

Lors qu clic sur le triangle vert, assurez vous d’être sur Launch Program.

Debug en remote (depuis la production par exemple)

Débugger quand c’est Typescript

https://code.visualstudio.com/docs/typescript/typescript-debugging

Mettre en place le projet NodeJS dans l’insterface O2Switch (CPanel)

Aller depuis l apage d’accueil de Cpanel, vers la section « Logiciels », choisir Setup Node.js App

Dans la page de configuration de votre application NodeJS, cliquer sur « Create Application »

Remplir le champs version de NodeJS, le mode de déploiement (Productionà, le chemin absolu vers la racine, le startup file corresond au fichier d’entrée de votre application, celui auquel vous faite node nom_fichier.js.

Une fois la configuration validée, vous verrez cet écran.

Comment organiser votre projet Node/Expresse/React Typescript?

La difficulté est que dans mon cas j’avais deux répertoires, frontend et backend. Imaginons que notre nom de domaine soit cloneflickr.jedeploiemonappli.com, la page d’accueil doit correspondre à la route ‘/’ dans Express. Cependant on a aussi une application ReactJS

fff

Si vous avez lu le premier article concernant le bootstrapping d’un projet Node Express Typescript, je n’ai pas encore parlé de la connection de la dernière pièce qui est la base de données. Dans cet article je vais parler de la connexion à une base MySQL.

Installation des composants mysql2

npm install mysql2

npm install typeorm reflect-metadata

Ici on installe un ORM, mais on ne va pas forcément l’utiliser.

Connexion à la base de données

Installation de viteJS avec npm

D’abord installons ViteJS

npm create vite@4.1.0

// alternative pour installer la dernière version

npm create vite@latest

// répondez aux questions
? Project name: » nom_projet

>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others


// on sélectionne React puis on a l'écran suivant
>   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC

Sélectionnons Typescript simple


√ Project name: ... cloneflicker
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in E:\projet\frontend\cloneflicker...

Done. Now run:

  cd cloneflicker
  npm install    
  npm run dev 

A la fin de la configuration de votre projet, un petit rappel de ses caractéristiques et une suggestion de commandes.

Au lancement on a l’écran suivant :

  VITE v4.5.5  ready in 13692 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Vou spouvez CTRL + Click sur le lien pour lancer le site

Une des choses que vous allez remarquer le plus est la vitesse de lancement. C’est plus rapide qu’avec Webpack, la raison est que Vite optimise le build et ne construit pas tout, comme Webpack.

Structure du projet React Typescript

Le dossier public contient la page index.html qui va servir d’hôte à toute votre application React. Tandis que le dossier src contient tous les fichier de votre application React.

Le fichier tsconfig.json sert à configurer Typescript, le fichier vite.config.ts sert à introduire Vite,et n’oublions pas le fichier package.json.

Création de notre premier composant React en typescript !

Créons un fichier Message.tsx

function Message() {
    return <h1>Hello World</h1>;
}

export default Message;

Maintenant incorporons le dans App.tsx, effaçons le contenu par défaut de App.tsx pour simplifier notre construction.

import Message from './Message';

function App() {
  return <div>
    <Message />
  </div>
}

export default App

Au fur et à mesure que vous mettez à jour vos fichier, regardez la console, il y a le message

22:53:30 [vite] hmr update /src/App.tsx (x2)

Votre page s’est rafraichie.

Installation de Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

ça va générer deux fichiers de configuration tailwind.config.js et postcss.config.js. Remarquez que tailwindcss est une devDependency !

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Rajouter dans index.css ces lignes :

Modifier la class pour h1

function Message() {
    const name = 'Yvon';
    return <h1 className="text-4xl font-bold underline">Hello {name}</h1>;
}

export default Message;

@tailwind base;
@tailwind components;
@tailwind utilities;

Installation de Shadcn UI

Si vous préférez ne pas installer Tailwindcss, voici une alternative qui commence à bine être populaire au moment où j’écris ces lignes, c’est ShadCN. Selon la documentation d’installation de Shadcn, il faut installer quand même TailwindCSS, car le styling repose sur TailwindCSS

// installation de TailwindCSS
npm install tailwindcss @tailwindcss/vite


// vous serez amené à sélectionner un style
npm install @shadcn/ui


// pour ajouter un bouton, ceci va créer un fichier component.json, un répertoire
npx shadcn add button

// extrait du fichier component.json

....
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
...


// vous allez sans doute avoir une erreur avec Tailwindcss je ne sais pourquoi mais il doit réutiliser certaines choses, installez ce qui manque

@tailwind base;
@tailwind components;
@tailwind utilities;

Lors de l’installation de TailwindCSS, j’ai eu un soucis avec une version de Vite un peu ancienne, il fallait au moins la version de vite à 5.2 pour utiliser Shadcn. Plus d’information concernant component.json

npm install vite@^5.2.0

// mettre  à jour la peer dependency de react puisque le projet React a été démarré avec ViteJS

npm install @vitejs/plugin-react@latest

// si tout s'est bien passé refaites la commande
npx shadcn add button

Vous aurez potentiellement un message d’erreur du type

No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias.

Dans ce cas c’est le fichier tsconfig.json qu’il faut modifier, il faut dire à Typescript où sont les composants Shadcn.

// dans le section compilerOptions ajoutez ça : 

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

// le "." indique que le point de départ de résolution de chemin commence par là où le fichier tsconfig.json se situe (qui est la base du projet)

//en faisant ça vous pourrez avoir de beaux chemin d'import

import { MyComponent } from '@/components/MyComponent'

// au lieu de 

import { MyComponent } from '../../../components/MyComponent'

En refaisant la commande npx shadcn add button vous aurez un dossier component dans /src, et vous trouverez votre composant

Import du bouton généré

Vous ne pouvez sans doute pas encore importer correctement le bouton

// App.tsx
import { useState } from 'react'
import './App.css'
import { Button } from '@/components/ui/button'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Synapse Front</h1>
      <Button>Click me</Button>
    </div>
  )
}

export default App

// configuration complémentaire
// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})



// tsconfig.json  cette ligne permet le mapping des types Typescript pour node et vite
...
  "compilerOptions": {
    "types": [
      "vite/client",
      "node"
    ],

...

Lancer l’application accessible via votre mobile

> npm run dev -- --host



  VITE v4.5.5  ready in 830 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.22.80.1:5173/
  ➜  Network: http://172.18.96.1:5173/
  ➜  Network: http://192.168.1.151:5173/
  ➜  press h to show help

Pour pouvoir utilise vite --host, il faut l’installer globalement.

Changer le répertoire de build pour vite

Par défaut vite build dans le répertoire dist. Ce répertoire sert pour la production, en phase de développement, il n’est pas généré. Pour avoir le build dans le répertoire build, il faut modifier vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build', // Spécifie ici le répertoire de sortie
  },
})

L’attribut build n’apparait dans le fichier originel.

Ce tuto montre comment bootstraper un projet NodeJS avec la base de donnée MySQL

Installation de NodeJS et NPM

Pour l’installation, il suffit de télécharger NodeJS (la dernière version) NPM sera disponible automatiquement.

Installation de Express

Express est un framework MVC fait pour NodeJS, c’est l’équivalent de Symfony pour le PHP. Créez un répertoire pour votre projet

npm init   // pour initialiser le package.json

Installation des packages pour le projet

npm i dotenv
npm i express
npm i mysql

Code minimal pour se connecter à la base de donnée:

On veut vérifier avant de continuer plus loin que la connexion se fait sans problème.

#index.js
const express = require('express')
const app = express()
require("dotenv").config()
var mysql = require('mysql');


app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

const DB_HOST = process.env.DB_HOST
const DB_USER = process.env.DB_USER
const DB_PASSWORD = process.env.DB_PASSWORD
const DB_DATABASE = process.env.DB_DATABASE
const DB_PORT = process.env.DB_PORT

var con = mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASSWORD,
    port: DB_PORT
});
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
});

Code générique pour requêter dans une table

var con = mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASSWORD,
    port: DB_PORT
});
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
});

Installer nodemon pour recharger au changement de fichier

npm install --save-dev nodemon
pour lancer avec nodemon à la place de node
./node_modules/.bin/nodemon index.js