Dans cete vidéo, on voit un exemple de site web de portfolio moderne fait en tailwindcss et express.js

Salut à tous ! J'espère que vous allez bien. Pour mon tout premier article sur mon blog, j'ai décidé de vous montrer comment créer un portfolio en utilisant Node.js, Express, EJS et TailwindCSS afin de partager vos travaux en ligne. En 2023, avoir un portfolio est devenu indispensable, surtout pour les développeurs, car il ouvre de nombreuses opportunités. Mon blog sera principalement axé sur le développement web et la réalisation de projets, donc vous aurez besoin d'un portfolio pour présenter les projets que nous allons créer ensemble.

Dans ce tutoriel, nous verrons comment envoyer des fichiers HTML (EJS) en utilisant Node.js, écrire des routes et créer un serveur avec Express.js. C'est avec cette méthode que j'ai développé ce modèle. Si vous souhaitez télécharger le template avec le server express et tailwindcss et le mettre en ligne vous-même, je vous invite à le faire avec la boite ci-après et je vous enverrai votre copie dans votre boîte de reception.

Pourquoi Node.js - Express - EJS - TailwindCSS ?

Node.js est l'environnement d'exécution JavaScript le plus populaire, basé sur le moteur V8 de Chrome. Express est le framework web le plus utilisé pour Node.js. EJS nous permet d'écrire du HTML avec du JavaScript dans nos fichiers HTML, cela rendra nos pages dynamiques de manière simple et efficace. Il est facile à apprendre et permet d'écrire un code réutilisable. Enfin, TailwindCSS est l'un des frameworks CSS les plus populaires, qui nous permet d'ajouter du style à nos fichiers HTML sans quitter notre flux de travail. Cette combinaison de technologies permettra le rendu côté serveur, ce qui est un avantage considérable pour le référencement.

Prérequis

Avant de commencer, il est essentiel d'avoir une connaissance de base en JavaScript. Si ce n'est pas le cas, vous pouvez en apprendre davantage sur le site de MDN. Vous devez également avoir Node.js installé sur votre machine. Dans ce tutoriel, toutes les fonctionnalités que j'utilise sont basées sur la version 16.x.x de Node.js. J'utiliserai également VSCode comme éditeur, mais vous pouvez choisir l'éditeur de votre choix en fonction de vos préférences.

Projet

Pour créer un projet Node.js, commencez par l'initialiser avec npm, le gestionnaire de paquets de Node.js. Après avoir installé Node.js, npm est également installé. Vous pouvez vérifier si npm est installé en exécutant la commande suivante :

npm --version

Si c'est le cas, sa version s'affichera dans votre terminal. Sinon, vous devrez installer npm. Ensuite, créez un dossier pour votre projet, que ce soit manuellement ou en utilisant les commandes suivantes :

pwd # affichera votre emplacement actuel
cd ... # remplacez ... par le chemin du dossier dans lequel vous souhaitez placer le projet actuel
mkdir portfolio
cd portfolio

Pour initialiser le projet, exécutez la commande suivante :

npm init -y

Cette commande créera un fichier package.json. Dans tous les projets Node.js, vous trouverez toujours ce fichier, qui contient des informations essentielles sur le projet, telles que le nom du projet, sa licence et les dépendances utilisées. Le paramètre -y permet de définir des valeurs par défaut pour les informations du projet, mais vous pouvez toujours les modifier dans le fichier package.json ou en relançant la commande sans le -y.

Installation des dépendances

Pour installer les dépendances dont nous avons besoin, notamment Express, utilisez npm :

npm i express ejs

npm i -D tailwindcss autoprefixer postcss postcss-cli

Notez que l'option -D dans la deuxième commande est utilisée pour installer les dépendances dont nous avons besoin uniquement en développement.

Création du serveur

Créez un fichier server.mjs avec la commande suivante :

touch server.mjs

Ce fichier contiendra la logique de notre serveur Node.js avec Express. Voici un exemple de code pour démarrer votre serveur :

import express from 'express'

const PORT = process.env.PORT || 3000
const app = express()

// Une route pour la page d'accueil
app.get('/', (req, res) => res.send('Notre serveur est en ligne'))

