DEV Community: AreAtomic

Créer un serveur Node.js avec Express.js

AreAtomic — Mon, 24 Jan 2022 16:17:08 +0000

Dans le développement web une stack est une combinaison de technologie, la MERN stack est une des combinaison les plus populaire en 2022. Cette stack se compose de :

Mongo DB
Express.js
React.js
Node.js

Nous allons voir comment aborder cette stack en commençant par la configuration d'un serveur Node.js avec le framework Express.js relié à une base de données Mongo DB.

Express

Express est un framework Node.js minimaliste et flexible, il est du fait facile d'utilisation et laisse une certaine liberté au développeur. Il permet notamment de créer des API à l'aide d'une floppée de méthodes HTTP.

Mongo DB

Mongo DB est un gestionnaire de base de données NoSQL. Pour plus de détail. Vous pouvez créer un compte si vous n'en avez pas. Une fois le compte créé, vous allez pouvoir créer votre premier cluster en sélectionner l'option FREE, then choose the options you want and clic Create cluster.

Après cela vous allez devoir créer les identifiants pour accéder à votre base de données. Notez les bien.

Enfin définnisez les adresses IP pouvant accéder au projet:

Phase de développement

1. Initialisation du projet

2. Instalation des packages

3. Configuration de l'environnement

4. Configuration de la base de données

5. Initialisation du server

6. Configuration des routeurs

Initialisation du projet

La première étape pour créer un serveur Express.js est d'initialiser un projet npm. Pour en savoir plus sur npm. Pour cela il faut créer un dossier server et ensuite taper la commande npm init à l'intérieur :

mkdir express-server-article
cd express-server-article
npm init -y

// RESULT
Wrote to C:\Users\aurel\Documents\Areatomic\Livre\articles\express-server-article\package.json:

