Formation « Développer un thème WordPress sur mesure »

Pourquoi travailler son site localement ?

Lecture : 8 minutes • 2

Beaucoup travaillent leur site en ligne par mesure de simplicité. Mais lorsque l'on en vient à développer des thèmes sur WordPress, il est préférable d'opter pour un environnement de développement local.

Certains d’entre vous se demandent quelle est la meilleure façon de travailler sur son site :

  • Installer le site directement sur l’hébergement et travailler depuis Internet ?
  • Installer un serveur local sur son ordinateur et travailler depuis sa machine ?

Nous allons voir que la bonne pratique est la deuxième solution :  travailler en local avant de mettre son site en ligne à la vue de tous.

Cours dédié

Serveur local

Définition

Un serveur local permet de faire tourner un site Internet sur son propre ordinateur et simule au mieux les conditions réelles d'un serveur d'hébergement web. En général un serveur local est composé d'Apache (ou Nginx) qui traite les requêtes (accès à une URL), de MySQL pour les bases de données et PHP pour interpréter le code et générer du HTML.

Traduction : Local server environment

Les défauts du travail en ligne

Lorsque vous commencez un site, il est tentant de l’installer directement en ligne et de travailler au travers de son FTP.

Cette technique ne fonctionne que si vous travaillez seul.

Et le jour où vous décidez de rendre enfin le site accessible aux internautes, et que quelques semaines plus tard vous avez besoin de faire des modifications, vous êtes bloqué : des modifications à chaud risquent d’entrainer des bugs et bloquer la navigation.

Si votre client vend des produits depuis son site et que vous faites une boulette, il ne va pas être content de son manque à gagner !

Il est essentiel d’avoir une approche propre et efficace lorsque l’on développe des sites pour son client ou pour soi-même, c’est pour ça que nous allons travailler pour le moment en local !

Romain est développeur PHP et WordPress depuis des années et c’est également son conseil :

Romain Etchegoyhen
Développeur PHP
Expert WordPress

Le conseil Romain Etchegoyhen

Développeur Web

Attention à ne jamais faire de modification directement en production, il vaut mieux avoir une copie locale du site ou un environnement dit de « staging » afin de tester en amont les modifications et bien veiller à ce qu’elles ne cassent pas le site !

Suivez-moi sur Twitter : @snapeuh • Mon site : Site personnel

Travailler en local

Il est essentiel de pouvoir coder sur une instance isolée de son site, afin de pouvoir faire tous les tests nécessaires avant la mise en production.

Si je devais faire une métaphore, je dirais que travailler en ligne c’est comme réparer un avion en plein vol. Ca ne se fait pas pour des raisons évidentes. On attendant donc que l’avion soit au sol, dans son hangar, pour lui faire tous les ajustements nécessaires.

Travailler en local, c'est plus agréable
Travailler en local, c’est plus agréable

Les avantages du travail en local

Le principal avantage est que vous pouvez travailler une copie de votre site, pendant que le vrai reste fonctionnel en ligne. Vous pouvez tester, casser, ajouter du code : le site en ligne n’est pas impacté et ne risque pas l’interruption.

Vous pourrez créer du faux contenu en local pour effectuer tout types de tests les plus extrêmes et vous assurer du bon fonctionnement du code. Vous pourrez par exemple passer autant de fausses commandes sur WooCommerce que nécessaire ou encore créer des faux articles via un outil comme FakerPress.

Il faut voir votre site local comme un brouillon de votre site réel.

Enfin, travailler en local ne requiert pas Internet ! Du coup vous pouvez continuer de travailler dans le train, dans l’avion où à la campagne chez mémé Ginette.

Les problématiques apportées par le travail local

On va voir que travailler en local amène aussi son lot de problématiques :

Avoir deux instances du même site

Du coup avec cette méthode on se retrouve avec 2 sites différents : un sur l’ordinateur et un en ligne. Les modifications effectuées sur l’un ne se reflètent pas automatiquement sur l’autre. Lorsqu’un contenu est modifié en ligne, il n’est pas répercuté sur la base de données locale. Idem pour les extensions, si vous en installez une en ligne il faudra également l’installer en local.

Comment synchroniser le site local et en ligne ?

