mpgeneric v1.0.7

Media Press Generic - seed angularowy:

Co musimy zrobić żeby ten projekt zadziałał:

• po pierwsze instalujemy node.js
  • wybieramy najnowszą wersje
• potrzebujemy prawdopodobnie (niektóe pakiety o to krzyczą) klienta git-a
  • polecam instalacje metodą dalej, dalej dalej ale można sobie pod siebie dopasować
• restartujemy koputer bo pewnie nie zadziała nam podstawowa komenda w konsoli (naszym ulubionym narzędziu ;) ) tj. npm
• skoro już zrestartowaliśmy to po kolei w konsoli:
  • npm i gulp-cli -g
  • npm i typescript -g
  • npm i lite-server -g
    • opcjonalnie bo jest to nakładka do node.js umożliwająca szybkie zahostowanie apki
• następnie wchodzimy do katalogu gdzie mamy ten projekt (/MediaPressGeneric/) i po kolei:
  • npm i i czekamy aż skończy (w konsoli może być czerwono ale raczej to nie powinien być problem. W razie w postaram się pomóc)
• w tym samym katalogu po skończeniu instalacji z node mamy już wszystko co jest nam potrzebne :) aby zobaczyć działający projekt musimy tylko zrobić:
  • gulp serve żeby zahostować naszą apkę (sposób stricte pod developerkę z opcją hot-reload w przeglądarcę (patrz punkt poniżęj - jak skonfigurować chrome))
  • gulp build - builduje apkę pod produkcję (wymaga uzupełnienia przez relmana konfiguracji)

To tyle, Media Press Generic powinien nam się odpalić w przeglądarce na http://localhost:3000/#!/

Konfiguracja czyli co gdzie jak i kiedy

1. package.json czyli nasz główny plik z pakietami (zewnętrzne dllki w świecie .Neta)

• składa się z kilku fragmentów ale to co nas interesuje to dependencies i devDependecies
• devDependecies to miejsce gdzię lądują TYLKO pakiety które są potrzebne do developerki tj. np:
  • gulp w naszej wersji
  • dodatki do gulpa bo potrzebujemy żeby poza buildem zrobił nam kawę ;)
  • inne
• dependencies czyli miejsce gdzie wpada TYLKO to co jest nam potrzebne do działania naszej apki na produkcji
  • w tym projekcie mamy już wszystko co jest potrzebne do działania w ilości minimalnej, jak potrzebujemy coś innego to wrzucamy tutaj, inaczej webpack (patrz niżej) niewychwyci tego pakietu i nie zadziała nam to w aplikacji
  • przykadowe pakiety to angular, angular-material etc.

2. tslint.json czyli linter - plik konfigurujący pomagacz składni i czystości kodu (spacje, klamry w odpowiednim miejscu etc) - działa tylko z edytorem który go wykorzystuje ale pomaga w pisaniu (jak coś irytuje to da się wyłaczyć, dokonfigurować pod siebie )

3. tsconfig.json - konfiguracja typescript-a, w wersji wrzuconej tutaj jest optymalnie na moją wiedzę, ale zapraszam do zabawy nim bo opcji jest mnóstwo a i popsuć można sporo, ewnetualnie nawet coś ulepszyć ;)

4. gulpfile.js czyli plik do którego wchodzi gulp jak tylko w katalogu naszej apki wpiszemy gulp [nazwa taska]

• tutaj możemy pisać własne taski czyli proste (lub nie) skrypty js robiące za nas kawę i np build
• gotowe i działajce w generic:
  • serve - odpala serwer www, builduje apkę, hostuje ją na domyślnie http://localhost:3000/#!/ i nasłuchuje zmian w kodzie odpalając automatycznie rebuild i reload przeglądarki
    • drobna uwaga - gulp potrafi się przekręcić i zapełnić sobie stos - po plus minus 30 hot-reloadzie trzeba niestety odpalić proces gulp serve jeszcze raz
  • build - builduje nam do katalogu .dist gotowy do wrzucenia na produkcje pakiet naszej aplikacji. Możemy to przetestować wchodząc do tego katalogu i w konsoli odpalając lite-server co (jeśli go zainstalowaliśmy) odpali nam serwer www i zahostuje apkę na wolnym porcie localhosta (powinno samo otworzyć kartę). Lite-server wspiera hot-reload.
• katalog gulp_task czyli miejsce gdzie gulpfile.json odwołuje się w poszukiwaniu kilku innych plików gdzie ma swoje konfiguracje i taski
  • browsersync.js - to tylko konfiguracja serwera www z hot-reloadem, można coś pokonfigurować typu port etc - konfiguracja tego taska to katalog conf i odpowiedni plik
  • misc.js - czyli inne ;)
  • katalog conf - tutaj jest jeszcze konfiguracja tasków gulpa w pliku gulp.conf.js ale nie ma co tam szukać jak wszystko działa

5. webpack.js główny "składacz" naszej apki zasługujący na osobny punkt :)

• w tym pliku mamy główną konfiguracje samego procesu webpacka ale własciwe configi developersji i produkcyjny do katalog conf i webpack.dist.conf.js oraz webpack.conf.js
• sam webpack to ogromn możliwości których nieogarniam bo nie było potrzeby - zapraszam do niezbyt przyjaznej dokumentacji
• każdy config to najpierw budowa modułu i szukanie plików odpowieniego typu (html, ts, json etc)
• następnie mamy pluginy typu uglify etc
• output i jego nazwy
• dodatkowe konfiguracje pluginów webpacka

Dodatek - czyli jaki skonfigurować Chrome i Visual Studio Code

Chrome:

• musimy odpalić chrome z otwartym portem do debugowania -remote-debugging-port=9222
• teraz możemy używajac dowolnej wtyczyki do debugowania debugować naszą apkę (polecam vscode ale zadziała też atom, sublime-text i inne)
• bez protokołu możemy śmiało korzystać z F12 w chrome czyli z debugowania w przegladarce - jest świetne i wystarczy w kazdym wypadku bo każda inna opcja to tak naprawdę nakładka na debugger z chroma
• ale osobiście polecam vscode ;)

Visual Studio Code

• zaczynamy od instalacji ;)
• osobiście mam wersje insiders bo ma zawsze najnowsze dodatki ale to takie zboczenie ;)
• z polecanych dodatków ułatwiających życie:
  • Angular 1 JavaScript and Typescript Snippets
  • Auto import
  • beautify
  • tfs
  • tslint
• debugger for chrome - czyli dodatek który wymaga osobnego punktu:
  • to pozwala nam na debugowanie w chromie (jeśli mamy otwarty port patrz wyżej)
  • działająca konfiguracja

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Launch Chrome against localhost, with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "sourceMapPathOverrides": {
      "webpack:///*": "/*"
    }
  }, {
    "name": "Attach to Chrome, with sourcemaps",
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "sourceMaps": true,
    "url": "http://localhost:3000/*",
    "webRoot": "${workspaceRoot}\\src",
    "internalConsoleOptions": "openOnSessionStart",
    "smartStep": true ,
    "sourceMapPathOverrides": {
      "webpack://*": "${workspaceRoot}\\*"
    }
  }]
}

W razie pytań, wątpliwości, problemów zapraszam