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

Découverte et installation de Local by Flywheel

Lecture : 9 minutes • Pratique : 15 minutes • 20

Vous avez déjà installé des sites en local et c'était la galère ? Oubliez tous vos soucis grâce à Local by Flywheel. Dans ce cours on va installer le logiciel et notre premier site WordPress sans aucun effort !

Quels sont les avantages de Local By Flywheel ?

Commençons tout d’abord par vanter les mérites de Local. Vous verrez que je ne manque pas d’éloges à propos de ce logiciel mais vous allez vite comprendre que c’est justifié ! Voici mes 7 arguments principaux :

1. Une ergonomie minimaliste

J’adore ! C’est simple, c’est beau, c’est moderne et c’est efficace. Finis les menus à rallonge et les options dans tous les sens comme sur MAMP et compagnie. Ici c’est épuré, il n’y a que l’essentiel, et ça marche !

A gauche : mes sites, à droite, les informations du site en cours avec un bouton d’accès au site et à l’admin.

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

2. L’installation en 3 clics

Vous vous rappelez de l’époque où il fallait télécharger WordPress depuis wordpress.org, puis dézipper l’archive, la mettre dans un dossier, créer une entrée sur MAMP, créer la base, lancer l’installation ?

On oublie tout cela. L’installation en (presque) un clic simplifie grandement la vie ! Il suffit de mettre le nom du site, éventuellement choisir quelques paramètres et hop, le tour est joué.

On va voir cette procédure en détails un peu après.

3. Templates de sites « Blueprints »

Même si l’installation est rapide, Local vous permet d’aller encore plus loin : enregistrer un site installé en modèle, pour le réutiliser la prochaine fois.

Comprenez bien : installez un premier site, installez les extensions incontournables, le thème, créez les premières pages habituelles (contact, accueil, blog, mentions légales…), faites vos configurations, et ensuite enregistrez l’état de votre site en tant que modèle.

La prochaine fois repartez de cette exacte configuration. Vous allez gagner jusqu’à une heure environ à chaque lancement de projet. Ayant fait plus de 100 sites quand j’avais mon agence, je vous avoue que j’aurais bien aimé avoir cet outil à l’époque !

4. SSL + E-mails en local

Local peut émettre un certificat SSL local. Comme ça vous pouvez travailler dans des conditions réelles en HTTPS. Il est également possible de simuler un serveur de mail local qui vous permettra de recevoir les e-mails du système. N’est-ce pas parfait ? Patience, je vous détaille tout cela dans un instant.

5. Environnement cloisonné pour chaque site

Contrairement aux autres plateformes, et grâce à Docker qui tourne sous le capot, chacun de vos sites pourra avoir une configuration différente : Votre site A peut tourner en PHP 5.6 et sur Apache alors que le site B sera en PHP 7 avec Nginx. Cela permet se caler au plus proche de la configuration réelle de vos hébergements.

6. Performances au rendez-vous

Local marche bien, et il est rapide ! Aucun ralentissement, les pages se chargent vite, bref, ça fonctionne à merveille ! Et en terme de consommation de mémoire il reste très correct. Du fait que chaque site est cloisonné, vous n’êtes pas obligé de tous les lancer. Cela permet de rester économe sur la RAM.

7. Plus fiable que ses concurrents

Local, il marche d’enfer. Quelques fois j’ai eu la machine virtuelle qui a sauté, mais d’un clic elle se relance et tout rentre dans l’ordre. Je n’ai jamais rencontré de perte de données ou de bugs vraiment bloquant.

C’est l’une des choses les plus frustrantes du côté MAMP, WAMP… Il suffit de voir le nombre d’articles et de demandes d’aide sur les forums. Pas une fois j’ai pu finir une formation sans que quelqu’un rencontre un problème à un moment donné et fasse perdre un temps précieux au groupe.


Local a encore bien d’autres tours dans son sac. Pour connaitre la liste de toutes les fonctionnalités, consultez son site officiel :

Installer Local by Flywheel

Allez c’est parti, vous allez voir, rien de plus simple ! Ce cours en est presque inutile tellement que l’opération va être facile !

Rendez-vous sur le site officiel et téléchargez Local. Si vous préférez MAMP alors rendez-vous directement dans le prochain cours.

Flywheel vous demandera votre système d’exploitation, Windows ou Mac ainsi  que quelques informations personnelles, mais ne vous inquiétez pas, il ne vous spammeront pas pour autant.

Choisissez votre système et indiquez votre nom et e-mail

Bon c’est le moment d’aller se faire un petit café, car le programme d’installation pèse tout de même près de 500Mo. J’espère que vous avez la fibre ou au moins une bonne ADSL !

Au premier lancement Local va installer 3 modules nécessaires au bon fonctionnement du logiciel :

  • Virtual Box
  • Host Machine
  • Local Image

Ce sont les trois modules principaux qui permettent de créer des images Docker et les faire tourner sur la machine virtuelle.

Capture d'écran de Local
Installation des 3 modules

Ici rien à faire, seulement patienter. De temps en temps il se peut que votre mot de passe système soit demandé.

Après quelques minutes, Local est prêt ! On va pouvoir installer notre premier site WordPress !

Installer un site WordPress avec Local by Flywheel

Rien de plus simple. Commencez par cliquer sur le bouton + en bas à gauche.

Étape 1 : nom du site

Indiquez le nom du site :

Capture d'écran de l'installation d'un site WordPress
Première étape : choix du nom du site

Si vous êtes curieux affichez les options avancées. Vous pouvez :

  • Mettre un nom de domaine différent
  • Choisir l’emplacement du site sur votre disque
  • Utiliser un modèle (j’y reviens dans un moment)
Le saviez-vous ?

Le saviez-vous ?

Local by Flywheel crée vos sites en utilisant le nom de domaine factice .local. Il utilisait auparavant .dev mais cette extension existe désormais sur Internet et est gérée par Google.

Concernant l’emplacement du site, il vous est possible de définir un dossier par défaut dans les préférences du logiciel. Personnellement je les range tous dans le dossier /sites/ du Mac.

Attention

Lorsque vous choisissez manuellement un emplacement, il faut préalablement créer le dossier qui accueillera les fichiers du site car Local ne le fait pas : il installe les fichiers dans le dossier indiqué. Heureusement, il vous indique lorsque ce dossier cible n'est pas vide pour limiter tout risque d'erreur ou d'écrasement.

Étape 2 : Choix de l’environnement

La plupart du temps, laissez sur Preferred et continuez ! Local choisira une version récente de PHP et MySQL et activera par défaut Nginx au lieu d’Apache.

Capture d'écran de l'installation de Local
Choix de l’environnement. Pour aller vite, laissez Preferred

Si vous voulez choisir votre propre environnement, cliquez sur Custom. Vous allez pouvoir choisir les mêmes technologies que sur votre serveur d’hébergement : Version de PHP, Serveur Web (Nginx ou Apache) et la version de MySQL.

Étape 3 : identifiants

Dernière étape, il suffit maintenant d’indiquer un nom d’utilisateur, un mot de passe et un e-mail.

Indiquez un nom d’utilisateur, un mot de passe et un e-mail

Dans les options avancées vous trouverez une option pour initialiser le multisite.

Allez on valide et le tour est joué ! Votre système vous demandera votre mot de passe car le logiciel a besoin de faire des modifications bas niveau.

Information

Si c'est votre première installation, Local va aller télécharger des modules Docker et l'opération peut s'avérer un peu longue (jusqu'à 5 minutes), mais rassurez-vous ça ne se passe comme ça que la première fois. Les prochaines installations seront bien plus rapides. 

Le site est ensuite installé et tourne dans son environnement :

Le site est maintenant installé et tourne dans son environnement virtuel

Parfait ! De là vous pouvez accéder au site, à l’administration grâce aux deux boutons gris en haut, et faire quelques autres petits trucs bien sympathiques !

Quelques astuces de Local by Flywheel

Comme si ce n’était pas déjà assez génial comme ça, voici quelques fonctionnalités bien pratiques qui vont vous faire adorer le développement local :

Modifier les réglages par défaut

Pour aller encore plus vite lors de la création d’un site, vous pouvez prédéfinir certains paramètres comme le nom d’utilisateur, le mot de passe et l’e-mail de l’admin. Rendez-vous dans Préférences :

Le menu préférences de Local

Pensez cependant à changer votre mot de passe pour ne pas avoir le même sur tous vos sites, par mesure de sécurité.

Aparté : Mettez vos mots de passe en sécurité

Outre le fait de mettre un mot de passe différent pour chaque site, je vous conseille de les générer aléatoirement et les stocker dans un logiciel sécurisé comme Dashlane ou 1Password. Vous allez avoir énormément de mots de passe et données sensibles à gérer, il est donc nécessaire de les stocker dans un coffre fort chiffré et pas dans un fichier texte tout simple.

Vous pouvez également définir l’environnement par défaut (dev ou prod). Je vous conseille de laisser Dev pour voir les erreurs PHP en cas de souci.

Enfin vous pouvez aussi définir quelle version de PHP, MySQL et quel serveur web proposer par défaut.

Les Blueprints : enregistrez vos configurations de site

Pour aller encore plus vite à l’avenir, vous allez pouvoir créer un site type, un « Blueprint » qui pourra servir de base à tous vos prochains sites. Pour cela :

  1. Créez un site que vous appellerez par exemple « modèle ».
  2. Configurez les paramètres de WordPress (par exemple les permaliens)
  3. Créez les pages habituelles (accueil, blog, mentions légales, contact…)
  4. Installez et configurez vos extensions favorites
  5. Installez et configurez les bases de votre thème

Une fois que c’est fait, faites un clic droit sur le nom du site dans la liste et choisissez Save as Blueprint.

Votre site est prêt à être réutilisé !

Il vous sera demandé quel nom vous voulez donner au modèle et quels types de fichiers vous souhaitez exclure. Laissez tel quel. Validez, votre modèle est prêt à l’emploi !

Lors de la prochaine installation d’un site, lors de l’étape 1, dans Advanced Options, choisissez votre Blueprint !

Votre Blueprint est prêt à l’emploi !

Si après tout ça vous ne trouvez pas ça encore assez rapide, alors je ne peux plus rien pour vous 😉

Accéder à la base de données

Local ne propose pas PHPMyAdmin (et tant mieux, car il n’est pas très fiable). Par conséquent il vous faudra un logiciel spécialisé pour y accéder. Dans l’onglet Database 2 logiciels sont proposés : Adminer et Sequel Pro.

Personnellement j’ai l’habitude avec Sequel, qui est pas trop mal fait (pour un logiciel de bases de données) :

Capture d'écran du logiciel Sequel Pro
Sequel Pro se marie bien avec Local pour gérer sa base MySQL

Vous pouvez télécharger gratuitement Sequel Pro sur le site officiel :

Une fois installé, il suffit de cliquer sur Sequel dans Local pour lancer automatiquement la connexion à la base. Pas besoin d’indiquer l’hôte et le mot de passe ! Pratique !

Changer le nom de domaine

Vous pouvez facilement changer le nom de domaine si besoin, Local s’occupe de tout : changer le domaine, changer les valeurs en base de donnée…

Pour cela cliquez sur le lien Change dans l’onglet Site Setup de votre site, juste après le domaine actuel.

Trop facile !

Montrer votre site local à distance

C’est bien cool de travailler en local mais si je veux montrer le site à mon client ?

Local a la solution ! En fait il n’a rien inventé, il utilise juste une technologie qui s’appelle ngrok et l’intègre dans le logiciel. Il va créer un tunnel depuis votre ordinateur vers Internet, avec une adresse provisoire, et votre client pourra consulter le site tant que votre ordinateur n’est pas en veille.

En bas de la fenêtre de Local, cliquez sur Enable à côté de Live Link. Une adresse en .ngrok.io va apparaitre, précédée d’une suite hexadécimale.

Capture d'écran de Local
Activer ngrok et obtenir une adresse en ligne

C’est cette adresse qu’il faut donner à votre client afin qu’il puisse consulter votre site local à distance !

SSL et e-mails en local

Ouais mais en local j’ai pas HTTPS et y’a pas les e-mails

Eh ben si ! Bon sang vous allez arrêter de me contredire ? :p Local vous permet de dire au navigateur de croire le certificat Open SSL local pour fonctionner en HTTPS. Pour cela rendez-vous dans l’onglet SSL et cliquez sur Trust.

Fais confiance à mon serveur local !

Enfin, vous pouvez aussi capter les e-mails envoyés par votre site (par exemple l’e-mail de réinitialisation de mot de passe) grâce à Mailhog, que vous trouverez dans l’onglet Utilities.

MailHog a bien capté l’e-mail de demande de réinitialisation du mot de passe

Contrairement à ce que l’on pourrait croire, l’e-mail n’est pas réellement envoyé au destinataire, il est juste capté et affiché par Mailhog mais n’ira pas plus loin. Pratique pour tester des fausses commandes, création de compte sans réellement envoyer les e-mails.

Architecture des dossiers

Local a une organisation un peu différente de ce que l’on a l’habitude de voir.

L’organisation des dossiers de votre site Local

Les fichiers de WordPress et la racine du site se trouvent dans app/public . Notez également la présence du dossier logs qui stocke les différents logs d’erreur PHP, serveur… (on y reviendra dans quelques cours). On notera aussi la présence d’un dossier sql qui contient une version de la base de données originale.


Vous voilà maintenant paré pour la suite ! L’installation de sites WordPress en local étant désormais une formalité, on peut continuer ! Dans le prochain cours on reviendra sur cette notion de Blueprint et je vous dévoilerais ma configuration idéale pour gagner du temps.  Ensuite nous allons tout de même voir comment installer WordPress avec MAMP en tant que solution alternative.

20

