TheLazy.Dev
Portfolio GitHub

Blog

javascript |french |tutorial |mern

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

areatomic

AreAtomic

Posted on January 24, 2022

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

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.
Mongo DB cluser selection
Après cela vous allez devoir créer les identifiants pour accéder à votre base de données. Notez les bien.
Mongo DB account config
Enfin définnisez les adresses IP pouvant accéder au projet:
Mongo DB Atlas access

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

Seconde étape lecture des configurations:

 dotenv.config()
 //Database
 connectDB()
Enter fullscreen mode Exit fullscreen mode

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}`)
})
Enter fullscreen mode Exit fullscreen mode

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)
         },
     })
 )
Enter fullscreen mode Exit fullscreen mode

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)
         },
     })
 )
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
areatomic
AreAtomic

Posted on January 24, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

January 24, 2022