Du SSL en local avec mkcert et Vite

Alors voilà, vous voulez faire du WebXR sur mobile, mais votre serveur de dev Vite fait la tête quand on lui parle de HTTPS. Pas de panique, on va arranger ça !

Étape 1 : Générez vos certificats

On va générer nos propres certificats SSL grâce à mksert. Installez mksert sur tous vos OS en suivant le process d’install indiqué sur Github, puis rendez-vous dans votre dossier de dev et tapez :

mkcert localhost

Vous avez maintenant deux beaux fichiers : localhost.pem et localhost-key.pem. Gardez-les précieusement, ce sont vos nouveaux meilleurs amis.

Étape 2 : Configurez Vite

Ouvrez votre vite.config.js et ajoutez-y

import fs from 'fs'
...
export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('path/to/localhost-key.pem'),
      cert: fs.readFileSync('path/to/localhost.pem'),
    },
  },
})

N’oubliez pas de remplacer path/to/ par le vrai chemin, à moins que vous n’ayez vraiment un dossier appelé « path » avec un sous-dossier « to » …

Étape 3 : Lancez le serveur en mode host

Tapez votre commande habituelle (npm run dev, yarn dev, etc) et regardez la magie opérer. Vite devrait maintenant ronronner en HTTPS.

Mais pour fonctionner sur votre mobile, vous devez demander à vite de rendre le serveur accessible sur le réseau local, vous pouvez donc ajouter à la config vite

server: {
  host: true, // Exposez-vous au monde ! (enfin, à votre réseau local)
}

Étape 4 : profitez

Prenez votre mobile, entrez https://votreadresse:port, passez l’alerte de sécurité et vous voilà avec du https sur votre dev local !🚀🔐🕶️