Chmury obliczeniowe, devops, programowanie ...

... moje doświadczenia w poszukiwaniu rozwiązań - Marcin Frątczak

[03 MyFood] Stworzenie szablonu HTML

Od czego zacząć jak niczego nie ma

Wpis powiązany z projektem MyFood. Szczegóły tutaj »
  • Stworzenie repozytorium [zrobione] – https://github.com/mfratczak/myfood-generator
  • Stworzenie szablonu szablonu html [w trakcie]
  • Wgranie aktualnej wersji projektu na domenę [wymyślam nazwę domeny, masz propozycje? pisz!]

Github

Przy tworzeniu nowego repozytorium, github automatyzuje tworzenie pliku z licencją (wybrałem licencje MIT). Drugą rzeczą ułatwiającą życie jest utworzenie automatycznie pliku .gitignore na podstawie wybranej technologii projektu. Co daje ten plik?

Git sprawdza plik .gitignore, i przy kolejnym pushu, ignoruje pliki nie powiązane z projektem, lub pliki które są generowane automatycznie (cache, kompilacje itp).

Dzięki temu nie wysyłamy do repo zbędnych plików, oraz trzymamy porządek.

Szablon strony / wygląd

Projekt tworze etapami.

  • stworzenie szablonów html
    • główna strona
    • logowanie
    • wygląd modułów
  • wrzucenie szablonów do flask
  • oprogramowanie po stronie backend i frontend elementów szablonów

Co mi daje przygotowanie szablonów oddzielnie, z wykorzystaniem dockera?

  • instalacja npm + gulp w dockerze
  • wykorzystanie pelnego repozytorium semantic ui (możliwość włączania / wyłaczania modułow, kompilacja plików less)
  • wykorzystanie live preview
    • co to jest i po co? A więc na jednym monitorze mam edytor, gdzie edytuje pliki html, css itp, a na drugim jest otwarta przeglądarka gdzie każda zmiana w plikach powoduje natychmiastowy podgląd. Brak konieczności przełączania się z edytora do przeglądarki i wciskania: CTRL + F5 (odświeżenie okna)
    • po co to? Bo to ułatwia pracę. Przy tworzeniu szablonu, jest pełno mały zmian, sprawdzania wyglądu, coś co jest męczące :)Dzięki temu mogę pracować w jednym programie i widzieć podgląd od razu. Robisz zapisz, a po sekundzie widzisz zmiany
    • aby odpalić live preview należy posiadac gulp + wtyczke w przeglądarce (nazwa LiveReload)

 

Co to docker przeczytać możesz tutaj: 1, 23 (chcesz więcej? napisz komentarz)

Pierwsze kroki z semantic ui przeczytasz tutaj, oraz przy okazji zobaczysz co można osiągnąć z tą paczką.

Semantic można ściągnąć jako paczke z wszystkimi stylami i dodawać tylko własne. Jednak jeśli chcesz stworzyć lekki szablon to musisz sam skonfigurować projekt z wykorzystaniem npm + gulp. (co to gulp?, co to npm? długo by wyjaśniać dlatego podaje linki. )

 

W projekcie MyFood będzie kilka kontenerów dockera. (python, mysql, ..) . W dodatkowym kontenerze, który będzie odpalany tylko do tworzenia szablonu znajdować się będzie Npm + Gulp.

Jeśli cię to nie interesuje, zapraszam do kolejnego posta, gdzie już będzie gotowy wstępny szablon html i zacznie się prawdziwa zabawa!

Dzisiaj tworzymy kontener dockera do szablonów!

Utworzyłem dwa repozytorium. Jeden to sam czysty projekt z plikami html + css + js (tylko do podglądu dla was). Drugie repozytorium to docker (w którym odpalam npm + gulp). Do szybkiego testu użyjemy dwóch.

Wejdź w dany katalog. A następnie zaciągnij repozytorium:

git clone git@github.com:mfratczak/docker-node-gulp-bower.git livetest

Wejdź do katalogu „livetest”. Zbuduj obraz dockera:

docker build -t gulp .

Następnie, klonujemy repozytorium z przykładowym kodem źródłowym szablonu html

git clone git@github.com:mfratczak/node-gulp-livereload.git opt

Następnie instalujemy zależności NPM

docker run --rm -i -t -v $(pwd)/opt:/opt gulp npm install

następnie odpalamy live preview

docker run --rm -it -p 35729:35729 -p 8080:8080 -v $(pwd)/opt:/opt gulp gulp live

I to na tyle …

Wchodząc na stronę: http://localhost:8080/ widzimy nasz plik html.

Aby edycja live zadziałała, musimy jeszcze zainstalować dodatek do przeglądarki o nazwie „LiveReload” (dostępne na stronach chrome store, oraz ff extension). Po instalacji dodatku, każda zmiana pliku css, js, html widać w przeglądarce.

Koniec

Pogubiłeś się? hmmm, ja po pierwszym redagowaniu posta również. Jeśli więc dalej się gubisz napisz. Z twoją pomocą poprawie nieczytelne rzeczy.

Może to wygląda na skomplikowane. Jednak nie jest aż tak źle, jak wygląda. Jak się wkroczy w w świat dockera to potem wszystko jest łatwiejsze.

 

Ps. Czytałem tego posta 3 razy. Pewnie będzie kilka razy w przyszłości ulepszany i upraszczany :) . Jeśli masz propozycje, pisz komentarz (co wyrzucić, co zostawić, czego za dużo).

Dodaj komentarz

Your email address will not be published.

*

© 2017 Marcin Frątczak

Theme by Anders NorenUp ↑

Google Analytics Alternative