Gdy już wiesz do czego służy Express, nadszedł czas, żeby pokazać Ci jak przygotować i przetestować środowisko programistyczne Node/Express w różnych systemach operacyjnych: Windows, Linux (Ubuntu) i macOS. Jakiegokolwiek systemu byś nie używał, w tym artykułe przygotujemy wszystko co Ci będzie potrzebne, by zacząć tworzyć aplikacje w Express.
| Wymagania: |
Umiejętność pracy z terminalem lub w trybie wiersza poleceń. Umiejętność instalacji oprogramowania w systemie operacyjnym Twojego komputera, który będzie służył do programowania. |
|---|---|
| Cel: | Przygotowanie środowiska programisty do tworzenia aplikacji w Express(4.x) na Twoim komputerze. |
Instalacja środowisk Node i Express jest stosunkowo prosta. W tej sekcji dokonamy przeglądu wszystkich potrzebnych narzędzi, przedstawimy kilka prostych metod instalacji Node (Express także) w systemach operacyjnych Ubuntu, macOS i Windows. Na koniec przetestujemy przygotowane środowisko.
Środowisko do tworzenia aplikacji Express wymaga zainstalowania pakietu Node.js, menadżera pakietów NPM oraz opcjonalnie pakietu Express Application Generator.
Środowisko Node i menadżer NPM mogą zostać zainstalowane razem z różnych źódeł. Mogą być to pakiety binarne, pakiety instalacyjne, menadżery pakietów systemu operacyjnego lub pliki źródłowe (co zostanie pokazane w następnych sekcjach). Sam Express jest instalowany przez NPM, podobnie jak pozostałe zależności aplikacji webowej (inne biblioteki w tym silnik szablonów, sterowniki baz danych, moduły warstwy pośredniej do autentykacji, obsługi plików statycznych itd.)
Przy pomocy NPM możemy też zainstalować Express Application Generator, który jest bardzo użytecznym narzędziem do generowania szkieletu aplikacji webowej w architekturze MVC. Oczywiście jest to narzędzie opcjonalne i nie jest wymagane, aby tworzyć aplikacje webowe przy pomocy Express o podobnej architekturze. Będziemy niego korzystać, ponieważ ułatwia trudne początki w pracy nad aplikacją i promuje modułową strukturę aplikacji.
Uwaga: W odróżnieniu od pozostalych frameworków, środowisko programisty nie zawiera oddzielnego serwera WWW do celów deweloperskich. W Node/Express aplikacja sama tworzy i uruchamia własny serwer internetowy!
Potrzebne będą także inne narzędzia, które są typowymi składnikami środowiska programisty, jak edytory tekstu czy środowisko IDE do edycji kodu, systemy kontroli wersji np. Git, dzięki którym możemy bezpiecznie zarządzać wersjami kodu. Zakładamy, że posiadasz już tego typu narzędzia zainstalowane (w szczególności edytor tekstu).
Node można uruchomić w systemie Windows, macOS, wszelkim odmianach systemu Linux, czy kontenerach typu Docker (pełna lista znajduje się na stronie Node.js Downloads). Praktycznie każdy komputer ma wystarczającą wydajność do uruchomienia Node w trakcie tworzenia aplikacji. Express jest uruchamiane w środowisku Node, co oznacza, że może działać na dowolnej platformie obsługującej Node.
W tym artykule wyjaśnimy proces instalacji w systemie Windows, maxOS i dystrybucji Ubuntu systemu Linux.
Środowisko Node wystepuje w wielu wersjach - najnowsze zawierają poprawki błędów, wsparcie dla najnowszych wersji standardu ECMASript (JavaScript) oraz lepsze API.
Zasadniczo powinieneś korzystać z najbardziej aktualnej wersji LTS (ang. long-term supported - o długim okresie wsparcia) ponieważ jest bardziej stabilna od bieżących wersji, przy zachowaniu w miarę aktualnej funkcjonalności (i jest nadal aktywnie utrzymywana). Z wersji najbardziej aktualnych możesz korzystać, gdy chcesz mieć dostęp do najnowszych funkcji, których brak w wersji LTS.
W przypadku pakietu Express powinieneś zawsze korzystać z najnowszej wersji
Pozostałe potrzebne elementy aplikacji, jak sterowniki baz danych, generatory widoków, moduły autentykacji itd. są importowane do środowiska aplikacji za pomocą menadżera NPM. Zajmiemy się nim w późniejszych artykułach dotyczących tworzenia aplikacji.
W tej sekcji zajmiemy się najłatwiejszym sposobem instalacji Node.js w wersji LTS dla różnych systemów operacyjnych: Ubuntu Linux 18.04, maxOS i Windows 10.
Wskazówka: Jeśli korzystasz z innego systemu operacyjnego lub po prostu chcesz poznać inne możliwości swojej platformy zobacz Installing Node.js via package manager (nodejs.org).
Instalacja Node wraz z NPM w systemach Windows i macOS jest dość łatwa, wystarczy użyć instalatora:
Najbardziej wskazaną metoda instalacji Node i NPM w systemie Windows jest skorzystanie z możliwości podsystemu Linux v2 (WSL2), co wymaga zainstalowania niejawnego programu testów systemu Windows (zobacz Set up your Node.js development environment with WSL 2).
Po zainstalowaniu podsytemu Linux możesz zainstalować Ubuntu 18.04 jako system dla środowiska Node.js. Gdy już WSL2 i Ubuntu zostały zainstalowane, możesz kontynuować proces instalacji Node.js zgodnie z opisem w punkcie dotyczącym instalacji Node na Ubutu 18.04.
Najbardziej aktualną wersję LTS środowiska Node 12.x najłatwiej jest zainstalować korzystając z menadżera pakietów pobranego z binarnego repozytorium systemu Ubuntu. Można to zrobić dwoma poleceniami w Twoim terminalu:
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs
Uwaga: Nie instaluj wprost z normalnych repozytoriów Ubuntu, ponieważ zawierają one bardzo stare wersje Node.
Testujemy poprawność instalacji wpisując polecenie "version" w wierszu poleceń. Jeśli instalacja się powiodła to zostanie wyśiwetlony numer aktualnej wersji:
> node -v v10.16.0
Razem ze środowiskiem Node.js powinien zostać zainstalowany także menadżer NPM. Poprawność instalacji możemy przetestować ten sam sposób:
> npm -v 6.9.0
Przeprowadzimy teraz test działania środowiska tworząc prosty serwer z użyciem wyłącznie pakietów znajdujących w Node, który wygeneruje dokument z napisem "Hello World":
//Load HTTP module
const http = require("http");
const hostname = '127.0.0.1';
const port = 3000;
//Create HTTP server and listen on port 3000 for requests
const server = http.createServer((req, res) => {
//Set the response HTTP header with HTTP status and Content type
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
//listen for request on port 3000, and as a callback function have the port listened on logged
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
W kodzie znajduje się import modułu "http", który to moduł jest wykorzystany do utworzenia serwera (createServer()) nasłuchującego na porcie 3000. Skrypt wysyła na konsolę komunikat z informacją pod jakim adresem URL działa nasz serwer. Funkcja tworząca serwer (createServer()) pobiera argument w postaci definicji funkcji zwrotnej, która zostanie wywołana w chwili odebrania żądania. W funkcji zwrotnej tworzymy prostą odpowiedź z kodem statusu HTTP 200 ("OK") i zwykłym tekstem "Hello World".
Uwaga: Nie przejmuj się, jeśli nie rozumiesz tego kodu. Wszystko wyjaśnimy ze szczegółami, gdy zaczniemy korzystać z Express.
hellonode.js a następnie wydając polecenie node z nazwą skryptu:
>node hellonode.js Server running at http://127.0.0.1:3000/
Drugim ważnym narzędziem po samym Node jest menadżer pakietów NPM. Głównym jego zadaniem jest pobieranie pakietów (bibliotek JavaScript), których aplikacja potrzebuje w trakcie tworzenia, testowania i pracy w środowisku produkcyjnym. Możesz też go potrzebować do uruchamiania testów i narzędzi wykorzystywanych w trakcie programowania.
Uwaga: Z punktu widzenia Node, Express jest tylko jednym z wielu pakietów, których potrzebujesz w swoim kodzie i musisz zainstalować przy pomocą NPM.
Możesz pobierać każdy z wymaganych modułów wpisując polecenia dla NPM do każdego modułu. W praktyce o wiele wygodniejszym rozwiązaniem jest zarządzanie zależnościami poprzez specjalny plik tekstowy o nazwie package.json. W pliku tym znajduje się lista wszystkich potrzebnych modułów wymaganych przez tworzony pakiet JavaScript, a także nazwa pakietu, wersja, opis, początkowy plik do uruchomienia, zależności produkcyjne, zależności deweloperskie, wersja środowiska Node, w której pakiet może pracować itd. Plik package.json powinien zawierać wszystkie informacje wymagane przez NPM, dzięki którym możliwe jest pobranie i uruchomienie Twojej aplikacji (jeśli piszesz bibliotekę wykorzystywaną przez innych użytkowników musisz skorzystać z definicji opisującej załadowanie pakietu do repozytorium npm).
W kolejnych krokach opiszemy jak możesz użyć NPM do pobrania pakietu, zapisania go w zależnościach projektu i oznaczenia go jako wymaganego przez naszą aplikację Node.
Uwaga: Pokażemy teraz instrukcje pobrania i instalacji pakietu Express. Później poznamy jak ten pakiet i pozostałe zostaną automatycznie wyspecyfikowane w projekcie, gdy utworzymy go modułem Express Application Generator. Ta sekcja jest po to, abyś mógł zrozumieć jak działa sam NPM i jakie korzyści daje wykorzystanie generatora aplikacji.
mkdir myapp cd myapp
Poleceniem init narzędzia npm utworzymy plik package.json dla naszej aplikacji. Pojawią się pytania o kilka istotnych rzeczy, jak nazwa i wersja Twojej aplikacji, nazwę pliku wejściowego aplikacji (domyślnie jest to index.js). Na razie zaakceptujemy ustawienia domyślne:
npm init
Jeśli zajrzysz do pliku package.json, to zobaczysz zakceptowane ustawienia domyślne wraz z licencją na końcu.
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
myapp co spowoduje dodanie tego modułu jako zależności w naszym pliku package.json. npm install express
Możemy teraz zobaczyć dodaną na końcu w pliku package.json sekcję, która dołączy do naszej aplikacji pakiet Express.
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
require(). Utwórz teraz plik index.js w katalogu aplikacji myapp i wpisz do niego poniższą zawartość:
const express = require('express')
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!')
});
app.listen(8000, () => {
console.log('Example app listening on port 8000!')
});
Utworzony kod to odpowiednik aplikacji typu "Hello World!" w Express. Najpierw importujemy pakiet "express" funkcją require(), a następnie tworzymy serwer (app), który nasłuchuje żądań na porcie 8000 i wysyła komunikaty na konsolę z informacją o porcie pracującego serwera. Funkcja app.get() realizuje obsługę żądań wyłacznie typu GET skierowanych do głównej ścieżki URL aplikacji ('/'), na które generuje odpowiedź z komunikatem "Hello World!".
>node index.js Example app listening on port 8000
Jeśli jakiś pakiet wykorzystujesz tylko podczas tworzenia aplikacji to powinieneś go dodać jako zależność deweloperską - "development dependency" (to spowoduje, że użytkownicy Twojej aplikacji (lub pakietu) nie będą instalować takiego pakietu w wersji produkcyjnej). Na przykład, gdy chcesz skorzystać z popularnej biblioteki eslint (jest to tzw. linter) to powinieneś wywołać NPM następująco:
npm install eslint --save-devW efekcie dostaniesz nowy wpis w pliku package.json Twojej aplikacji:
"devDependencies": {
"eslint": "^4.12.1"
}
Uwaga: "Lintery" to narzędzia do statycznej analizy kodu aplikacji służące do wykrywania i raportowania fragmentów, które nie są zgodne/lub są zgodne z dobrymi praktykami tworzenia oprogramowania.
Oprócz dodawania i pobierania zależności, w pliku package.json możesz też definiować tzw. nazwane skrypty. Przy pomocy NPM możesz je później uruchamiać poleceniem run-script. Jest to typowe rozwiązanie stosowane do automatyzacji takich zadań jak uruchamianie testów, fragmentów tworzonej aplikacji czy budowania ciągu uruchamianych narzędzi (np. uruchamianie narzędzi minimalizujących objętość kodu JavaScript, zmiany rozmiaru obrazów, LINT, analizatory kodu itp.).
Przykładem może być skrypt do uruchomienia narzędzia eslint (jako zależność deweloperska) w postaci bloku dodanego do pliku package.json (zakładamy, że żródła naszej aplikacji znajdują się w katalogu /src/js):
"scripts": {
...
"lint": "eslint src/js"
...
}
Wyjaśnijmy teraz co dodaliśmu w bloku "scripts": jest to polecenie, które musiałbyś wpisać w oknie terminala, żeby uruchomić eslint dla wszystkich plików JavaScript w katalogu src/js. Aby móć później się odwołać do tego polecenia nazwaliśmy go skrótem lint.
Teraz możemy uruchomić eslint wywołując NPM z naszym skrótem:
npm run-script lint
# OR (using the alias)
npm run lint
Choć wydaje się, że wywołanie utworzonego skrótu nie jest krótsze od oryginalnego polecenia, to pamiętaj, że możesz w skryptach zawrzeć znacznie dłuższe polecenia, jak i całe ciągi poleceń. Możesz też stworzyć jeden skrypt, który uruchamia wszystkie testy.
Express Application Generator to narzędzie do generowania szkieletu aplikacji Express. Zaczniemy od zainstalowania generatora przy pomocy NPM z flagą -g:
npm install express-generator -gUwaga: Może pojawić się konieczność wstawienia na początku wiersza polecenia sudo w systemach Ubuntu lub macOS. Flaga -g powoduje zainstalowanie pakietu w trybie globalnym, ktory pozwala na wywołanie go z dowolnego katalogu.
Żeby utworzyć aplikację "helloworld" z domyślnymi ustawieniami, wejdź do katalogu, w którym chcesz ją utworzyć i uruchom polecenie:
express helloworld
Uwaga: Podczas instalacji możesz podać bibliotekę szablonów i wiele innych ustawień. Wpisz polecenie help żeby zobaczyć wszystkie możliwości:
express --help
NPM będzie tworzył nową aplikację Express w podfolderze bieżącego katalogu wypisując na konsoli komunikaty obrazujące postęp instalacji. Po zakończeniu zobaczysz komunikat z poleceniem instalującym zależności Node i uruchamiające aplikację.
Uwaga: Nowa aplikacja posiada własny plik package.json w swoim głównym katalogu. Możesz go otworzyć i sprawdzić zainstalowane zależności, w tym Express i bibliotekę szablonów Jade:
{
"name": "helloworld",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"express": "~4.16.0",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"morgan": "~1.9.0"
}
}
Zainstaluj wszystkie zależności do swojej aplikacji przy pomocy NPM:
cd helloworld npm install
Następnie uruchom aplikację (polecenia różnią się nieco dla systemów Widnows i Lunux/macOS):
# Run the helloworld on Windows with Command Prompt SET DEBUG=helloworld:* & npm start # Run the helloworld on Windows with PowerShell SET DEBUG=helloworld:* | npm start # Run helloworld on Linux/macOS DEBUG=helloworld:* npm start
Polecenie DEBUG jest bardzo przydatne, gdyż uruchamia rejestrowanie zdarzeń, które możemy zobaczyć poniżej:
>SET DEBUG=helloworld:* & npm start > helloworld@0.0.0 start D:\Github\expresstests\helloworld > node ./bin/www helloworld:server Listening on port 3000 +0ms
Otwórz przeglądarkę i wpisz adres http://127.0.0.1:3000/, a zobaczysz domyślną stronę powitalną aplikacji Express.
Więcej o wygenerowanej aplikacji dowiemy się w artykule o generowaniu szkieletu aplikacji.
Masz przygotowane środowisko do tworzenia i uruchamiania aplikacji webowych w środowisku Node. Poznałeś działanie menadżera NPM, dowiedziałeś się jak zaimportować pakiet Express do swojej aplikacji i jak utworzyć szkielet aplikacji przy pomocy generatora aplikacji Express a potem go uruchomić.
W następnym artykule zaczniemy prawdziwe szkolenie, w trakcie którego stworzymy kompletną aplikację webową korzystając z Node.js i dostępnych w nim narzędzi.
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}