Pour envoyer les fichiers modifiés vers le site en ligne, il suffit d’un logiciel FTP. Mais sur le long terme en effet cette solution peut-être un peu limitante.  Sachez simplement pour le moment qu’il existe des outils pour automatiser l’envoi des fichiers modifiés vers le site en ligne.

Concernant la base de données, il existe des extensions comme Migrate DB Pro + MergeBot pour facilement les synchroniser. Elles valent leur prix mais peuvent s’avérer très vite nécessaires. Une alternative gratuite est VersionPress.

Je ne m’attarde pas sur le sujet pour l’instant, dans cette formation nous n’aurons pas ces problèmes. Si vous êtes une agence intéressée par l’Industrialisation de sites avec WordPress, j’ai une formation pour vous !

Quels logiciels pour travailler en local ?

Logos des logiciels de serveur local

Il existe aujourd’hui principalement 3 solutions mais selon moi la plus efficace sera la première :

1. Local By Flywheel

Local est un logiciel permettant de créer des serveurs locaux spécialement pour WordPress et d’installer le CMS en un clic. Il s’est très vite imposé car il marche bien et permet de gagner énormément de temps.

L'interface épurée de Local by Flywheel
L’interface épurée de Local by Flywheel

Initialement payant, il a rapidement été racheté par la la société d’hébergement spécialisée WordPress nommée FlyWheel qui le propose désormais gratuitement. D’ailleurs si vous êtes hébergé chez eux, sachez qu’ils ont ajouté une fonctionnalité pour envoyer le site en ligne en un clic ! Pratique !

On s’occupe de télécharger et installer Local by Flywheel dès le prochain cours.

Aparté : Local utilise Docker

Pour les curieux, sachez que Local by Flywheel utilise Docker, qui permet de créer des serveurs virtuels. Votre serveur est installé sur une machine virtuelle dans une bulle Docker qui imite la configuration du serveur en ligne.

Chaque site est installé dans sa propre bulle isolée. L’avantage est que pur chacun d’entre eux vous allez pouvoir choisir la configuration serveur : Apache pour l’un, Nginx pour l’autre, avec des versions de MySQL et PHP différentes.

De cette manière, avec l’exacte configuration de votre hébergement, vous diminuez grandement les risques de mauvaises surprises lors de la mise en ligne.

2. Mamp, Wamp, Easy PHP

Plus classiquement, il existe des logiciels permettant de créer sans trop d’efforts un serveur local sur votre machine. Parmi eux MAMP, WAMP et Easy PHP.  Ils ne sont pas dédiés qu’à WordPress et s’avéreront utiles si vous utilisez d’autres plateformes.

Chacun propose une version gratuite et une version payante. Nous n’aurons pas besoin de passer à la caisse pour cette formation : la version gratuite suffira amplement.

Capture d'écran de Mamp
Mamp Pro en action

D’expérience je sais que MAMP est celui qui pose le moins de soucis sur Windows et j’y trouve l’interface plus sympathique.

Mes étudiants ont dans le passé rencontré pas mal de soucis avec WAMP et Easy PHP selon leur version de Windows. Il faut notamment bien vérifier que le Microsoft Visual C++ Redistribuable soit installé sur la machine car il contient des librairies nécessaires au bon fonctionnement du serveur.

Un autre souci souvent rencontré est le conflit de ports, notamment le port 80. Cette erreur apparait si Skype (qui utilise aussi ce port) ou un logiciel antivirus est lancé.

Il n’y a pas ces soucis avec Local car votre site est dans une bulle contenant un système virtuel (un système dans le système en quelques sortes).

Conseil

Même si vous êtes un habitué de ces logiciels, je vous conseille de tenter l'expérience avec Local pour cette formation !

3. Installer un serveur natif sur le système

Une troisième solution est d’installer le nécessaire directement sur votre machine (sur Mac ou Linux) : un serveur Apache, MySQL pour la base de données et PHP. Apache est déjà présent sur les systèmes, il ne reste qu’à installer les deux autres.

Le principal avantage est la rapidité de votre serveur. Cette technique est notamment utile lorsque vous développez des sites & applications pas exclusivement basés sur WordPress.

Cette solution est un peu moins facile à mettre en place mais si l’approche vous intéresse je vous conseille le tutoriel d’EdenPulse, à réserver toutefois aux développeurs les plus motivés.

D’ailleurs son article date d’avant l’arrivée de Local. Voyons aujourd’hui son avis sur la question :

Matthieu Bousendorfer
Geek Master
Spécialiste UX

Le conseil Matthieu Bousendorfer

Directeur Artistique chez WP Media

Le natif est intéressant uniquement dans le cas où l’on cherche les meilleures performances, qu’on se limite à apache, et qu’on fait autre chose que du WP. L’intérêt est aussi d’éviter les problèmes avec un deuxième apache installé à coté de celui déjà présent dans macOS, ce qui peut aboutir à des conflits. Mais la version d’apache du système est rarement la dernière sous macOS.

En ce qui concerne Flywheel, le fait que l’on puisse basculer d’une configuration à une autre simplement avec est un gros avantage qui justifie à lui seul cet outil. L’interface utilisateur simplifie largement la configuration : plus besoin d’être un expert et comprendre la stack complète pour arriver à quelque chose rapidement.

Suivez-moi sur Twitter : @edenpulse • Mon site : Site personnel

Travailler sur un projet en équipe

En équipe il faut encore s’organiser autrement : bien souvent plusieurs personnes travaillent en même temps sur le même site. Il n’est alors pas installé en local mais sur un serveur de l’entreprise afin que chacun puisse y accéder au besoin.

Un autre souci de taille s’impose : que se passe-t’il si plusieurs développeurs modifient les mêmes fichiers en même temps ?

C’est là qu’entre en jeu Git, qui permet de versionner votre code, c’est-à-dire créer des enregistrements à des étapes clés (un peu comme lorsque l’on sauvegardait manuellement un jeu vidéo jadis, avant d’entamer une partie difficile où d’affronter un boss).

Git permet également, lorsque plusieurs personnes éditent un fichier, de fusionner toutes les modifications automatiquement. Et si d’aventure 2 développeurs ont modifié la même ligne, ils sont informés du conflit et peuvent le régler facilement en indiquant quelle version conserver.

Si à la base Git se manipule en ligne de commande, il existe toutefois une application native bien pratique.

Capture d'écran de l'application Mac de GitHub
L’application Mac de GitHub

Vos codes peuvent ensuite être hébergés hors site sur les plateformes Github ou Bitbucket par exemple, de manière privée ou publique, si jamais vous faites un projet open source que vous voulez partager avec la communauté.

D’ailleurs c’est là que j’héberge les fichiers des exercices de cette formation !

Et même si vous travaillez seul, je vous conseille de versionner votre code. En cas de souci vous pourrez toujours revenir à une version plus ancienne ou retrouver un bout effacé. Personnellement tous mes projets sont « GITtés » et hébergés sur Bitbucket et Github pour dormir sur mes deux oreilles la nuit.

Mais cette partie n’est pas au programme ici car elle est traitée dans la formation Industrialisation de sites avec WordPress, que je vous recommande si vous devez travailler en équipe.

Le saviez-vous ?

Le saviez-vous ?

WordPress utilise SVN plutôt que Git pour versionner son coeur et permettre aux équipes de bénévoles de participer au projet. SVN est un équivalent de Git, un peu plus ancien, et reconnu pour sa complexité. Si vous venez à faire une extension WordPress, vous pourrez utiliser Git pour le développement mais il faudra passer par SVN pour la mise en ligne sur le répertoire des extensions


Alors maintenant que vous êtes convaincu de travailler en local (enfin j’espère) nous allons continuer en installant Flywheel et notre premier site WordPress.

2

Questions, réponses et commentaires

  1. Ahmed

    Le 4 décembre 2018

    Bonjour,

    J ai installé Flywheel, mais lorsque j essaie d accéder au site où à l admin, il me signale un erreur EPREM … rendant impossible la demande.

    J ai essayé de régler le problème, mais je n’ ai pas réussi.

    Pouvez vous m’ aider ?

    Merci

    1. Maxime BJ

      Le 7 décembre 2018

      Est-ce que tu peux m’envoyer une capture d’écran via le formulaire contact du site afin de voir l’erreur ?

Laisser un commentaire