Przygotowanie środowiska programisty Node

This translation is incomplete. Please help translate this article from English

Gdy już wiesz do czego służy Express, nadszedł czas, żeby pokać 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:

Wiedza o pracy z wykorzystaniem terminala lub wiersza poleceń. Umiejętność instalacji oprogramowania w systemie operacyjnym Twojego komputera do programowania.

Cel: Przygotowanie środowiska programisty do tworzenia aplikacji w Express(4.x) na Twoim komputerze.

Przegląd środowiska programisty Express

Instalacja środowisk Node i Express jest stosunkowo prosta. W tej sekcji dokonamy przeglądu wszystkich potrzebnych narzędzi, przedstawimy kilka prostych metod instalacji Node (i Express też) w systemach Ubuntu, macOS i Windows oraz na koniec przetestujemy przygotowane środowisko.

Co to jest środowisko programisty Express?

Ś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 są instalowane razem z przygotowanych pakietów binarnych, instalatorów, menadżerów pakietów systemu operacyjnego lub ze źródeł (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 potrzebujesz go, aby tworzyć aplikacje webowe przy pomocy Express o podobnej architekturze. Będziemy go jednak używać ponieważ ułatwia rozpoczęcie 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 pozostałe narzędzia, które są typowymi składnikami środowiska programisty, jak edytory tekstu czy środowisko IDE do edycji kodu, systemy kontroli wersji jak Git, dzięki któremu możemy bezpiecznie zarządzać wersjami kodu. Zakładamy, że posiadasz już tego typu narzędzia zainstalowane (w szczególności edytor tekstu).

Jakie systemy operacyjne są wspierane?

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). Prawie każdy komputer ma wystarczającą wydajność, aby uruchomić 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 systamie Windows, maxOS i dystrybucji Ubuntu systemu Linux.

Z jakie wersji Node/Express możemy skorzystać?

Ś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 niż bieżące wersje, 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

A co z bazami i pozostałymi zależnościami?

Pozostałe potrzebne elementy aplikacji, jak sterowniki baz danych, generatory widoków, moduły autentykacji itd. są importowane do środowiska aplikacji przez menadżer NPM. Zajmiemy się nim w późniejszcyh artykułach dotyczących tworzenia aplikacji.

Instalacja Node

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

macOS

Instalacja Node wraz z NPM w systemach Windows i macOS jest dość łatwa, wystarczy użyć instalatora:

  1. Pobierz wymagany instalator:
    1. wejdź na stronę https://nodejs.org/en/
    2. Wybierz przycisk z napisem "Recommended for most users", którym pobierzesz najnowszą wersję LTS.
  2. Zainstaluj Node podójnei klikając pobrany plik i postępuj zgodnie z pojawiającymi instrukcjami.

Windows

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.

Ubuntu 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 na 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.

Testowanie Node.js i NPM po instalacji

The easiest way to test that node is installed is to run the "version" command in your terminal/command prompt and check that a version string is returned:

> node -v
v10.16.0

The Nodejs package manager NPM should also have been installed, and can be tested in the same way:

> npm -v
6.9.0

Przeprowadzimy teraz test działania Node.js tworząc prosty, z użyciem wyłącznie pakietów znajdujących w Node, który wygeneruje dokument z napisem "Hello World":

  1. Skopuj poniższy tekst do pliku o nazwie hellonode.js. Kod wykorzystuje wyłącznie funkcje Node (nbie zawiera żadnych funkcji Express) i jest napisany z wykorzystanie pewnych elementów składni ES6: 
    //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ą z jakiego adresu URL może skorzystać przeglądarka. Funkcja tworząca serwer (createServer()) pobiera argument w postaci definicji funkcji zwrotnej, która zostanie wywołana, gdy zostanie odebrane żądanie. W funkcji zwrotnej po prostu tworzymy 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. 

  2. Uruchom serwer przechodząć najpierw w terminalu do katalogu z plikiem  hellonode.js  a następnie wydając polecenie node z nazwą skryptu:
    >node hellonode.js
    Server running at http://127.0.0.1:3000/
    
  3. W przeglądarce wpisz URL http://127.0.0.1:3000 . Jeśli wszystko pracuje poprawnie w przegladarce powinieneś zobaczyć napis "Hello World".

Korzystanie z NPM

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 podczas 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 ręcznie pobierać każdy z wymaganych modułów. 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 ten konkretny 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).

Dodawanie zależności

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

  1. Zaczniemy od utworzenia katalogu na Twoją nową aplikację.Potem musimy do tego katalogu wejść:
    mkdir myapp
    cd myapp
  2. 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"
    }
    
  3. W kolejnym kroku zainstalujemy moduł Expess w katalogu myapp co spowoduje dodanie tego modułu jako zależności w naszym pliku package.json
  4. 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"
      }
    }
    
  5. Kolejnym krokiem po dołączeniu zależności do projektu, jest zaimportowanie pakietu w pliku źródłowym przy pomocy wywołania funkcji 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 najprostszej aplikacji Express typu "Hello World!". 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ą na jakim porcie pracuje serwer. 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!".

  6. Możesz uruchomić serwer wywołując w terminalu polecenie node z parametrem w postaci nazwy pliku naszego skryptu:
    >node index.js
    Example app listening on port 8000
    
  7. Otwórz w przeglądarce stronę z URL (http://127.0.0.1:8000/). Jeśli wszystko pracuje poprawnie powinieneś zobaczyć stronę z napisem "Hello World!".

Zależności środowiska deweloperskiego

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-dev

W 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 do wykrywania i raportowania fragmentów, które nie są zgodne (lub są zgodne) z dobrymi praktykami tworzenia oprogramowania.

Uruchamianie zadań

Oprócz dodawania i pobierania zależności, możesz też definiować nazwane skrypty w swoim pliku package.json, które przy pomocy NPM możesz uruchomić poleceniem run-script. Jest to typowe rozwiązanie stosowane do automatyzacji takich zadań jak uruchamianie testów, części tworzonej aplikacji czy budowania łańcucha narzędzi (np. uruchamianie narzędzi minimalizujących objętość kodu JavaScript, zmiany rozmiaru obrazów, LINT, analizatory kodu itp.).

Uwaga:  Możesz też korzystać z innych narzędzi do tego celu jak Gulp lub Grunt .

Na przykład możesz zdefiniować skrypt do uruchomienia narzędzia eslint (jako zależność deweloperską) 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ć jedne skrypt, który uruchamia wszystkie testy.

Instalacja generator aplikacji Express - Express Application Generator

Express Application Generator to narzędzie do generowania szkieletu aplikacji Express. Zaczniemy od zainstalowania generatora przy pomocy NPM z flagą -g (czyli w trybie globalnym, aby móc go wywołać z dowolnego katalogu):

npm install express-generator -g

Ż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 zobaszysz 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 zobaczyć jakie zależności zostały zainstalowane, w tym Express i biblioteka 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 i 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.

Express - Generated App Default Screen

Więcej o wygenerowanej aplikacji dowiemy się w artykule o genrowaniu szkieletu aplikacji.

Podsumowanie

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.

Zobacz także

W tym module