Browsersync - votre assistant de test
Lorsque vous créez des sites Web, vous avez probablement parfois remarqué que votre page change d'apparence sur différents navigateurs, sans parler de la diversité des appareils. En fonction du nombre de configurations différentes que nous voudrons vérifier, le temps passé à les tester augmentera rapidement et l'enthousiasme diminuera probablement à un rythme similaire en répétant la même action sur un autre appareil. Cependant, grâce à Browsersync, une action peut être effectuée simultanément non seulement sur plusieurs navigateurs mais aussi sur plusieurs appareils différents.
Comment ça marche?
Browsersync exécute un petit serveur qui injecte chaque page avec un script leur permettant de communiquer avec le serveur en utilisant la technologie WebSocket. Si certains événements se produisent sur le site, tels que la modification d'un fichier CSS, la navigation entre les pages, le défilement de la page, la saisie de données dans un formulaire, etc., le serveur le communique à tous les appareils connectés. Grâce à cela - peu importe sur quel appareil et quelle action est réalisée - l'information est reçue par tous. Vous, en tant qu'utilisateur, n'avez pas besoin de rien savoir car tout se passe « automagiquement ».
Comment démarrer?
Premièrement, nous devons installer Node.js et Browsersync. Installation de Node.js (les commandes ci-dessous ont été testées sur Linux, les utilisateurs d'autres systèmes devraient consulter les sites Web des projets),
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash
apt-get install -y nodejs
Installation globale de Browsersync
npm install -g browser-sync
il ne reste plus qu'à démarrer le serveur et à vérifier son fonctionnement. Nous pouvons le faire de deux manières, selon le type de projet. Pour les pages statiques, ce sera :
browser-sync start --server --files "css/*.css"
Dans le cas de pages dynamiques, lorsque vous utilisez un serveur Web local, vous devrez démarrer Browsersync en mode serveur proxy :
browser-sync start --proxy "myproject.dev" --files "css/*.css"
Après avoir exécuté l'une des commandes ci-dessus, un code semblable à celui ci-dessous devrait apparaître dans votre console. En même temps, Browsersync devrait ouvrir dans votre navigateur par défaut la page du projet avec le service de suivi des modifications déjà lancé
[BS] Proxying: http://127.0.0.1
[BS] Access URLs:
-------------------------------------------
Local: http://myproject.dev:3000
External: http://192.168.1.1:3000
-------------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.1:3001
-------------------------------------------
[BS] Watching files…
Les deux premières adresses (Locale et Externe) devraient mener à la page principale de votre projet. Sauf que - comme le nom le suggère - la première peut être utilisée uniquement pour la communication entre les navigateurs au sein de votre ordinateur, sur lequel le service a été lancé. La deuxième devrait fonctionner sous un réseau donné et vous pouvez l'utiliser pour la communication avec d'autres appareils, par exemple en connectant le téléphone à un réseau Wi-Fi utilisé par votre ordinateur. Le champ d'application pour les deux adresses suivantes est identique à celles indiquées ci-dessus ; cependant, elles mènent à un écran UI (montré dans l'image ci-dessous), qui nous permet, entre autres choses :
- vérifier les adresses de notre serveur,
- vérifier quels appareils y sont connectés,
- démarrer un autre serveur pour notre projet et effectuer sa configuration,
- définir quelles actions sur la page sont suivies,
- vérifier l'historique Web,
- obtenir des informations sur les plug-ins installés,
- activer les options qui nous aideront à déboguer.
Browsersync pas uniquement pour les testeurs
Parce que Browsersync vous permet de suivre les changements dans CSS et HTML sur les pages sans recharger, il semble être un excellent outil pour soutenir le travail des développeurs. Si vous utilisez Grunt ou Gulp dans votre travail, vous ne devriez avoir aucun problème à ajouter Browsersync à votre environnement. Cela vous aidera à gagner du temps et à réduire la possibilité d'être surpris par le fonctionnement de votre site avec différentes résolutions de navigateur.
Browsersync et Docker
Je tiens à rassurer tous ceux qui, comme nous, aiment Docker, (si quelqu'un ne le connaît pas - je recommande de visiter la page du projet) qu'il est possible d'utiliser des images Docker avec Browsersync. Bien qu'il n'y ait actuellement pas d'image officielle disponible, je peux recommander en toute sécurité ustwo/browser-sync, qui est actuellement le plus populaire. Dans ce cas, il n'est pas nécessaire d'installer quoi que ce soit en dehors de Docker, dont l'installation a été déjà couverte dans notre blog - Vous n'avez qu'à lancer le serveur, comme dans le cas précédent, en utilisant l'une des deux configurations possibles.
Pour les pages statiques:
docker run -dt
--name browser-sync
-p 3000:3000
-p 3001:3001
-v $(PWD):/source
-w /source
ustwo/browser-sync
start --server --files "css/*.css"
Pour les pages dynamiques:
docker run -dt
--name browser-sync
--link myapp
-p 3000:3000
-p 3001:3001
ustwo/browser-sync
start --proxy "myapp:80" --files "css/*.css"
Où "myapp" est le nom d'un conteneur avec notre site Web.
À première vue, tout devrait se lancer de manière similaire à la configuration sans Docker ; cependant, gardez à l'esprit que dans ce cas, l'adresse externe (Externe) sera l'adresse du conteneur Docker et ne sera pas visible par les appareils externes sans configuration supplémentaire.
Presque tous les projets de développement Drupal sur lesquels nous travaillons chez Droptica sont construits avec Docker. Par conséquent, dans ce cas, il est beaucoup plus pratique pour nous de déplacer le lancement de Browsersync vers les fichiers de configuration docker-compose.yml et Dockerfile.
browser-sync:
build: ./Dockerfiles/browserync
links:
- myapp:myapp
volumes:
- ./docker/config.js:/source/config.js
command: start --proxy "myapp:80" --files "css/*.css" --no-ui --port 80
environment:
VIRTUAL_HOST: browsersync.{{HOST}}
Le chemin montré ci-dessus dans un paramètre de construction et signifie un endroit où le fichier Dockerfile est situé. Tandis que myapp est le nom d'un conteneur avec notre site Web. L'hôte virtuel fonctionne bien dans le cas où sur un serveur donné nous avons plus d'un projet qui souhaiterait utiliser des ports spécifiques. Vous pouvez également voir que nous avons renoncé à l'écran pour une configuration UI. Cependant, cela ne signifie pas que nous ne pouvons rien changer dans les paramètres de Browsersync. Dans ce cas, cela se fait en ajoutant un autre paramètre à la « commande » (par exemple. --no-ui --port 8000) ou en écrasant le fichier js (./docker/config.js:/source/config.js), qui devrait ressembler à celui disponible dans l'image. Si nous ne voulons pas changer la configuration, le paramètre volumes doit être supprimé. La liste complète des commandes est disponible dans la documentation de Browsersync.
Dockerfile:
FROM ustwo/browser-sync
EXPOSE 80
Dans le fichier Dockerfile, vous devez juste vous rappeler d'exposer un port afin que ngnix puisse rediriger notre service vers l'adresse indiquée. Bien sûr, il est possible de configurer ngnix de manière à permettre l'exposition en utilisant un hôte virtuel des deux ports, permettant l'utilisation du service de configuration avec l'écran UI aussi. Tout cela dépend de nos besoins actuels.
J'espère qu'avec ce texte, je vous ai convaincu au moins un peu d'expérimenter avec Browsersync et de réfléchir à sa capacité à vous aider dans votre travail.