app.listen(PORT, () => console.log(`Le serveur est en marche sur le port ${PORT}`))

Félicitations ! Vous avez créé un serveur Node.js simple avec Express qui écoute sur une seule route et renvoie une chaîne de caractères. Pour démarrer le serveur, nous allons apporter quelques modifications à notre fichier package.json pour éviter de taper manuellement toutes les commandes la prochaine fois. Ajoutez les scripts suivants dans la section "scripts" de votre fichier package.json :

...
"scripts": {
  "dev": "nodemon server.mjs",
  "start": "node server.mjs"
}
...

Enregistrez toutes vos modifications, puis dans le terminal, lancez le serveur en mode "dev" avec la commande suivante :

npm run dev

Si vous avez suivi toutes les étapes précédentes, le serveur devrait être en cours d'exécution et accessible à l'adresse http://localhost:8080.

Les routes

Allons un peu plus loin en ajoutant de nouvelles routes.

Les routes dans notre serveur correspondent aux chemins que les utilisateurs saisissent dans leurs navigateurs pour accéder à notre site. Supposons que votre site soit accessible via le domaine : https://blog.gederooney.com. Lorsque les utilisateurs visitent ce lien dans leur moteur de recherche, c'est vers votre serveur qu'ils sont dirigés. Si un utilisateur visite précisément https://blog.gederooney.com/contact, votre serveur cherchera à répondre à la route /contact. Ainsi, toutes les informations après votre nom de domaine dans une requête doivent correspondre à une route, sinon le serveur renverra une erreur "not found" (404).

Maintenant que vous avez une idée de ce qu'est une route sur un serveur, créons-en pour notre portfolio. Pour maintenir un code propre, nous allons créer un nouveau dossier spécifique pour les routes. Dans le terminal, exécutez les commandes suivantes :

mkdir routes
touch routes/index.mjs

Ces commandes créeront un dossier routes dans votre projet et ajouteront un fichier index.mjs à l'intérieur. Notre portfolio comportera quatre routes : accueil, projets, contact et blog. Dans le fichier routes/index.mjs, ajoutez le code suivant :

import { Router } from 'express'

const routes = Router()

// Route pour la page d'accueil
routes.get('/', (req, res) => {})

// Route pour la page projets
routes.get('/projets', (req, res) => {})

// Route pour la page blog
routes.get('/blog', (req, res) => {})

// Route pour la page contact
routes.get('/contact', (req, res) => {})

export default routes

Pour utiliser ces routes dans notre serveur, importez-les et enregistrez-les dans le fichier server.mjs comme suit :

import express from 'express'
import routes from './routes/index.mjs'

const PORT = process.env.PORT || 3000
const app = express()

// Utilisation des routes
app.use(routes)

app.listen(PORT, () => console.log(`Le serveur est en marche sur le port ${PORT}`))

Nos routes sont définies et enregistrées dans notre serveur, mais elles ne renvoient encore rien. Avant d'aller plus loin, je veux m'assurer que vous comprenez bien ces principes que nous venons de voir. Nous avons créé un serveur Express.js qui écoute sur un port et défini quatre routes GET dans un fichier séparé, que nous avons ensuite enregistrées dans le serveur Express. Si ce n'est pas le cas, recommencez la lecture ou faites plus de recherche sur le sujet pour comprendre d'avantage.

EJS

EJS (Embedded JavaScript) est l'une des dépendances que nous avons déjà installées dans le projet. EJS est un moteur de templates simple et populaire pour Node.js, qui nous permet d'utiliser du JavaScript directement dans les fichiers HTML pour générer du contenu dynamique. Pour nos vues, nous allons configurer EJS dans notre server.

Commençons par créer un dossier views dans lequel nous placerons toutes les pages de notre site :

mkdir views
touch views/projets.html views/index.html views/blog.html views/contact.html

