Browsersync - Twój asystent testów
Przy tworzeniu stron internetowych nieraz spotkałeś się zapewne z odmiennym wyglądem swojej strony na różnych przeglądarkach, nie wspominając o różnych urządzeniach. W zależności od tego ile różnych konfiguracji będziemy chcieli sprawdzać, czas poświęcony na ich przetestowanie będzie szybko wzrastał, a entuzjazm przy powtarzaniu tej samej czynności na kolejnym urządzeniu, będzie zapewne w podobnym tempie malał. Jednak dzięki Browsersync możesz daną czynność wykonywać jednocześnie nie tylko na kilku przeglądarkach, ale także na kilku różnych urządzeniach.
Jak to działa?
Browsersync uruchamia mały serwer, przy okazji wstrzykując na każdą ze stron skrypt umożliwiający ich komunikację z serwerem za pomocą technologii WebSocket. W przypadku wystąpienia określonych zdarzeń na stronie, jak np. modyfikacja pliku CSS, przechodzenie pomiędzy stronami, przewijanie strony, wprowadzanie danych do formularza itp. serwer komunikuje to wszystkim podłączonym urządzeniom. Dzięki temu - niezależnie od tego, na którym urządzeniu zachodzi akcja - komunikat wędruje do wszystkich. Ty jako użytkownik nie musisz jednak o niczym wiedzieć, ponieważ wszystko to dzieje się “automagicznie”.
Jak zacząć?
Na początku musimy zainstalować Node.js oraz Browsersync. Instalacja Node.js (poniżej przedstawione komendy sprawdzone zostały na Linuxie, użytkowników innych systemów odsyłam do stron projektów)
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash
apt-get install -y nodejs
Instalacja Browsersync globalnie
npm install -g browser-sync
Teraz, kiedy mamy już wszystko zainstalowane, nie pozostaje nam nic innego jak wystartować serwer i sprawdzić jego działanie. Możemy to zrobić na dwa sposoby, w zależności od tego, jakiego rodzaju jest to projekt. Dla stron statycznych będzie to:
browser-sync start --server --files "css/*.css"
W przypadku stron dynamicznych, kiedy to korzystasz już z lokalnego serwera WWW, będziesz musiał uruchomić Browsersync w trybie serwera proxy:
browser-sync start --proxy "myproject.dev" --files "css/*.css"
Po wykonaniu jednej z powyższych komend w Twojej konsoli powinien pokazać się kod podobny do kodu poniżej. Jednocześnie Browsersync powinien w Twojej domyślnej przeglądarce otworzyć stronę projektu z już odpaloną usługą śledzenia zmian.
[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…
Dwa pierwsze adresy (Local i External) prowadzić powinny do strony głównej Twojego projektu. Z tym, że - jak sama nazwa wskazuje - pierwszego możesz używać wyłącznie do komunikacji pomiędzy przeglądarkami w obrębie Twojego komputera, na którym uruchomiona została usługa. Drugi natomiast działać powinien w ramach danej sieci i możesz go wykorzystać do komunikacji z innymi urządzeniami np. poprzez podłączenie się telefonem do sieci wi-fi, z której korzysta Twój komputer. Zakres działania dwóch kolejnych adresów jest identyczny z tymi przedstawionymi powyżej, jednak pod tymi adresami znajduje się ekran UI (przedstawiony na obrazku poniżej), dzięki któremu możemy między innymi:
- sprawdzić adresy naszego serwera
- sprawdzić jakie urządzenia są do niego podłączone,
- wystartować kolejny serwer dla naszego projektu i skonfigurować go,
- ustawić jakie akcje na stronie są śledzone,
- sprawdzić historię przeglądanych stron,
- uzyskać informacje o zainstalowanych pluginach,
- włączyć opcje, które pomogą nam w debugowaniu.
Browsersync nie tylko dla testerów
Z uwagi na to, że Browsersync umożliwia śledzenie zmian CSS i HTML na stronach bez konieczności ich przeładowywania, wydaje się świetnym narzędziem wspomagającym pracę deweloperów.Jeżeli w swojej pracy wykorzystujesz Grunt lub Gulp, to nie powinieneś mieć problemu z włączeniem do swojego środowiska Browsersynca. Pomoże Ci on zaoszczędzić czas oraz zmniejszyć możliwość zaskoczenia Cię tym, jak stworzona przez Ciebie strona zachowuje się na różnych przeglądarkach i rozdzielczościach.
Browsersync, a Docker
Wszystkich, którzy tak jak my lubią Dockera, (jeżeli ktoś nie zna - polecam odwiedzić stronę projektu) spieszę uspokoić, że możliwe jest korzystanie z Browsersynca za pomocą obrazów dockerowych. Wprawdzie nie jest obecnie dostępny żaden oficjalny obraz, jednak spokojnie mogę polecić ustwo/browser-sync, który jest obecnie najpopularniejszy. W tym przypadku niczego poza samym Dockerem, którego instalacje przedstawiliśmy już na naszym blogu, nie trzeba instalować - wystarczy wystartować serwer, podobnie jak w poprzednim przypadku, przy użyciu jednej z dwóch możliwych konfiguracji.
Dla stron statycznych:
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"
Dla stron dynamicznych:
docker run -dt
--name browser-sync
--link myapp
-p 3000:3000
-p 3001:3001
ustwo/browser-sync
start --proxy "myapp:80" --files "css/*.css"
Gdzie “myapp” to nazwa kontenera, w którym znajduje się nasza strona WWW.
Na pierwszy rzut oka wszystko powinno wystartować się podobnie jak w konfiguracji bez dockera, jednak należy pamiętać, że w tym przypadku adres zewnętrzny (External) będzie adresem kontenera dockerowego i nie będzie widoczny dla urządzeń zewnętrznych bez dodatkowej konfiguracji.
W Droptica niemal wszystkie projekty z zakresu Drupal developmentu, nad którymi pracujemy, są już budowane za pomocą Dockera. Dlatego w takim wypadku dużo wygodniej jest nam przenieść uruchomienie Browsersynca do plików konfiguracyjnych docker-compose.yml oraz pliku Dockerfile.
docker-compose.yml:
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}}
Ścieżka podana powyżej w parametrze build oznacza miejsce, gdzie znajduje się plik Dockerfile. Myapp natomiast jest nazwą kontenera, w którym znajduje się nasza strona WWW. Virtual host sprawdza się w przypadku, kiedy na danym serwerze mamy więcej niż jeden projekt, który chciałby korzystać z określonych portów. Można tu także dostrzec, że zrezygnowaliśmy z ekranu do konfiguracji UI. Nie oznacza to jednak, że nie możemy zmieniać nic w ustawieniach Browsersynca. W tym wypadku jednak odbywa się to poprzez dopisanie kolejnego parametru do “command” (np. --no-ui --port 8000) lub nadpisanie pliku js (./docker/config.js:/source/config.js), który powinien wyglądać podobnie jak ten dostępny w obrazie. Jeżeli nie chcemy nadpisywać konfiguracji należy usunąć parametr volumes). Pełna lista komend dostępna jest w dokumentacji Browserynca.
Dockerfile:
FROM ustwo/browser-sync
EXPOSE 80
W pliku Dockerfile należy jedynie pamiętać o wystawieniu portu tak, aby ngnix był w stanie przekierować naszą usługę pod wskazany adres. Oczywiście możliwe jest takie skonfigurowanie ngnixa, które umożliwi wystawienie za pomocą vitrual hosta obydwu portów tak, aby umożliwić korzystanie również z usługi konfiguracji za pomocą ekranu UI. Wszystko to zależy od naszych aktualnych potrzeb.
Mam nadzieję, że tym tekstem chociaż odrobinę przekonałem Cię do poekperymentowania z Browsersynkiem i przemyślenia, czy sprawdzi się również w Twojej pracy.
