DEV Community

Sid Ali BENTIFRAOUINE
Sid Ali BENTIFRAOUINE

Posted on • Edited on

3 3

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!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (2)

Collapse
 
thomasbnt profile image
Thomas Bnt

Très sympa! 🚀

Collapse
 
sidali profile image
Sid Ali BENTIFRAOUINE

Merci Thomas!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay