Zrobić w końcu coś co działa czyli pierwszy projekt w oparciu o MEAN.TS – Część 1

Zaczęło się!

Rozpocząłem pracę nad projektem wykorzystując technologie które znałem tylko z widzenia. Pierwszym co mi przyszło do głowy to znalezienie jakiegoś innego bloga gdzie było by opisane to co chcę osiągnąć. Pomysł wydawał się słuszny.

Racja, tylko się wydawał. Po dwóch dniach klikania, czytania i przepisywania różnego rodzaju tutoriali aby postawić jakiś przykład a potem zacząć go przerabiać do własnych potrzeb. W końcu nadszedł dzień trzeci kiedy to powiedziałem dosyć.

Byłbym zapomniał, technologie które wybrałem to:

za backend odpowiadać będzie Node.js oraz Express za frontend natomiast Angular2. Wspomagaczami zostali TypeScript, Gulp oraz Bower. Bazą danych będzie MongoDB a wszystko to opakujemy w dockera.

Dzień trzeci, zróbmy w końcu coś co działa.

Postanowiłem porzucić blogi oraz tutoriale i zrobić wszystko po swojemu.

Co będziemy robić ? Zrobimy sobie logowanie i być może jakąś prostą rejestracje.

Do dzieła!

Wymagania: zainstalowany docker, docker-compose oraz w przypadku OS X docker-machine. Node i npm również może być pomocny.

Tworzymy sobie katalog z projektem

Przechodzimy do katalogu app

Następnie wykonujemy polecenie:

po odpowiedzeniu na kilka pytań zostanie utworzony plik package.json który będzie między innymi zawierał spis wszystkich aplikacji do zainstalowania.

Następnie zainstalujemy Express i spróbujemy uruchomić na lokalnej maszynie.

parameter –save sprawia, że express automagicznie zapisuje nam się w zależnościach w pliku package.json.

Sprawmy aby to zadziałało! Tworzymy plik server.js a w nim następujący kod

Wykonujemy polecenie

i przechodzimy na adres http://127.0.0.1:3000 w przeglądarce co powinno nam zwrócić informację czy nasza aplikacja żyje.

Kolejnym krokiem będzie zamknięcie tego w kontenerze.

Najpierw w pliku package.json znajdźmy sekcję scripts i sprawmy aby wyglądała mniej więcej tak jak poniżej, chodzi głównie o start

Zabieramy się za dockera. W katalogu projektu, zaraz obok folderu app utwórz plik Dockerfile o następującej treści

Drugim potrzebnym plikiem jest docker-compose.yml

Mamy wszystko aby uruchomić nasz projekt w kontenerze. Uruchamiamy polecenie

a następnie

Tutaj kończymy ten spis, kontener z projektem powinien się budować i wstawać bez problemu. A po odpaleniu w przeglądarce na porcie 3000 odpowie nam czy wszystko jest ok.

Uwaga dla użytkowników OS X, musimy wyciągnąć ip z docker-machine

Przy tworzeniu maszyny wirtualnej warto wykorzystać polecenie które podaje poniżej, ponieważ domyślne które podaje dokumentacja ustawia tylko 1GB pamięci co okazuje się za mało

Ostatnia podpowiedź to gdyby podczas wykonywania docker-compose up dostaniemy informację o braku praw do pliku server.js należy na lokalnej maszynie ustawić mu prawa 766

W kolejnej części zamienimy nasz plik server.js na projekt wygenerowany przez generator Express oraz skonfigurujemy Gulpa aby kompilował pliki TypeScript do JavaScript przy każdym uruchomieniu serwera oraz odświeżał podczas zmian.

GitHub

https://github.com/thehardway15/MEAN.TS