DEV Community

Sid Ali BENTIFRAOUINE
Sid Ali BENTIFRAOUINE

Posted on • Updated on

Développer une API Rest avec NodeJS, Express et MongoDB: #2 Mon premier serveur

Maintenant que j'ai préparé mon projet ExpressJS, je peux m'ateler à créer mon premier serveur.

Toujours dans mon terminal, sous le dosser blitz-node/ ou un autre nom si jamais t'as choisis autre chose que ce que je propose (bravo!).

Sous Visual Studio Code, je crée un fichier server.js. Je mets ce code-ci:

// 1. J'importe ExpressJS ainsi que JSON
import express, { json } from "express"

// 2. J'initialise une nouvelle application Express
const app = express()

// 3. J'utilise le plugin JSON 
// permet de renvoyer des JSON stylés
// plutot que des chaines de caracteres éclatées au sol
app.use(json())

// 4. Lorsque quelqu'un (ou quelqu'une) fait appel à `/`
// comme `http://MON_IP:PORT/`, alors je fais ci et ca
app.get("/", (request, response) => {
  response.statusCode = 200
  response.send({ message: "Mon premier JSON!" })
})

// 5. J'attache mon serveur à un port: le `3000`,
// ca aurait pu etre n'importe quoi d'autre, 1234, 6969 (hhhum...)
app.listen(3000, () => {
  console.log(`Server Started at http://localhost:${3000}`)
})
Enter fullscreen mode Exit fullscreen mode

Maintenant, je vais faire une petite mondification au fichier package.json

Le package.json permet de faire tout un tas de trucs assez sympas:

  • Lister mes dépendances comme ca je n'ai pas a me trimbaler un dossier à la con avec mes dependances
  • Configurer des libraries
  • Nom, infos (osef)
  • Ma préférée, faire des scripts custom.

Allez, j'ajoute un nouveau script pour démarrer mon serveur:

 "scripts": {
    "start": "nodemon server.js"
  },
Enter fullscreen mode Exit fullscreen mode

Ca ressemble à ca du coup:

{
  "name": "blitz",
  "version": "1.0.0",
  "scripts": {
    "start": "nodemon server.js"
  },
  "dependencies": {
    "dotenv": "^16.0.2",
    "express": "^4.18.1",
    "mongoose": "^6.5.4",
    "nodemon": "^2.0.19"
  },
  "type": "module"
}
Enter fullscreen mode Exit fullscreen mode

Maintenant je peux aller repartir dans mon terminal et lancer tout ce beau monde 🚀:

npm start
Enter fullscreen mode Exit fullscreen mode

J'ai ca dans mon terminal du coup:

Image description

Nickel, je ne touche à rien, mon serveur tourne normalement, je peux visiter http://localhost:3000, j'ai ca:

Image description

Pour avoir ce joli formatage, au lieu de ca (eurrk):

Image description

J'utilise cette extension: JSON Formatter

Ce qui se passe du coup c'est ceci:

Image description

Allez on en rajoute juste une pour la route, mais sans expliquer, un petit peu comme le à suivreà la con dans les séries.

J'ajoute ce bout de code dans mon server.js:

app.get("/champions", (request, response) => {
  response.statusCode = 200
  response.send([{ name: "Graves" }, { name: "Rengar" }])
})
Enter fullscreen mode Exit fullscreen mode

Du coup ca donne ca:

import express, { json } from "express"

const app = express()

app.use(json())

app.get("/", (request, response) => {
  response.statusCode = 200
  response.send({ message: "Mon premier JSON!" })
})

app.get("/champions", (request, response) => {
  response.statusCode = 200
  response.send([{ name: "Graves" }, { name: "Rengar" }])
})

app.listen(3000, () => {
  console.log(`Server Started at http://localhost:${3000}`)
})
Enter fullscreen mode Exit fullscreen mode

Vu que j'ai installé nodemon, je serveur va se refresh automatiquement.

Alors si j'anticipe bien, je dois-m'attendre à la reponse que si je vais sur http://localhost:3000/champions ?

C'est exactement ca!

Image description

Allez, on se revois dans la suite: #3 Les verbes HTTP!

Top comments (2)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Très sympa! 🚀

Collapse
 
sidali profile image
Sid Ali BENTIFRAOUINE

Merci Thomas!