{
  "name": "express-server-article",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Installation des packages

Maintenant que le projet est configurer nous devons installer les packages nécessaires à son fonctionnement. Pour réaliser un serveur express basique nous avons besoin des packages suivant:

express : permet de construire la base du serveur
mongoose : permet d'utiliser une base de données Mongo DB
config : permet de configurer proprement notre projet
dotenv : permet de configurer notre environnement
cors : permet de définir une politique de restriction d'accès au serveur
nodemon : permet de lancer un serveur que se relance automatiquement à la sauvegarde.
prettier : permet de définir des règles de formatage de code

L'installation de ces packages se fait à l'aide de la commande npm install:

npm install express mongoose config dotenv cors nodemon prettier

Rajouter ensuite le script

"start":"nodemon index.js

dans le fichier package.json.
Au final le fichier


 doit ressembler au code ci-dessous:


```JSON
{
  "name": "express-server-article",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "config": "^3.3.7",
    "cors": "^2.8.5",
    "dotenv": "^14.2.0",
    "express": "^4.17.2",
    "mongoose": "^6.1.7",
    "nodemon": "^2.0.15",
    "prettier": "^2.5.1"
  }
}

Configuration de l'environnement

L'environnement est un élément essentiel au fonctionnement d'un serveur. Nous pouvons le configurer grâce à un fichier


. Nous y définissons la base de données, le port sur lequel tourne le serveur, la whitelist pour les options CORS, etc.

PORT=5000
DATABASE=mongodb+srv://areatomic:jaihackermongodb@aeratomic.onbwm.mongodb.net/express-server-article?retryWrites=true&w=majority
WHITELIST=['http://localhost:3000']
SERVER_URL=http://localhost:5000



Vous pouvez récupérer le lien connexion à la base de données en cliquant sur le bouton connect de votre cluster puis en copiant les éléments dans l'onglet "Connect your application".

## Configuration de la base de données <a id="configuration-de-bdd"></a>
Pour connecter notre base de données fraichement créée, nous allons réaliser cela dans un dossier

 ```config```

 et dans un fichier

 ```index.js```

.
![Arbre config](https://i.postimg.cc/KvHLq7NR/2022-01-24-16-39-16-index-js-Livre-Visual-Studio-Code.png)

Voici ce que contient le fichier

 ```index.js```

:


```JavaScript
/**
 * Config .env
 */
 const dotenv = require('dotenv')
 const mongoose = require('mongoose')
 dotenv.config()

 /**
  * Config mongo
  */
 const connectDB = async () => {
     try {
         await mongoose.connect(process.env.DATABASE, {
             useNewUrlParser: true,
             useUnifiedTopology: true,
         })
         console.log('Connection to Mongo DB done')
     } catch (err) {
         console.error(err.message)
         // Exit process with failure
         process.exit(1)
     }
 }

 module.exports = connectDB

Nous créons une fonction connectDB asynchrone (qui utilise des méthode nécessistant d'attendre un retour) dans laquelle nous utilisons la méthode connect avec l'URL renseigner dans notre fichier


.

## Configuration du serveur <a id="configuration-de-server"></a>
Maintenant que nous avons configurer notre environnement et notre base de données, il ne reste plus qu'à configurer la base du serveur. Pour cela créer un fichier

 ```index.js```

 à la racine du projet.

Première étape importer les packages :


```JavaScript
const express = require('express')
const cors = require('cors')
const dotenv = require('dotenv')
const connectDB = require('./config')

Seconde étape lecture des configurations:

 dotenv.config()
 //Database
 connectDB()

Troisième étape lancement du serveur à proprement parler :

const app = express()
app.listen(process.env.PORT, () => {
    console.log(`API is running on ${process.env.SERVER_URL}`)
})

Enfin définition des sécurités du serveur:

 app.use(express.json({ extended: false }))
 // CORS
 app.use(
     cors({
         origin: (origin, callback) => {
             if (!origin) return callback(null, true)
             if (process.env.WHITELIST.indexOf(origin) === -1) {
                 let message =
                     "The CORS policy for this origin doesn't " +
                     'allow access from the particular origin.'
                 return callback(new Error(message), false)
             }
             return callback(null, true)
         },
     })
 )

Une fois que cela est terminé le fichier ressemble à cela:

const express = require('express')
const cors = require('cors')
const dotenv = require('dotenv')
const connectDB = require('./config')

/**
 * Config serveur
 */
 dotenv.config()
 //Database
 connectDB()

 //Serveur
 const app = express()
 app.listen(process.env.PORT, () => {
     console.log(`API is running on ${process.env.SERVER_URL}`)
 })
 app.use(express.json({ extended: false }))
 // CORS
 app.use(
     cors({
         origin: (origin, callback) => {
             if (!origin) return callback(null, true)
             if (process.env.WHITELIST.indexOf(origin) === -1) {
                 let message =
                     "The CORS policy for this origin doesn't " +
                     'allow access from the particular origin.'
                 return callback(new Error(message), false)
             }
             return callback(null, true)
         },
     })
 )

Le projet peut être lancé avec la commande

PS C:\Users\aurel\Documents\Areatomic\Livre\articles\express-server-article> npm start
// OUTPUT

> express-server-article@1.0.0 start
> nodemon index.js

[nodemon] 2.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
API is running on http://localhost:5000
Connection to Mongo DB done

Configuration des routes

Enfin pour finaliser la construction de notre serveur nous allons définir une route par défaut. Pour cela créer une dossier


 avec un sous-dossier

 ```routes```

 et un sous-dossier

 ```controller```

 pour vos futur projets. Dans le dossier

 ```routes```

 créer un fichier

 ```index.js```

:


```JavaScript
//* Import des modules *//
const express = require('express')
const router = express.Router()

//* Création de la routes *//
router.get('/', (req, res) => {
    res.send('API is running.')
})

// Export
module.exports = router

Une fois le fichier créer il faut l'importer et l'utiliser dans le fichier


 à la racine du projet:


```JavaScript
/* ... Other imports */
const routes = require('./api/routes');
/**
 * Config serveur
 */
/* ... Le reste du fichier */
app.use('/', routes);

En vous rendant sur l'url http://localhost:5000 vous verez écris "API is running." Félicitations !

Mongo and Node.js on local instance

AreAtomic — Thu, 17 Jun 2021 07:24:50 +0000

Use MongoDB locally

To do

For the MERN stack it can be great to use MongoDB locally. Mainly if your company proxy does not accept to run on cloud. To install MongoDB on local there is three main steps :

Download the installer
Install on local without services
Create databases for test

Download the installer

First step, the easiest one but it can be confusious. The server installer can be found at the following link https://www.mongodb.com/try/download/community. It will allow you to install mongo.exe (the mongo shell), mongod.exe (the mongo server), mongos.exe.

Installation

This one can be various following your needed. I will explain you how to install on Windows without services.
Firstly we will execute the installer and decoche the "Install MongoDB as a Service"

Click next, and choose to install MongoDB Compass to have graphical tool for your databases.

First use of MongoDB locally

Create the database

For this step we will use MongoDB Compass. Open the service and connect it to your local server.

Once your are connected you can create your first database. Click on

CREATE DATABASE

name it as you want.

Database Name : myDatabase

Collection Name : users

Note: all MongoDB collections needs a s at the end.

Connect your Node.js server

Note: For this step we will simplify the configuration to make it easy but that does not respect best pratices of express configuration.

On your index.js file you will need to create your express instance and your mongoose connection.

const express = require('express')
const mongoose = require('mongoose')
const db = "mongodb://localhost:27017/myDatabase"

// Connection function
const connectDB = async () => {
    try{
        await mongoose.connect(db, {
            useNewUrlParser: true,
            useCreateIndex: true,
            useFindAndModify: false,
            useUnifiedTopology: true,
        })

        console.log('MongoDB successfully connected') 
    } catch (err) {
        console.error(err.message)
        process.exit(1)
    }
}

// Create server instance
const server = express()

// Creation of connection
connectDB()

// Import your routers
server.use('/api', require('./routes/root'))

That's done you know how to create an local instance of MongoDB and to make your Node.js server running on it.

Authentification

AreAtomic — Tue, 15 Jun 2021 06:52:49 +0000

React authentication

To-do

Les choses à faire pour avoir une authentification fonctionnelle :

Formulaire pour envoie du mot de passe et du nom d'utilisateur
Un système de vérification nom d'utilisateur / mot de passe
Un moyen de stocker le userId dans le client

Formulaire

Le formulaire doit contenir un nom d'utilisateur ou adresse mail, combiner avec un mot de passe.

Ces inputs doivent être envoyé au back à l'aide d'axios ou de fetch. La requête doit envoyer avec la méthode POST sur l'url défini au niveau de votre API.

fetch(
    'http://auth-react.com/api/login',
    {
        email: email,
        password: password
    },
    headers : myHeaders,
    method: POST
)

Vérification

Dans le routeur qui est appelé par le formulaire une vérification de la concordance utilisateur/mot de passe doit être faites.

Exemple avec une base de données mongodb

const express = require('express')
const router = express.Router()

router.post('/login', async(req, res) => {
    const {email, mot_de_passe} = req.body

     try {
         // Recherche d'un utilisateur dans la base de données
        let utilisateur = await Utilisateur.findOne({ email })

        // Aucun utilisateur trouvé
        if (!utilisateur) {
            return res.status(400).json({ error: "L'email est invalide" })
        }

        if (mot_de_passe != utilisateur.mot_de_passe) {
            return res.status(400).json({ error: 'Mot de passe invalide' })
        }

        return res.status(200).json({
            id: utilisateur.id,
            nom: utilisateur.nom,
            prenom: utilisateur.prenom,
        })
    } catch (err) {
        res.status(500).json({ error: 'Serveur erreur' })
    }
})

Remarque : si le mot de passé est chiffre ou hasher il faut passer à utiliser la méthode de comparaison de l'outil de chiffrement/hashage utilisé

Stockage

Une fois que la requête nous retourne l'utilisateur connecté, il suffit de placer le userId et les autres informations nécessaires dans le sessionStorage.

sessionStorage.setItem('user', JSON.stringify(response.data))

Remarque: la création de la variable de session se fait dans le then de la requête fetch ou axios.