Blog

Budujemy prostą stronę na bazie Express.Js Cz II

Krótki tutorial budowy prostej strony przy pomocy Express.js. Odsłona druga.

Budujemy prostą stronę na bazie Express.Js Cz II

Szkielet do budowy aplikacji czy też – jak podaje polska odsłona wikipedii – platforma programistyczna to genialna w swojej prostocie idea, w zgodzie z którą uznaje się, iż w przypadku większości projektów występuje zestaw stałych elementów oraz krów do wykonania koniecznych do poprawnego działania budowanego rozwiązania. Na bazie moich skromnych doświadczeń ze współczesnymi rozwiązaniami w obrębie web developmentu muszę napisać, że nierzadko granica między frameworkiem (a przynajmniej moim wyobrażeniem tego, co pod tym pojęciem się ukrywa) a “zwykłą” biblioteką staje się coraz bardziej płynna. Na ten przykład w przypadku Nuxta, Django czy Angulara nie mam żadnych obiekcji z taką klasyfikacją, to już wobec takiego Vue (zwłaszcza, gdy korzystamy z niego po stronie “przeglądarki”) czy właśnie Expressa jakieś drobne opory posiadam. Głównie chodzi mi o fakt, że w moim rozumieniu – to właśnie go różni od biblioteki jako pewnego repozytorium użytecznego kodu – framework to również pewne dość wyraźnie zarysowane ramy związane ze sposobem budowania aplikacji w oparciu o te gotowe elementy.

I tutaj faktycznie w porównaniu z innymi mi znanymi frameworkami jest naprawdę niewielkie i niespecjalnie złożone rozwiązanie. Według filozofii przyświecającej twórcom Expressa każda aplikacja różni się znacznie pod względem implementacji oraz biznesowych celów, jakie za nią stoją, a lżejsze frameworki pozwalają na po prostu dokładnej zaadresować te specyficzne oczekiwania, bez oferowania nadmiarowych funkcjonalności. Dlatego też społeczności Expressa (wzorem Node) jest skoncentrowana na mniejszych, modularnych funkcjonalnościach, a nie próbie budowania monolitycznego frameworka.

Ale mniejsza o te filozoficzne w swej naturze dystynkcje i tym samym najwyższa pora na konkrety (o ile piszącego te słowa stać w ogóle na taką postawę). By skorzystać z dobrodziejstw dostarczanych wraz z Expressem w pierwszej kolejności musimy na własnej maszynie posadowić środowisko Node.js. Ten tutorial nie przewiduje omówienia sposobu dochodzenia do tego celu, ponieważ większość użytkowników korzysta z Windowsa albo chociaż z produktów Apple, zaś autor do własnych potrzeb korzysta wyłącznie z Linuksa, więc nie za bardzo ma nawet możliwość przetestowania tego, jak dowieźć Node.js na Okienkach. Dlatego od razu przejdziemy do tworzenia aplikacji (prostej witryny) na bazie Expressa.   

Zacznijmy od utworzenia katalogu naszego projektu. Z poziomu konsoli wystarczy wpisać mkdir a następnie nazwę folderu. W naszym przypadku będzie to mkdir blog. Przechodzimy do tego folderu poleceniem cd blog i wpisujemy nieśmiertelne npm init, a następnie należy odpowiedzieć na kilka pytań, które nie mają na tym etapie większego znaczenia, więc śmiało można każdorazowo potwierdzić domyślne wartości. Rzecz jasna istnieje dedykowane narzędzie do tworzenia projektów Expressa (express-generator), ale piszący te słowa nie miał przyjemności się z nim zapoznać. Zresztą przeglądając różnorodne tutoriale na temat Expressa czy też dokumentację rozwiązań jakoś z tego frameworka korzystających, można odnieść wrażenie, że nikt tak naprawdę z tego generatora nie korzysta. 

Na bazie tej początkowej “ankiety” wygenerowany zostanie plik package.json, gdzie będą zapisywane wszystkie zależności dla naszego projektu. Na początek dodamy dwa pakiety, choć drugi z nich jest opcjonalny i odrobinę ułatwia pracę. W tym celu klepiemy dwie komendy:

  1. npm i express (pełna komenda to npm instal express)
  2. npm i nodemon

Dzięki pierwszej instrukcji dodajemy narzędzie dostarczane wraz z Expressem do naszego projektu, zaś zainstalowanie drugiej paczuszki umożliwia automatyczny restart serwera po zapisaniu zmian w pliku aplikacji, co zaoszczędzi nam każdorazowo kilka sekund, ale jaka taka wymagana ona nie jest. 

Jeśli już wspomniałem o pliku aplikacji to właśnie jest ten moment, kiedy należy go stworzyć. O ile nic nie zmienialiśmy w trakcie odpowiadania na pytania, które pojawiły się po zainicjowaniu komedy npm init, powinien się on nazywać index.js. W innym przypadku należy wpisać nazwę, która będzie odpowiadać wcześniejszemu wyborowi (dla osób z krótką pamięcią podpowiedź: można to podejrzeć w pliku package.json i będzie to wartość przypisana do klucza “main”). Następnie ten pliczek otwieramy w naszym ulubionym edytorze i dodajmy następujący fragment kodu.

const express = require(’express')

const path = require(’path')

const app = express()

const port = 2000

app.listen(port, () => console.log(`Serwer jest dostępny pod adresem http://localhost:${port}/`))

W pierwszym wierszu importujemy moduł Expressa, a ponieważ to plik uruchamiany bezpośrednio w środowisku Node.js do tego celu używamy notacji typu CommonJS. W drugim wierszu robimy to samo tym razem dla modułu path, który wykorzystany zostanie później. Następnie tworzymy obiekt app na bazie zaimportowanego wcześniej modułu i tworzymy stałą port, gdzie przypisujemy wartość, która będzie odpowiadała portowi pod którym zgłaszać się będzie nasza aplikacja. Tutaj będzie to port 2000, ale można wskazać każdy inny dostępny.  Na samym końcu przypisujemy ten port do naszego obiektu app i od razu dodajmy funkcje w zapisie strzałkowym, dzięki której w naszej konsoli wyświetli komunikat i w ten sposób będziemy mogli szybko połączyć się z wybranym URL, uprzednio na niego klikając.

Od tego momentu powinna się zacząć najważniejsza część budowania naszej witryny, czyli trasowanie. Zanim jednak do tego przystąpimy pobierzemy sobie gotowy temat, który po ewentualnych przeróbkach przedstawimy światu, choć ja w tym “kursie” zajmować się zabardzo nie zamierza i pozostawiam to do własnej decyzji czytających. Prawda jest niestety taka, że tradycyjnie frontendowe zadania, czyli w naszym wypadku wizualny aspekt naszej strony, to dziedzina ze wszech miar poza obszarem moich zainteresowań i w związku z tym niespecjalnie planuję w tym zakresie rozwijać swoich kompetencji, stąd też potrzeba skorzystania z gotowca. W tym celu udamy się na stronę:

https://startbootstrap.com/themes

Wybrać można dowolny temat dla technologii HTML, ale w tym wprowadzeniu do tematu Expressa korzystać będziemy z tego o nazwie Clean Blog. Pobieramy go na dysk, by w dalszej kolejności skopiować go do naszego projektu. Zanim to jednak uczynimy w głównym folderze naszej aplikacji należy dwa inne. Będzie to katalog pages, do którego kopiujemy pliki html (index.html, about.html, contact.html, post.html) oraz folder public, dla pobranych plików CSS, JS oraz grafiki.

Wracamy do naszego edytora i w pliku naszej aplikacji tworzymy trasy dla poszczególnych dokumentów HTML. Do tego celu służy metoda app.get, która przyjmuje dwa parametry tj. ścieżkę oraz funkcję. Ścieżka definiuje trasę, zaś podana przez nas funkcja zostanie wywołana po dopasowaniu trasy. W związku z tym dodajmy widoczny niżej kawałeczek kodu, gdzie wskazujemy nazwę trasy (w naszym wypadku ‘/’ odpowiada adresowi http://localhost:2000, zaś ‘/about’ odpowiednio http://localhost:2000/about) i odpowiadajcy mu plik html, który zostanie zwrócony po wybraniu tego URL. 

app.get(’/', (req, res) => {

   res.sendFile(path.resolve(__dirname, 'pages/index.html'))

})

 app.get(’/about', (req, res) => {

   res.sendFile(path.resolve(__dirname, 'pages/about.html'))

})

 app.get(’/contact', (req, res) => {

   res.sendFile(path.resolve(__dirname, 'pages/contact.html'))

})

 app.get(’/post', (req, res) => {

   res.sendFile(path.resolve(__dirname, 'pages/post.html'))

})

Ponieważ w naszym projekcie wykorzystujemy pliki statyczne (arkusze CSS, plik graficzne i skrypty JS) musimy je dodać za pomocą oprogramowania pośredniczącego (middleware). To ostatnie można określić jako narzędzie do obsługi wszystkie żądania, które nie pasują do trasy. W tym konkretnym wypadku wykorzystamy oprogramowanie pośredniczące o nazwie static, dzięki któremu możemy wskazać katalog zawierający statyczne zasoby, które będą zwracane do klienta bez żadnego przetworzenia przez aplikację. Do tego celu musimy użyć innej metody, czyli use. Całość powinna wygląda tak jak to widać niżej.

const express = require(’express')

const path = require(’path')

const app = express()

const port = 2000

app.listen(port, () => console.log(`Serwer jest dostępny pod adresem http://localhost:${port}/`))

app.use(express.static(’public'))

app.get(’/', (req, res) => {

   res.sendFile(path.resolve(__dirname, 'pages/index.html'))

})

 app.get(’/about', (req, res) => {

   res.sendFile(path.resolve(__dirname, 'pages/about.html'))

})

 app.get(’/contact', (req, res) => {

   res.sendFile(path.resolve(__dirname, 'pages/contact.html'))

})

 app.get(’/post', (req, res) => {

   res.sendFile(path.resolve(__dirname, 'pages/post.html'))

})

Nasza witryna jest już w tym momencie gotowa, ale zanim ją odpalimy jedna ważna uwaga. Ponieważ mamy tutaj do czynienia cały czas z JS w związku z tym w przypadku platformy Express kolejność dodawania tras i oprogramowania pośredniczącego jest szalenie istotna. Na ten przykład jeśli umieścimy funkcję obsługi błędu 404 przed “deklaracją” wszystkich tras, wówczas żadna ze stron się nie otworzy. Dlatego warto podążać za umieszczonym tutaj kodem, ponieważ wówczas jest 100% gwarancja, że powinien on działać.

Jednak nie przedłużając pora najwyższa uruchomić naszą aplikację i cieszyć się z owoców naszej ciężko wykonanej pracy. W tym celu wystarczy (pozostając cały czas w obrębie katalogu naszej aplikacji) wpisać w konsoli node index.js lub nodemon index.js, o ile wcześniej zainstalowaliśmy pakiet nodemon.