node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

mpgeneric

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