Questions, réponses et commentaires

  1. devaux

    Le 19 mars 2018

    Bonjour,
    le module host machine n’arrive pas à s’installer sur mon PC sous windows 7 … ?
    avez vous un conseil svp 🙂
    Merci

    1. Maxime BJ

      Le 19 mars 2018

      Ah ! Est-ce que Local donne un message d’erreur ? D’après Google tu es loin d’être le seul à rencontrer le problème. Est-ce que tu as une configuration système particulière ? Différente de celle que tu devrais avoir par défaut ?

  2. houille

    Le 15 mai 2018

    Bonjour

    J ai réussis à installer Flywheel pour travailler en local .Mais je suis confronté à un nouveau
    problème avec mon fichier hosts.

    Warning missing hosts entry.The site may be inaccessible.

    1. Maxime BJ

      Le 15 mai 2018

      Normalement Flywheel fait une demande d’accès au système lors de toute installation pour autoriser l’écriture du fichier hosts, notamment. Toi tu n’as rien à faire à part accepter.

      Essaie de recréer un site et voir si tu as bien cette demande système .

  3. Maalej med hedi

    Le 30 mai 2018

    quand je veux aller à la base je clique sur adminer mais il ne marche pas

    1. Maxime BJ

      Le 30 mai 2018

      Il y a une erreur affichée ? Par exemple introuvable ?

  4. Dadou

    Le 7 juillet 2018

    Bonjour
    J’ai tente d’installe flywheel sur mon pc sous window 7 32bits. Seulement j’ai un message d’eereur qui s’affiche et l’îstallation n’abouti pas?!
    Quelle doit etre la configuration par defaut?
    Merci pour votre retrour

    1. Maxime BJ

      Le 7 juillet 2018

      D’après ce que je lis sur Internet beaucoup semblent avoir le problème. Il semblerait que Local ne soit pas compatible avec windows 7 malheureusement

  5. Dany G

    Le 28 août 2018

    Bonjour, quelqu’un sais comment créer un thème enfant sur Local by Flywheel ? Je suis en pleine recherche actuellement mais je n’ai pas encore la solution.
    Merci

    1. Maxime BJ

      Le 28 août 2018

      En fait la création du thème enfant n’a pas de rapport avec l’hébergement ou Flywheel, il suffit d’en générer un et le placer dans le dossier /wp-content/themes/. Alex de WP Marmite a créé un générateur de thèmes enfant qui pourra t’aider : https://wpmarmite.com/creer-theme-enfant/

  6. Augustin

    Le 2 septembre 2018

    Bonjour Capitaine,

    Est il possible d’utiliser flywheel pour rapatrier en local un site déjà live ?

    Merci !

    1. Maxime BJ

      Le 2 septembre 2018

      Sans un outil supplémentaire non. J’ai souvent utilisé WP Migrate DB Pro pour m’aider dans cette tâche. Ca implique quand même que tu crées un site de base avec Flywheel et que tu installes ce genre d’outils pour ensuite récupérer le contenu et les médias.

  7. Lidec

    Le 26 septembre 2018

    Bonjour, je suis en M1 Info Com et je travaille sur de l’édition en ligne, à travers WordPress. J’ai pu installé Local, mais j’ai quelques problèmes…
    Quand je souhaite aller sur mon site WordPress, je clique sur « Admin » ou « View site’ et cela ne fonctionne pas (je tombe sur cette page « http://projetm1alexislidec.local/wp-admin » et rien ne s’affiche).
    Je dois d’abord « enable » le Live link, puis cliquer dessus et cela fonctionne (j’arrive sur la page: « c393d484.ngrok.io »)
    Le problème étant que pour aller sur le site en tant qu’administrateur, je dois rajouter « /admin » au lien « c393d484.ngrok.io ») pour arriver sur la page d’identification de WordPress et pour commencer à travailler sur le site.

    Pouvez vous m’aider ?

    Merci beaucoup,
    Alexis

    1. Maxime BJ

      Le 26 septembre 2018

      C’est étrange car le livelink est un proxy du domaine original, du coup il devrait fonctionner. Ca arrive que l’url ne fonctionne pas tout de suite après activation du site, il faut un petit moment à la machine virtuelle pour se lancer. Tu as une erreur quelconque affichée quand tu essaies d’accéder à l’URL ? Tu es sur Windows ?

  8. Mélanie

    Le 9 octobre 2018

    Bonjour, j’ai installé le logiciel et je l’ai configurer, jusque là tout va bien. Sauf qu’ensuite j’ai voulus essayer de mettre un site wordpress que j’ai déjà commencé à coder ailleurs. J’ai donc remplacé les fichiers dans app/public par les fichiers de mon dossier wordpress, et j’ai importer ma bdd qui vient de phpmyadmin sur adminer. Sauf que quand j’essaie de voir le site il me dit « Erreur lors de la connexion à la base de données ». Je ne vois pas d’où vient l’erreur ni de comment la régler..

    1. Maxime BJ

      Le 9 octobre 2018

      Bonjour !

      C’était pas la bonne approche : il aurait fallu simplement importer le dossier wp-content et laisser le reste.et importer la BDD.
      En fait dans le wp-config.php ce sont toujours les mêmes informations :
      base : local,
      utilisateur et mot de passe : root
      hôte : localhost

      Tu as bien mis ça ?

  9. Frank

    Le 17 octobre 2018

    Super article Maxime, comme d’habitude 😉
    Pour avoir essuyé les plâtres avec mes étudiants, Local fonctionne une fois sur deux sur Windows. Des fois ça s’installe bien mais ça ne démarre pas bien… bref. Je les ai basculé sur Laragon. Certes l’interface est plus austère, y’a pas de blueprints et toutes les autres fonctionnalités de Local mais ça marche, c’est plus simple à installer qu’un MAMP ou WAMP et on peut en un click créer un site WordPress.

    1. Maxime BJ

      Le 29 octobre 2018

      En effet il y a parfois des soucis, souvent dûs à la machine virtuelle en réalité. Ca va de mieux en mieux mais parfois ça ne marche pas et il n’y a pas grand chose à faire. Larangon j’en ai effectivement entendu du bien !

Laisser un commentaire