Czesć,

W tym wpisie napiszemy podstawowy serwer w hapi.js.

Dlaczego hapi.js?

Framework hapi.js został stworzony aby umożliwić programistom pisanie reużywalnego kodu, a nie skupianie się nad infrastrukturą aplikacji. Ponadto hapi.js ma wbudowaną obsługę błedów. Jest zbudowany na Express.js.

Więcej o frameworku hapi.js możecie przeczytać na stronie projektu oraz na typeofweb.com

Instalacja hapi.js

Na początku stwórzmy sobie folder server w którym będziemy trzymać pliki odpowiedzialne za backend. Żeby zainstalować hapi.js w aplikacji wystarczy:

yarn add hapi

Po instalacji możemy stworzyć prosty serwer ustawiając nasłuchiwanie na porcie 8000:

const Hapi = require('hapi');

const server = new Hapi.Server();

server.connection({
  host: 'localhost',
  port: 8000
});

server.start(err => {
  if (err) throw err;

  console.log('Server running at:', server.info.uri);
});

Teraz możemy uruchomić serwer wpisując w terminalu:

node server/index.js

Jednak lepszym sposobem niż wpisywanie powyższej instrukcji za każdym razem będzie stworzenie skryptu który nam to będzie uruchamiał. W pliku package.json dodajmy skrypt  nazwie ‚server’:

  //...
  "scripts": {
    "ng": "ng",
    "start": "ng serve --hmr -e=hmr --port 3000",
    "server": "node server/index.js"
  },
  //...

I od teraz możemy uruchomiać serwer wpisując w terminalu:

yarn server

Jednak po wejściu na stronę widzimy błąd w formacie JSON z ‚error not found’. To dlatego że nie stworzyliśmy jeszcze żadnego routa odpowiadającego za obsługę ścieżki ‚/’. Zróbmy to teraz:

//...
server.route({
  method: 'GET',
  path:'/',
  handler(request, reply) {
    return reply('Selfreview Backend');
  }
});
//...

Teraz po uruchomieniu serwera i wejściu na stronę localhost:8000 ujrzymy napis ‚Selfreview Backend’.

Zwracanie danych

W aplikacji będą nam potrzebne zadania które będziemy pobierać z bazy danych. Jednak na teraz wystarczy jak je pobierzemy z pliku JSON. Zacznijmy od stworzenia pliku tasks.json z przykładowymi zadaniami:

[
  {
    "text": "Cwiczyć na siłowni",
    "frequency": 3,
    "week": "27032016-02042016"
  },
  {
    "text": "Czytać ksiązkę 10 stron",
    "frequency": 5,
    "week": "27032016-02042016"
  },
  {
    "text": "Jeżdzic na rowerze 10 km",
    "frequency": 3,
    "week": "27032016-02042016"
  }
]

Następnie zaimportujmy go w pliku głównym servera (index.js) i dodajmy route, który nam zwróci dane w formacie JSON pod adresem ‚localhost:8000/tasks’:

//...
const tasks = require('./tasks.json');
//...
server.route({
  method: 'GET',
  path: '/tasks',
  handler(request, reply) {
    return reply({ tasks });
  }
});
//...

Po uruchomieniu serwera i wejściu pod adres ‚localhost:8000/tasks’ widzimy, że aplikacja prawidłowo zwraca dane.

W kolejnym wpisie pokaże jak możemy wyświetlić te dane na frontendzie.

Zmiany z dzisiejszego wpisu są jak zwykle na moim githubie.