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ć.

laragon

json-server

Dość często będziemy stykać 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.

I znowu zapewne dla każdego inne rozwiązanie się sprawdzi.

Polecam przejrzeć kilka filmów autorstwa np. Trawersy Media.

Jeżeli pracujesz w PHP, pewnie zainteresuje cię ten film

Jeżeli używasz Node, może zainteresować cię użycie Express do budowy RestApi. Tutaj możesz znaleźć paczkę z przykładowymi ustawieniami.

Niestety powyższe rozwiązania często są dość pracochłonne, bo mówimy to o całym zestawie funkcjonalności takich jak edycja, dodawanie, stronicowanie, wyszukiwanie itp.

Żeby ułatwić sobie pracę możemy skorzystać z json-server. Po uruchomieniu dostajemy w pełni funkcjonalny serwer z działającym API, który jako bazę danych używa pliku .json.

Podobnie do innych paczek json-server możemy zainstalować lokalnie lub globalnie.


npm install json-server -g

Po zainstalowaniu 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. Przykładowo 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"
        }
    ]
}

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

terminal json-server

I w zasadzie tyle. Od tej pory możemy łączyć się na adresy z terminala. Dla przykładu 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. Podobnie gdy będę chciał dany film usunąć zrobię na dany adres połączenie typu "delete". Jedyną rzeczą o której musimy pamiętać jest to, by podczas pracy odpalony server wciąż był włączony.

Serwer ten możemy też odpalać bezpośrednio ze skryptu. Opisane to jest w dokumentacji pod adresem https://github.com/typicode/json-server#module. Po odpaleniu takiego skryptu na pod adresem http://localhost:port dostaniemy stronę z opisem naszego API. Wystarczy się połączyć.

Wszelkie prawa zastrzeżone. Jeżeli chcesz używać jakiejś części tego kursu, skontaktuj się z autorem.
Aha - i ta strona korzysta z ciasteczek.