Jeszcze jeden blog o programowaniu

Radosne twórczości leniwego programisty

Archive for the ‘Vue.js 2’ Category

VueJS 2 – dostęp do konfiguracji środowiska

leave a comment »

vuejs logoW każdym co bardziej złożonym projekcie zachodzi potrzeba przechowywania różnych konfiguracji w zależności od środowiska: developerskiego, produkcyjnego, testowego, eksperymentalnego, niebieskiego i każdego innego. Oczywiście framework VueJS nie odstaje od normy i również oferuje możliwość takiej konfiguracji.

Na początku od razu zaznaczam, że zmiany w plikach konfiguracyjnych lub tworzenie nowych plików wymaga ponownego przebudowania i uruchomienia aplikacji – brak odzwierciedlania jakichkolwiek zmian w aplikacji może się okazać dość frustrujące jeśli zapomnimy o tej czynności – a często w konsoli widzimy, że się przebudowało – tylko jednak coś zmian z konfiguracji nie chwycił.

Konfiguracja dla różnych środowisk przechowywana jest domyślnie w 3 plikach (po utworzeniu czystego projektu):

Wyżej wymienione pliki ładowane są dokładnie w tej kolejności ewentualnie rozszerzając lub nadpisując dotychczasowe wartości zmiennych, więc w czystej instalacji na początku wczytywany jest plik prod.env.js, stałe w nim zawarte nadpisywane są plikiem dev.env.js a te z kolei test.env.js. Proste i logiczne (…długie jak drzewo genealogiczne naszej rasy…)

Oczywiście nic nie stoi na przeszkodzie aby, jeśli zajdzie taka potrzeba, dodawać swoje pliki konfiguracyjne definiujące ustawienia dla nowych środowisk. Np. staging – dodając przykładowo plik staging.env.js o przykładowej treści:

i wtedy np. w pliku dev.env.js rozszerzamy środowisko stagingEnv – a nie prodEnv jak to jest domyślnie.

Samo ustawienie bieżącego środowiska – wg którego budowany i uruchamiany jest VueJS odbywa się w pliku ./projekt/src/main.js w linijce:

chociaż lepszą z praktycznego punktu widzenia wersją byłaby poniższa:

I teraz, jeśli zawsze (we wszystkich środowiskach) potrzebujemy w aplikacji jakieś stałe to definiujemy je w pliku prod.env.js odpowiednio nadpisując w pozostałych plikach, jeśli oczywiście jakieś zmiany będą potrzebne.

W komponentach nic nie musimy importować, a dostęp do zmiennej jest wygląda w taki sposób: process.env.API_URL

Jeśli zbudujemy teraz projekt dla odpowiedniego środowiska, np.: dla produkcji npm run build otrzymamy katalog dist, w którym to znajduje się zbudowana chwilę temu aplikacja. Przechodząc w linii poleceń do tego katalogu cd ./projekt/dist i uruchamiając tymczasowy serwer python3 -m http.server 8181, w przeglądarce pod adresem 127.0.0.1:8181 powinna być dostępna nasza aplikacja – warto w tym miejscu potwierdzić różniące się między środowiskami zmienne, żeby nie było nieprzyjemnych niespodzianek.

Written by Filip Górczyński

2018.02.26 at 16:50:47

Czysty projekt VueJS 2 i używanie średników a zgodność ze standardami ESLint

leave a comment »

vuejs logo

JavaScript jako bardzo elastyczny język programowania nie wymaga używania średników na końcu instrukcji. Nie wymaga – i nawet zgodnie z zaproponowanym standardem JavaScript, nie zaleca się ich stosowania.

Jednak moim skromnym zdaniem – jako kogoś, kto kiedyś popełnił trochę kodu w C i Perlu – z jakiegoś powodu średniki zostały do składni wprowadzone, a ich stosowanie powoduje (ponownie – to tylko moje osobiste odczucie), że kod staje się też czytelniejszy i ładniejszy.

Utwórzmy zatem czysty projekt z ustawieniami jak poniżej – istotna jest linijka "Pick an ESLint preset Standard", gdyż różne standardy mogą się czepiać nadmiarowych średników lub ich braku.

VueJS – podczas inicjowania czystego projektu pozwala wybrać standard ESLint, w ramach którego sprawdzana będzie zgodność kodu z tym standardem, m. in. po uruchomieniu serwera deweloperskiego. Przy wyborze standardowego sprawdzania składni, dodanie średników na końcach instrukcji będzie skutkowało następującym  błędem:

Szczegóły błędu dostępne są pod adresem wskazanym w ramach ostrzeżenia: Extra semicolon.

Rozwiązaniem jest dodanie 'semi': [2, 'always'] do pliku .eslintrc.js:

Ponowne uruchomienie aplikacji będzie wymagało poprawienia (dodania) średników we wszystkich wskazanych miejscach, jednak nadal twierdzę, że nadmiarowy średnik jest lepszy niż jego pominięcie – gdyż próby zastępowania elementów składni wartościami domyślnymi mogą skutkować kodem podobnym do tego z Perla:

Całość dostępna w repozytorium.

Dodatkowe źródła i (głównie) kontrargumenty:

  1. JavaScript Style: Semicolons, or No?
  2. StandardJS#Semicolons
  3. JavaScript Semicolon Insertion. Everything you need to know
  4. An Open Letter to JavaScript Leaders Regarding Semicolons
  5. Understanding Automatic Semicolon Insertion in JavaScript

Written by Filip Górczyński

2018.02.22 at 09:23:51

CORS Headers – komunikacja VueJS i Django

leave a comment »

vuejs logoCross-Origin Resource Sharing (CORS) to mechanizm wykorzystujący dodatkowe nagłówki HTTP pozwalające różnym agentom (np. przeglądarkom) na dostęp do zasobów znajdujących się na innej domenie, porcie czy protokole niż aktualna. 

Na potrzeby wpisu zakładam, że framework (Django) i biblioteki (Vue.js i axios) z których będziemy korzystać – mamy już zainstalowane w projekcie.

W projekcie Vue wprowadźmy następujące zmiany:

W pliku App.vue:

W pliku config/dev.env.js:

Pliki src/assets/logo.png i src/components/HelloWorld.vue możemy wyrzucić, jako w tej chwili nie używane.

W backendzie natomiast, w pliku views.py naszej aplikacji (movies):

i dodajemy routing dla naszej aplikacji w pliku urls.py (plik ten domyślnie nie istnieje i należy go utworzyć):

Następnie dokunujemy zmian w plikach urls.py – głównym pliku routingu całego projektu Django:

oraz settings.py:

Startujemy serwery poniższymi poleceniami w odpowiednich katalogach:

Uruchamiamy przeglądarkę i otwieramy 2 zakładki. W pierwszej zweryfikujemy tylko, czy serwer Django zwraca prawidłową odpowiedź – JSON (http://127.0.0.1:8000) i jeśli tak, to od razu można ją zamknąć. W drugiej zakładce otwieramy narzędzia programisty i przechodzimy pod adres aplikacji Vue (http://127.0.0.1:8080).
Dziwne – w zakładce Network zobaczyć możemy, że żądanie GET do serwera się udało i nawet możemy podejrzeć zwrócone wyniki:

Czyli wszystko jest prawidłowo? No nie do końca niestety. O ile domena (host) – w tej sytuacji 127.0.0.1 nie są problemem – to sprawa komplikuje się właśnie w przypadku niezgodności portów i przeglądarka może nam w konsoli sypnąć następującym błędem:

Problem nasz rozwiązać możemy paczką django-cors-headers, jej instalacja nie odbiega za bardzo od instalacji innych paczek Pythona:

pip install django-cors-headers==2.1.0

Zmieniamy trochę w pliku settings.py (ale naprawdę ciut-ciut):

… restartujemy serwer Django i już, wchodząc na adres naszej aplikacji powinniśmy cieszyć się pobranymi z serwera danymi.

Wymagane paczki do postawienia projektu Django znajdują się  w katalogu backend/requirements/base.txt, natomiast całość kodu źródłowego bezpośrednio w repozytorium VueJS-Django-CORS.

Dla zainteresowanych można jeszcze poszukać informacji na temat Same Origin Policy.

Dodatkowe źródła (często z fajnymi obrazkami):

  1. MDN CORS
  2. Understanding CORS
  3. Understanding CORS: Cross-Origin Resource Sharing
  4. Understanding and using CORS

 

Written by Filip Górczyński

2018.02.09 at 13:42:07

%d blogerów lubi to: