[PL] Let’s Write – Konfiguracja

Do tej pory nie podałem nazwy projektu dlatego teraz to robię. Moja aplikacja pisana w ramach konkursu „Daj Się Poznać” nosi nazwę Let’s Write. Od teraz łatwo będzie znaleźć wpisy mówiące o niej bo będę tę nazwę wpisywał w tytule ;)

Poprzednio powiedziałem kilka słów o tym co będę robił. Dzisiaj pora na pierwszy wpis techniczny.

Poprzednie wpisy z serii:

Udało mi się wstępnie skonfigurować środowisko. Ktoś mógłby zapytać co takiego trzeba konfigurować żeby pisać w javascripcie, przecież to tylko skrypty, które się pisze w notatniku? Nie do końca. Projekt będę tworzył z użyciem bilioteki React.js. Dodatkowo chcę korzystać z LESSa do pisania styli. Wymaga to więc sporej ilości plików i dodatkowo trzeba niektóre elementy przetworzyć do końcowej postaci (np. style z plików .less do .css).

Oprócz tego fajnie jest nie musieć kopiować wszystkiego ręcznie. W takim wypadku przydaje się jakieś oskryptowanie zadań. Postanowiłem użyć do tego Gulpa. Dla tych, którzy nie znają tego narzędzia powiem, że Gulp jest biblioteką pozwalającą automatyzować zadania. Wszystko w nim się pisze z użyciem javascriptu. Sam Gulp działa w oparciu o Node.js. Tak więc nadal mogę korzystać z jednego języka w projekcie ;)

Pierwsza krew

Pierwszym zadaniem jakie mnie czekało było przygotowanie plików konfiguracyjnych, zainstalowanie wszystkiego i dodanie skryptów dla zadań.

Ekwipunek

Jeśli chodzi o narzędzia z jakich korzystam:

  • Visual Studio Code – najważniejszy program w tej całej zabawie. Bardzo przyjemny i lekki edytor Microsoftu. Będzie mi służył jako edytor do większości plików
  • Cmder – nakładka na konsolę i emulator linuxowego terminala. Z wielu podobnych, dostępnych dla systemu Windows ten wydał mi się najlepszy i w dodatku dobrze wygląda. Z poziomu Cmdera będę uruchamiał wszelkie skrypty, obsługiwał większość poleceń GITa i przeglądał foldery. Jedyna wada Cmdera to minimalne problemy z wydajnością. Nie wiem z czego to wynika, ale ma się czasami wrażenie, że konsola nie działa płynnie.
  • SourceTree – narzędzie wspomagające pracę z GITem. Z jego pomocą przeglądam repozytorium i commituję pliki. Łatwiej mi jest dodawać opisy do commitów i przeglądać strukturę repozytorium korzystając z GUI.

Całą moją dotychczasową pracę możecie przeglądać na GitHubie. Może w przyszłości dodam treść do pliku Readme gdzie opiszę jak uruchomić projekt.

Labirynt na dysku

Pierwsze zadanie jakie mnie czekało po utworzeniu repozytorium to utworzenie potrzebnej mi struktury folderów.

Założyłem, że pliki na których pracuję będą w innym miejscu niż pliki gotowe do uruchomienia. Oprócz tego oddzieliłem kod backendu od kodu frondendu. Na początek będę się skupiał na frontendzie.

Przez takie założenie struktura katalogów wyszła głęboka i zawiła. Jednak pozwala mi ona zapanować nad większą ilością plików.

Aktualnie struktura katalogów wygląda tak jak na obrazku:

Paczki

Kiedy miałem już pododawane katalogi przyszedł czas na dodanie pliku package.json dla frontendu.

Plik package.json jest plikiem czytanym przez manager pakietów npm. Zawiera podstawowe informacje o projekcie i dodatkowo, co jest głównym powodem jego dodania u mnie, pozwala zapisać wszystkie wymagane przez projekt zależności. Dzięki temu jedną komendą  npm install  mogę zainstalować wszystkie biblioteki potrzebne mi w projekcie. Pliki package.json będę miał dwa – osobny dla serwera i osobny dla frontendu.

Linki, które bardzo mi się przydały przy tym etapie:

https://docs.npmjs.com/files/package.json

http://browsenpm.org/package.json

Tutaj dodam, że Visual Studio Code mocno ułatwia pracę z plikiem package.json. Przy dodawaniu zależności konieczne jest podanie w jakich wersjach ich potrzebujemy. VS Code przy dodawaniu dependency podpowiada nam jaka jest najnowsza wersja danej biblioteki. Dzięki temu nie trzeba szukać tego w internecie.

No i GIT

Po dodaniu konfiguracji zależności pora na okiełznanie GITa. Domyślnie Git będzie chciał wrzucić wszystkie pliki jakie znajdują się w folderze projektu. Jednak pracując z Node.js dodawane jest sporo plików, które do repozytorium nie powinny trafić. Przede wszystkim są to pliki z katalogu z zainstalowanymi bibliotekami (node_modules). Po pierwsze jest ich kilkadziesiąt tysięcy, a po drugie dodaje się je komendą  npm install  więc nie ma potrzeby kopiowania ich i pobierania z repozytorium.

Żeby powiedzieć Gitowi, których plików nie chcę commitować dodałem w głównym folderze plik .gitignore skonfigurowany dla Node.js. Można go pobraż z GitHuba:

https://github.com/github/gitignore/blob/master/Node.gitignore

Dopisałem do niego jeszcze katalog z moimi plikami gotowymi do uruchomienia ponieważ traktuję je jak pliki binarne w projektach robionych w języku kompilowanym. Ignorowany katalog dodaje się po prostu jako nową linię w pliku .gitignore. Np. taki zapis będzie ignorował cały katalog dist:

Gulp, Gulp

W tym momencie, na koniec tego etapu, zostało mi dodanie tasków w Gulpie. Teoretycznie prosta rzecz. Jednak zajęło mi to prawie 2h…. Problem był taki, że chciałem dodać od razu jak najwięcej zadań przydatnych później. Ostatecznie skończyłem ze skryptem, który kompiluje pliki jsx (o nich następnym razem) i pliki less, łączy skrypty w całość i przenosi odpowiednie pliki do katalogu dist. Dodatkowo minifikuje style i skrypty. Nie będę ukrywał, że sporo kodu Gulpa skopiowałem z internetu. Bardzo przydatna była strona https://jonsuh.com/blog/integrating-react-with-gulp/

Oczywiście starałem się wszystko zrozumieć i przeanalizować ale pominąłem zastanawianie się samemu jak to zrobić.

Dzięki Gulpowi wystarczy, że wpiszę w konsoli  gulp i dostanę w folderze dist skompilowane style, skopiowane skrypty i skopiowane pliki html.

Jedziemy dalej

Zastanawiam się jak dużo kodu wrzucać do wpisów. Dlatego tym razem nie wrzuciłem nic :P Dajcie znać jakie macie o tym zdanie. Wolicie dużo kodu czy tylko niezbędne minimum i obszerny opis?

A ja tymczasem zabieram się do dalszej pracy :)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *