Rendre Xampp capable de servir plusieurs dossiers (hôtes virtuelles) !
Votes : environ (100%) 1 vote

Comme vous le savez Xampp est une plateforme qui englobe tous les composants d’un serveur web (Apache, mySQL, …) dont vous aurez besoin pour développer vos applications en local.

Voulez-vous ajouter un nom de domaine local du genre monprojet.local au lieu de localhost ?

Les fichiers de votre serveurs doivent être placés sur le dossier xampp/htdocs, ce qui rend l’affichage des fichiers développés sur un autre dossier fatigant !

Si vous voulez ajouter des dossiers extérieurs du dossier xampp/htdocs à votre serveur Xampp ce tutoriel vous sera utile =)

Dans ce tutoriel vous allez découvrir comment ajouter vos propres dossiers à Xampp et créer votre propre domaine local à la place du « localhost » !

Allons-y !

Ajouter des « virtual-hosts »  à Xampp.

1. Configuration des virtual-hosts sur Xampp

Pour appliquer ce tutoriel comme il le faut, nous allons premièrement préparer les lignes de configuration que nous allons utiliser afin d’ajouter notre virtual-host à notre Xampp !

Premièrement nous aurons besoin d’activer le port 80 pour les virtual-hosts.

Modifier « httpd-vhosts.conf » pour ajouter vos propres VH

Si vous avez le dossier xampp sur le disque C: alors cherchez ce chemin : C:xamppapacheconfextra

1 xampp apache conf extra vhosts

Puis ouvrez le fichier httpd-vhosts.conf à l’aide de « Notepad++ » pour faciliter la tâche…

2 httpd-vhosts namevirtualhost 80 xampp

Enlevez le # de la ligne NameVirtualHost *:80

Et ajoutez à la fin du fichier une nouvelle hôte virtuelle (Virtual Host) comme suit :

<VirtualHost easytutoriel.local:80>
DocumentRoot "C:/Users/soufiane/Documents/easytutoriel"
ServerName easytutoriel.local
ErrorLog "logs/easytutoriel.local-error.log"
CustomLog "logs/easytutoriel.local-access.log" combined
<Directory "C:/Users/soufiane/Documents/easytutoriel">
Require all granted
Allow from all
</Directory>
</VirtualHost>

Remplacez le chemin C:/Users/soufiane/Documents/easytutoriel par le chemin de votre dossier, et le nom de domaine désiré à la place de  easytutoriel.local ;)

2. Ajoutez le NDD local à « hosts »

1ère étape : Ouvrez votre éditeur en tant qu’administrateur

Nous allons maintenant ajouter le domaine .local à « hosts » pour le lier à notre adresse IP locale.

Pour ce faire ouvrez votre éditeur en tant qu’administrateur, ou ouvrez le Gestionnaire des tâches, « Fichier » > « Exécuter une nouvelle tâche » > notepad++ (avec « Créer cette tâche avec des privilèges d’administration« ) puis cliquez « OK« .

3 gestionnaire des taches notepad++

Une fois votre éditeur est ouvert en tant qu’administrateur, nous allons ouvrir le fichier hosts.

2ème étape : Modifier le fichier « hosts »

Le fichier hosts se trouve dans le dossier %SystemRoot%System32driversetc

Un astuce, recopiez le chemin du dossier sur la zone « Nom du fichier » et tapez Entrer, vous aurez hosts en face sans avoir à suivre le chemin…

Sélectionnez « hosts » puis cliquez « Ouvrir » pour commencer l’édition du fichier.

4 hosts windows ouvrir notepad++

Ajoutez une ligne de ce format :

127.0.0.1       easytutoriel.local

Ne supprimez aucune ligne, ici # est un commentaire, ajoutez votre ligne à la fin du fichier sans #.

5 hosts ajouter ligne local domaine

Enregistrez le fichier, si vous n’avez pas ouvert l’éditeur en tant qu’administrateur vous ne pourrez pas l’enregistrer.

3. Redémarrez Apache !

Une fois tout cela est fait, redémarrez Apache sur Xampp en cliquant sur « Stop » puis sur « Start« .

6 redemarrer apache xampp

Résultat :

Voici un test, j’ai mis un fichier salut.php sur mon dossier et en utilisant l’adresse http://easytutoriel.local/salut.php j’ai pu afficher le contenu de mon fichier ;)

7 test easytutoriel.local ca marche xampp

Bonus : Changer le Root complètement

Si vous voulez changer le « root » de Xampp, vous n’avez qu’à ouvrir le fichier httpd.conf sur xamppapacheconf et redémarrer Apache ;)

9 xampp htdocs documentroot

Et voilà voilou !

Si ce tutoriel vous a été utile, je serai très content si vous mettez un « merci » en commentaire =)

Sinon je vous donne un rendez-vous au prochain tutoriel !

Merci de votre lecture, cher lecteur.

Soufiane – Easytutoriel.com