ViteJS backend integration et PHP
Introduction
Cet article aborde comment utiliser ViteJS avec une solution fais maison en php, soit du Backend Intégration.
J'avais déjà écris un article à ce sujet en 2024. Aujourd'hui j'ajoute une brique supplémentaire le SSL.
Quand on DEV en local, on est souvent sur du localhost. Mais de plus en plus, j'utilise https en local pour le dev. également.
Environnement
Je dev. sous Windows 10, j'utilise Nginx en tant que serveur http. Pour le SSL, je suis passé d'une simple commande openssl à mkcert afin que la solution soit compatible avec le client http FireFox.
J'ai également NodeJS pour l'utilisation de viteJS.
Je ne détaillerai pas ici, comment modifier la variable PATH ou encore l'édition du fichier HOST. N'y même l'installation d'engine-X. Idem pour NodeJS qui est facilement installable sous Windows.
La structure
Le backend integration étant pour des solutions "particulières" c'est à vous de décider de la meilleurs structure de dossiers à adopter en fonction de votre projet.
Personnellement, j'ai un dossier vitejs dans lequel j'y place tous les fichiers liés à viteJs.
Installation de ViteJS
Perso, je l'installe souvent pour personnaliser bootstrapCSS. Dans le répertoire vitejs, j'execute la commande suivante:
# initialiser un projet NodeJS
npm init -y
# installation de: vitejs, sass, de bootstrap et de ses icons
npm install -D vite sass && npm install --save bootstrap @popperjs/core bootstrap-icons
Je me retrouve avec la structure suivante:
vitejs/
├── node_modules/
├── package-lock.json
└── package.json
Nos fichiers pour réaliser le frontend
Personnellement, je créer un dossier src dans lequel je créer des sous-dossiers pour chaque "theme"/"template" que je souhaite créer. Ici, pour l'exemple on va prendre "galaxy" comme nom de template.
Je ne reviens pas sur le fonctionnement de ViteJS, mais en gros on se sert d'un fichier main.js comme point d'entrée pour charger les différents fichiers, que ce soit du scss, du css ou du js.
Ici, on va faire simple, on va se contenter d'un fichier main.js qui charge un fichier main.css dans lequel on changera uniquement la couleur de fond de notre page, histoire de voir si ça fonctionne.
La structure est la suivante:
vitejs/
├── node_modules/
├── src/
│ └── galaxy/
│ ├── main.css
│ └── main.js
├── package-lock.json
└── package.jsonContenu du fichier main.css
body{
background-color: rgb(131, 154, 255);
}Peu importe la couleur de fond de page, le but sera de changer en direct afin de voir sir le hot reload fonctionne.
Contenu du fichier main.js
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
import "./main.css"Notre certificat SSL auto-signé
De base j'opéré via une simple commande openSSL. Mais cela ne passe pas avec Firefox. Il est assez stricte et refusera d'établir la connexion avec le web socket pourtant nécessaire pour le hotreload. En effet, ce dernier renvoie une erreur MOZILLA_PKIX_ERROR_CA_CERT_USED_AS_END_ENTITY.
Afin d'éviter cela, il est nécessaire d'ajouter notre propre autorité de certification dans le navigateur. Grâce à mkcert, cela se réalise facilement.
├── Télécharger et installer mkcert
Étant sous Windows je télécharge l'executable pour l’Architecture amd64 ( lien des releases).
Placer l'exécutable où bon vous semble, veuillez noter toutefois l'emplacement pour retrouver les certificats qui seront générés par la suite.
Via une console placer vous à la racine de ce dernier est exécuter la commande d'installation:
mkcert -install
Par la même occasion on va générer les certificats pour notre nom de domaine en local (ex: 'mon-site.local'):
mkcert mon-site.local
Cela génère deux fichiers mon-site.local.pem et mon-site.local-key.pem.
└── Ajout d'une autorité de certification dans Firefox
Rendez-vous sur about:preferences#privacy (dans la barre d'url)
Descendez jusqu'à la section "Sécurité" puis la section "Certificats", cliquer sur le bouton "A les certificats..."
Cliquez sur l'onglet "Autorités" et cliquer sur le bouton (en bas) "Importer..."
Le CA au niveau du disque dur, se trouve normalement ici: %LOCALAPPDATA%\mkcert
Configuration de ViteJS
├── package.json
On va ajouter deux petites commandes. La première npm run dev qui permet de lancer le serveur local pour ViteJS. Et la deuxième npm run build, qui permettra de builder nos assets.
On va éditer le fichier package.json en ajoutant ces deux lignes (en vert):
[...]
scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite",
"build": "vite build"
},
[...]└── vite.config.mjs
On créer ensuite notre fichier vite.config.mjs:
vitejs/
├── node_modules/
├── src/
│ └── galaxy/
│ ├── main.css
│ └── main.js
├── package-lock.json
├── package.json
└── vite.config.mjsLe contenu (à adapter):
import { defineConfig } from "vite"
import fs from 'fs'
export default defineConfig({
base: './',
server:{
host: 'mon-site.local',
port: '5173',
origin: 'https://mon-site.local',
allowedHosts: ['mon-site.local'],
https: {
key: fs.readFileSync('C:/_chemin_vers_la_clé_privée/mon-site.local-key.pem'),
cert: fs.readFileSync('C:/chemin_vers_le_certificat/mon-site.local.pem'),
},
hmr: {
clientPort: 5111,
protocol: 'wss',
host: 'mon-site.local',
}
},
build: {
copyPublicDir:false,
outDir: 'public/assets/galaxy',
assetsDir:'',
emptyOutDir: true,
manifest: true,
rollupOptions: {
input: 'src/galaxy/main.js',
},
},
}) On indique à ViteJS d'utiliser notre nom de domaine, on lui indique un port (ici 5173).
La section hrm (Hot Module Replacement) concerne le hot reload et le websocket utilisé, on indique ici le port 5111
Comme on se sert Nginx pour gérer les requêtes, on s'en servira en tant que proxy reverse pour faire le relai avec le serveur de ViteJS.
Nginx, configurer le Virtual Host
Au niveau Nginx, vous êtes libre au niveau de l'organisation des fichiers. Voici un exemple de configuration. Ici, je redirige en plus toutes les requêtes http vers un fichier index.php sauf pour les requêtes en rapport avec ViteJS évidemment.
On a également une section pour le websocket.
server {
listen 80;
server_name mon-site.local;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
#http2 on;
server_name mon-site.local;
ssl_certificate C:/chemin_vers_le_certificat/mon-site.local.pem;
ssl_certificate_key C:/_chemin_vers_la_clé_privée/mon-site.local.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
root C:\chemin_vers_votre_projet;
index index.php index.html;
location ~ ^/(src/galaxy|node_modules|@vite/client) {
proxy_pass https://mon-site.local:5173$request_uri;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9083;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}
server {
listen 5111 ssl;
server_name mon-site.local;
ssl_certificate C:/chemin_vers_le_certificat/mon-site.local.pem;
ssl_certificate_key C:/_chemin_vers_la_clé_privée/mon-site.local-key.pem;
location / {
proxy_pass https://mon-site.local:5173;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
}
}Ici, on peut peut être faire mieux? En gros, j'ai debug et adapté la configuration au fur et à mesure.
Du coté de php
Du coté de php, dans votre "template", ou votre "vue" pour utiliser le hot reload dans la partie head de votre page indiqué:
<script src="https://mon-site.local/@vite/client" type="module"></script>
<script src="https://mon-site.local/src/galaxy/main.js" type="module"></script>
Dans l'idéal implémentez une logique applicative pour vous générer ça "automatiquement".
Et voilà, un petit coup de npm run dev, rendez-vous sur mon-site.local, modifier votre fichier main.css, les modifications sont chargées automatiquement.
Une fois satisfait du front-end, on build les assets: npm run build.
ViteJS va générer un fichier manifest.json contenant les infos sur les assets.
Il suffit de lire de se fichier et de générer dans la partie head de votre template/vue le code html suivant:
<script src="https://mon-site.local/assets/galaxy/main-W-aVqPqS.js" type="module"></script>
<link rel="stylesheet" href="https://mon-site.local/assets/galaxy/main-MT0pGFt3.css">
Pour la lecture du fichier Json, pas de difficultés particulières, au pire l'IA peut vous montrer le chemin.
Ressources utilisées: