Contenu
Bootstrapping du projet Node Express
Avec NodeJS, il existe plusieurs façon de faire une application web
#créer le répertoire de projet mkdir nodeexpressts # initaliser le projet en répondant oui à tout npm init -y
npm init -y // dit oui à tout
{
"name": "nodeexpressts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
// Ensuite créer un fichier index.js pour commencer
touch index.js
ouvrir VSCode dans ce répertoire projet
code .
On va installer Express
npm install express
On va code le fichier index.js
//index.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}!`);
});
Passons à Typescript !
Installation de Typescript
npm install typescript
Ensuite renommons le fichier index.js en index.ts !
En survolant les variable maintenant vous allez voir que pas mal de variable sont de type any, ça prouve qu’on est passé nen mode Typescript.
Installaton des fichier de type pour nodeJS et Express
npm install @types/express @types/node
modification des façons d’importer
Dans Typescript on n’utilise pas require mais import
import express, { Express, Request, Response } from 'express';
const app: Express = express();
const port = process.env.PORT || 3000;
app.get('/', (req: Request, res: Response) => {
res.send('Hello World! in Typescript Now'); // modifié
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}!`);
});
A ce stade en survolant la varaible express, on voit que c’est typé.
Illustration, vous ne pouvez pas mettre n’importe quoi avec la notation pointée, si l’objet ne possède pas la méthode, vous aurez une erreur.
app.toto << erreur souligné en rouge dans VSCode
Pour aller plus loin dans le typage et aider Typescript à savoir de quel type est une varaible on postfix avec les deux point
app.get('/', (req : Request, res : Response) => {
res.send('Hello World!');
});
démarrage du serveur sour Typescript
Nous devons transpiler le Typescript en Javascript avant de démarrer le serveur. Invoquons tsc
npx tsc --init // npx si on n'a pas tsc en global
Created a new tsconfig.json with:
TS
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
You can learn more at https://aka.ms/tsconfig
Un fichier tsconfig.json est apparu, pour configurer la manière dont Typescript sera transpilé par exemple. Nous devons indiqué où se trouvent les fichier Js de sortie, ouvrons ce fichier
"outDir": "./dist"
Pour transpiler taper simplement npx tsc ou tsc (si on a installé en global, vérifiez le)
tsc un répertoire dist est apparu, regarez le contenu ce sont des fichiers JS. Maintenant pour démarrer nodeJS node dist/index.js
Faisons comme les pro, commetn avoir npm build par exemple
Ouvron spackage.json et configurons l’objet scripts:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc",
"start": "node dist/index.js"
},
Modifions le script
app.get('/', (req: Request, res: Response) => {
res.send('Hello World! in Typescript Now WITH NPM RUN');
});
Et en ligne de commande faisons
npm run build > nodeexpressts@1.0.0 build > tsc //puis npm run start
Installons Nodemon ! (en devDependencies)
npm install -D nodemon
Maintenant ça va redémarrer à chaque fois qu’on va modifier un fichier.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc",
"start": "node dist/index.js",
"dev": "tsc -w & nodemon dist/index.js"
},
npm run dev
Le & simple va exécuter en background
Il se peut que ça ne marche pas, en effet le & tout seul n’est pas une commande Windows mais Linux. Remplacer par :
"dev": "tsc -w && nodemon dist/index.js
il est probable que ça ne marche pas non plus, car tsc -w (w comme watch) peut ne pas rendre la main à nodemon. Dans ce cas il faut installer concurrently
npm install concurrently --save-dev
"dev": "concurrently \"tsc -w\" \"nodemon dist/index.js\""
C’est un peu lourd comme syntaxe mais ça devrait résoudre vos problèmes.
Nettoyer le dossier dist avec rimraf
Si on veut s’assurer que le dossier soit entièrement nettoyer, on va installer rimraf (comme rm -rf !)
npm i -D rimraf
puis on modifie package.json
"build": "rimraf dist &&tsc",
Mettez un fichier dans dist puis exécutez npm run build, le fichier va disparaître. Modifions le script pour ajouter un prestart et preserve, (et renommer dev en serve), qui vont simplement nettoyer le répertoire dist.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf dist &&tsc",
"prestart": "npm run build",
"start": "node dist/index.js",
"preserve": "npm run build",
"serve": "concurrently \"tsc -w\" \"nodemon dist/index.js\""
},
En lançant npm run serve, c’est preserve qui est lancé en premier.
Ce tuto est inspiré de cette vidéo Youtube