Dans ces pages, nous avons ajouté le code suivant. Pour aller plus vite, nous allons simplement utiliser des fichiers HTML simples. Si vous souhaitez télécharger le code complet du portfolio que j'ai montré plus haut, vous pouvez le faire ici.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>
  <body>
    <header class="flex justify-center w-full py-1.5">
      <ul class="flex items-center justify-center w-full gpa-4">
        <li>
          <a href="/">Accueil</a>
        </li>
        <li>
          <a href="/blog">Blog</a>
        </li>
        <li>
          <a href="/projets">Projets</a>
        </li>
        <li>
          <a href="/contact">Contact</a>
        </li>
      </ul>
    </header>
    <h1 class="text-6xl font-bold text-gray-900"><%= pageName %></h1>
  </body>
</html>

Ce sont des fichiers HTML avec quelques classes TailwindCSS. Nous avons défini des variables car EJS nous le permet. Cela nous donne la possibilité d'ajouter plus de logique dans ces fichiers pour créer des pages web dynamiques. Par exemple, imaginez que vous ayez une page sur le site qui doit présenter chacun de vos projets. Au lieu de créer une page pour chaque projet, vous pouvez en créer une commune à tous vos projets et afficher les données de chaque projet de manière dynamique avec EJS. Je vous invite à en lire plus sur EJS pour comprendre comment fonctionne ce moteur de templates.

Modifions un peu la logique de nos routes pour que ces fichiers soient rendus. Dans le fichier routes/index.mjs, modifiez le code comme suit :

import { Router } from 'express'

const routes = Router()

// Route pour la page d'accueil
routes.get('/', (req, res) => {
  return res.render('index', {
    title: 'Accueil - Gederooney',
    pageName: 'Accueil',
  })
})

// Route pour la page projets
routes.get('/projets', (req, res) => {
  return res.render('projets', {
    title: 'Projets - Gederooney',
    pageName: 'Projets',
  })
})

// Route pour la page blog
routes.get('/blog', (req, res) => {
  return res.render('blog', {
    title: 'Blog - Gederooney',
    pageName: 'Blog',
  })
})

// Route pour la page contact
routes.get('/contact', (req, res) => {
  return res.render('contact', {
    title: 'Contact - Gederooney',
    pageName: 'Contact',
  })
})

export default routes

C'est assez simple, n'est-ce pas ? Avec la fonction render, nous renvoyons le nom exact de notre fichier de vue et un objet en tant que deuxième paramètre, contenant les variables qui seront accessibles dans le HTML. Cependant, il reste un dernier détail. Comme nous n'avons pas indiqué le chemin absolu de nos modèles HTML, nous devons les enregistrer dans notre serveur Express pour qu'il sache où les trouver. De plus, nous devons indiquer à Express de traiter nos fichiers HTML comme des fichiers EJS. Voici comment modifier légèrement le fichier server.mjs :

import express from 'express'
import routes from './routes/index.mjs'
import { fileURLToPath } from 'url'
import { dirname } from 'path'
import ejs from 'ejs'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const PORT = process.env.PORT || 3000
const app = express()

// Ajout de ces lignes
app.set('views', path.join(__dirname, 'views'))
app.engine('html', ejs.renderFile)
app.set('view engine', 'html')

// Utilisation des routes
app.use(routes)

app.listen(PORT, () => console.log(`Le serveur est en marche sur le port ${PORT}`))

Maintenant, votre site devrait renvoyer quelque chose. Normalement, le serveur est automatiquement mis à jour lorsque nous apportons des modifications. Si le vôtre est arrêté, relancez-le avec la commande npm run dev et visitez http://localhost:8080. Vous pouvez cliquer sur les liens de navigation pour voir comment les routes que nous avons définies fonctionnent. Il ne manque plus qu'une chose : le style pour rendre notre projet agréable. Dans nos vues, nous avons ajouté des classes TailwindCSS, mais nous n'avons pas encore généré le fichier CSS. Il existe plusieurs façons de le faire, je vais vous montrer celle qui est la plus courante et que j'aime utiliser.

TailwindCSS

Pour initialiser TailwindCSS, qui est déjà ajouté au projet avec nos dépendances, exécutez la commande suivante :

npx tailwindcss init -p

Un nouveau fichier tailwind.config.js sera créé à la racine de votre projet. C'est dans ce fichier de configuration que vous ajouterez toutes les instructions dont TailwindCSS a besoin pour générer le CSS final de votre site. Par exemple, vous pouvez indiquer à TailwindCSS les dossiers et les fichiers dans lesquels il doit rechercher ses classes pour générer les styles correspondants. Vous pouvez également l'utiliser pour définir des propriétés personnalisées telles que les couleurs, les polices, et bien plus encore. Pour faire fonctionner TailwindCSS dans notre projet, nous devons suivre quelques étapes. Tout d'abord, remplacez votre fichier de configuration actuel par celui-ci :

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [require('@tailwindcss/forms')],
  content: ['./views/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Le champ content indique à TailwindCSS de traiter nos fichiers HTML dans le dossier views pour générer le fichier CSS final. Créez ensuite un dossier public dans lequel nous placerons nos fichiers de style générés par TailwindCSS :

mkdir public
touch public/tailwind.css public/styles.css

Imaginez que vous souhaitiez ajouter des classes personnalisées à votre site. Tailwind a besoin d'un fichier de style en entrée où il lira toutes vos instructions pour générer le style dans un fichier de sortie. Ici, tailwind.css est notre fichier d'entrée, et styles.css est le fichier de sortie que nous mettrons dans nos modèles HTML. Ajoutez le code suivant dans le fichier tailwind.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

Si vous souhaitez en savoir plus sur l'installation de TailwindCSS, je vous conseille de consulter la documentation officielle.

Modifiez la section scripts du fichier package.json en remplaçant le contenu actuel par ceci :

...
"scripts": {
  "build:css": "postcss ./public/tailwind.css -o ./public/styles.css",
  "dev": "nodemon --exec 'npm run build:css && npm start' -e html,mjs,js,json",
  "start": "start server.mjs"
}
...

Cela comprend un script build:css qui exécute TailwindCSS, ainsi qu'un nouveau script dev qui exécute build:css avec Nodemon à chaque modification du projet.

Enfin, ajoutez le dossier public au serveur. Voici comment modifiez légèrement le fichier server.mjs :

import express from 'express'
import routes from './routes/index.mjs'
import { fileURLToPath } from 'url'
import { dirname } from 'path'
import ejs from 'ejs'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const PORT = process.env.PORT || 3000
const app = express()

// Ajout de ces lignes
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(express.static(path.join(__dirname, 'public')))

app.set('views', path.join(__dirname, 'views'))
app.engine('html', ejs.renderFile)
app.set('view engine', 'html')

// Utilisation des routes
app.use(routes)

app.listen(PORT, () => console.log(`Le serveur est en marche sur le port ${PORT}`))

Cela devrait maintenant faire fonctionner TailwindCSS dans votre projet. Assurez-vous que le serveur est en cours d'exécution si ce n'est pas le cas lancez le avec la commande :

npm run dev

Avant de visiter le naviagteur pour voir si tailwindcss fonctionne bien, nous devons ajouter le css final dans tous nos modèles dans le dossier views. Ainsi les fichiers html deviendront:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>
  <body>
    <header class="flex justify-center w-full py-1.5">
      <ul class="flex items-center justify-center w-full gpa-4">
        <li>
          <a href="/">Accueil</a>
        </li>
        <li>
          <a href="/blog">Blog</a>
        </li>
        <li>
          <a href="/projets">Projets</a>
        </li>
        <li>
          <a href="/contact">Contact</a>
        </li>
      </ul>
    </header>
    <h1 class="text-6xl font-bold text-gray-900"><%= pageName %></h1>
  </body>
</html>

On y est, visitez http://localhost:8080. Vous pouvez cliquer sur les liens de navigation pour voir comment fonctionnent les routes que nous avons définies. Le site devrait maintenant afficher correctement le style grâce à TailwindCSS.

Conclusion

Je crois vous avoir donné une base solide pour créer un portfolio professionnel moderne en utilisant Node.js, Express.js, EJS, MongoDB et TailwindCSS. En partant du principe que vous pouvez écrire du HTML et du css, n'hésitez pas à personnaliser davantage votre site et à ajouter des fonctionnalités supplémentaires pour le rendre encore plus unique. Si vous souhaitez le template que je vous ai montré dans la vidéo du debut, si vous ne lavez pas encore eu, vous pouvez le faire ici: