DEV Community

Abdelkarim AIN
Abdelkarim AIN

Posted on

Comment héberger une application Express sur Vercel

La semaine dernière, j'ai dû héberger une application Express simple quelque part, et j'ai choisi Vercel en raison de son excellente expérience pour les développeurs.


Voici les étapes que j'ai suivies pour y parvenir :

Tout d'abord, nous devons créer un répertoire de projet. J'ai décidé de l'appeler vercel-express et de changer ensuite le répertoire vers ce nouveau répertoire créé.

# Créer un répertoire
mkdir vercel-express

# Changer de répertoire
cd vercel-express
Enter fullscreen mode Exit fullscreen mode

Ensuite, nous initialisons git et ajoutons le répertoire node_modules à .gitignore.

# Initialiser git
git init

# Ajouter le répertoire `node_modules` à `.gitignore`
echo node_modules >> .gitignore
Enter fullscreen mode Exit fullscreen mode

Ensuite, nous configurons un nouveau package. Nous utilisons le drapeau -y pour éviter le questionnaire.

npm init -y
Enter fullscreen mode Exit fullscreen mode

Ensuite, nous allons créer un fichier index.js et le remplir.

# Créer un nouveau fichier `index.js`
touch index.js
Enter fullscreen mode Exit fullscreen mode
// ./index.js
const express = require('express')

const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello, Vercel!')
})

app.listen(port, () => {
  console.log(`Application Express hébergée sur Vercel écoutant sur le port ${port}`)
})
Enter fullscreen mode Exit fullscreen mode

Après avoir rempli les fichiers index.js et vercel.json, nous pouvons mettre en scène tous les fichiers et les valider.

git add -A && git commit -m "Premier commit"
Enter fullscreen mode Exit fullscreen mode

Si vous souhaitez changer le nom de la branche principale de master à main, exécutez simplement la commande git branch -m master main.

Pour pousser du code vers le dépôt existant, suivez le code suivant.

git remote add origin https://github.com/username/code_repo.git
git branch -M main
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Le fichier de configuration Vercel inclut des propriétés héritées, mais il fonctionne parfaitement au moment de la rédaction de cet article. Peut-être que dans le futur, je mettrai à jour le tutoriel avec les propriétés recommandées.

Top comments (0)