Serwer lokalny i json-server

W poprzednim rozdziale rozmawialiśmy o CORS, czyli istniejącym w przeglądarkach zabezpieczeniu, które nakłada pewne restrykcje na wykonywanie połączeń między różnymi domenami.

Zabezpieczenie takie powoduje, że domyślnie nie jesteśmy w stanie wykonywać dynamicznych połączeń między plikami na dysku, jeżeli naszą stronę otwieramy bezpośrednio z dysku (np. 2x klikając na ikonę). Wynika to z tego, że taki plik otwierany jest na adresie file://..., a adres ten nie jest poprawną domeną.

Serwer lokalny

Jeżeli chcemy rozwiązać powyższy problem, nasza lokalna strona powinna być serwowana z tak zwanego serwera lokalnego. W zasadzie nawet nie chodzi o rozwiązywanie jakiś problemów, co symulowanie realnego środowiska, na którym będzie w przyszłości stała nasza strona.

Osobiście korzystam z kilku rozwiązań - w zależności od pogody i tego nad jakim projektem aktualnie pracuję.

Serwery dla Node.js

Jeżeli masz już zainstalowanego Node.js, w codziennej pracy możesz pokusić się o używanie jednego z dwóch popularnych mini serwerów lokalnych.

Pierwszy z nich to http-server, a drugi live-server. Działanie ich jest bardzo podobne, z tym, że ten drugi dodatkowo daje automatyczne odświeżanie strony jeżeli coś zmienimy w kodzie.

Oba serwery możemy zainstalować globalnie poleceniami:

npm i http-server -g
//lub
npm i live-server -g

po czym możemy je odpalać poleceniami (będąc w katalogu projektu):

http-server . -c-1
//lub
live-server

Paczek tych nie musimy nawet instalować. Jeżeli chcemy ich użyć w danym katalogu, wystarczy odpalić je poleceniem npx. Służy ono do odpalenia danej paczki bez instalowania:

npx http-server -c-1 .
//lub
npx live-server

Innym rozwiązaniem może być użycie BrowserSync. Mówimy o nim tutaj i tutaj. Bardzo podobne narzędzie do powyższych, ale o wiele mocniejsze. Także możesz go zainstalować globalnie i odpalać bezpośrednio z terminala komendą:

npx browser-sync start --server dist --files "*.html, css/*.css, js/*.js"

Ja dodałem sobie w terminalu do tego w celu alias, dzięki czemu szybkie "bs" odpala w danym katalogu całe narzędzie.

Laragon

Jeżeli pracujecie w PHP pewnie korzystacie już z jakiegoś serwera - np. XAMPP czy WAMP (i podobnych). Ja także używałem ich przez lata. Ostatnio zacząłem używać jednak czegoś innego.

Laragon - bo o nim mowa - to mega narzędzie, które po zainstalowaniu daje wam nie tylko w pełni skonfigurowanego php, ale też Node i inne rzeczy takie jak mailer, automatycznie tworzone vhosty, automatyczne tworzenie stron dla popularnych cms/framerowków, liczne ułatwienia itp. W zasadzie wystarczy to zainstalować i chwilę się pobawić by gęba sama zaczęła się cieszyć.

json-server

Dość często będziemy borykać się z sytuacją, gdzie żadne z dostępnych w Internecie API nie będzie dla nas wystarczające, a najlepszym rozwiązaniem będzie stworzenie własnego.

W takiej sytuacji zapewne dla każdego z was inne rozwiązanie się sprawdzi.

Jeden wybierze oparcie backendu o PHP (https://www.youtube.com/watch?v=DHUxnUX7Y2Y),

drugi wybierze Node (do budowy RestApi), a trzeci z kolei będzie kodował w innym języku.

Niestety takie "ręczne" kodowanie backendu często jest dość pracochłonne, bo mówimy tu o całym zestawie funkcjonalności takich jak edycja, dodawanie, stronicowanie, wyszukiwanie itp.

My jako frontendowcy możemy ułatwić sobie pracę za pomocą narzędzia json-server, które po instalacji i odpaleniu daje pełnokształtny serwer z bazą danych. Gdy przejdziesz na https://jsonplaceholder.typicode.com/, zobaczysz o czym mówimy. To dość popularna strona, która często używana jest jako "fejkowe api". Jej działanie opiera się właśnie o json-server.

Podobnie do innych paczek json-server możemy zainstalować lokalnie lub globalnie. Wybierzmy to drugie rozwiązanie:

npm install json-server -g

Od tej pory możemy go odpalić za pomocą polecenia:

json-server --watch nazwa-pliku.json

Gdzie nazwa-pliku.json to ścieżka do pliku json, który będzie naszą bazą danych (dlatego najlepiej takie polecenie odpalać z katalogu, w którym dany plik się znajduje).

Dla przykładu, gdybyśmy chcieli, by w naszym API były 2 tabele z użytkownikami i filmami, wtedy taki plik mógłby mieć postać:

{
    "users" : [
        {
            "id" : 0,
            "name" : "Marcin",
            "surname" : "Nowak"
        },
        {
            "id" : 0,
            "name" : "Piotr",
            "surname" : "Kowalski"
        }
    ],

    "movies" : [
        {
            "id" : 0,
            "name" : "Gayver",
            "genre" : "sf"
        },
        {
            "id" : 1,
            "name" : "Poznaj mojego tatę",
            "genre" : "comedy"
        }
    ]
}

Przykładowe dane możemy sobie wygenerować za pomocą jednego z wielu generatorów. Ja najczęściej korzystam z https://www.mockaroo.com/.

Po uruchomieniu takiego serwera w konsoli pojawią się linki, na które możemy się łączyć:

I w zasadzie tyle. Od tej pory możemy łączyć się na adresy z terminala. Gdy będę chciał pobrać wszystkie filmy, wykonam połączenie na adres http://localhost:3000/movies. Gdy będę chciał pobrać dane danego filmu, połączę się na adres http://localhost:3000/movies/1. Gdy będę chciał dany film usunąć, zrobię na dany adres połączenie typu "delete".

Trening czyni mistrza

Jeżeli chcesz sobie potrenować zdobytą wiedzę, zadania znajdują się w repozytorium pod adresem: https://github.com/kartofelek007/zadania