Projet numérologie : partie 2 / mise en place front

Cours/Web/Projet numérologie/Projet numérologie / partie 2 serveur/Projet numérologie : partie 2 / mise en place front

Mise en place du serveur express pour le site.

Préparation

Pour l'instant, notre projet ressemble à ça :

.
├── index.html
├── main.css
├── mes_tests.js
└── numérologie.js

Qui correspond peu ou prou à la partie front de notre serveur. Rendons ceci explicite en déplaçant nos fichier dans un dossier static.

Fichiers static

supprimer le fichier mes_tests.js qui ne nous sers plus
déplacer les fichiers index.html, main.css et numérologie.js dans un dossier static
créer un fichier vide index.js à la racine du projet pour simuler notre serveur.

On obtient la structure classique d'un serveur web en node :

.
├── index.js
└── static
    ├── index.html
    ├── main.css
    └── numérologie.js

On vérifie que le front n'est pas cassé en ouvrant le fichier index.html avec notre navigateur.

Packages Express

Il nous reste à préparer la partie serveur en mettant en place node et express.

Dans le dossier numérologie :

initialisation du projet en tapant la commande : npm init
ajouter la ligne "type": "module", dans le fichier de configuration package.json pour utiliser la gestion javascript des modules plutôt que celle de node
ajout du package express et sauvegarde dans le fichier de configuration package.json : npm add --save express

Routes

On reprend le code de la partie server express pour notre site, uniquement en front pour l'instant :

import { fileURLToPath } from 'url';
import path from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

import express from 'express'

const app = express()

const hostname = '127.0.0.1';
const port = 3000;

app.use("/static", express.static(path.join(__dirname, '/static')))

app.get('/', (req, res) => {
    res.redirect(301, '/static/index.html')
})


app.use(function (req, res) {
    console.log("et c'est le 404 : " + req.url);

    res.statusCode = 404;
    res.setHeader('Content-Type', 'text/html');

    res.end("");

})

app.listen(port, hostname);
console.log(`Server running at http://${hostname}:${port}/`);

Mise en place des fichiers

Le projet ressemble maintenant à ça :

.
├── index.js
├── node_modules
|   └── ...
├── package-lock.json
├── package.json
└── static
    ├── index.html
    ├── main.css
    └── numérologie.js