Czasami człowiek musi zrobić coś po raz pierwszy, coś czego się wystrzegał, coś czego za bardzo nielubił / nieznał (niepotrzebne skreślić). Otóż zawsze wolałem pracować na froncie, ale … no właśnie, zawsze jest jakieś “ale”. Piszę aplikację i jakbym na nią nie patrzył, jak bym się nie zastanawiał to wychodzi mi na to że, potrzebuję serwera na node.js. W sumie node to przecież jest javascript, więc pomyślałem że, punkt wejścia jest dla mnie o wiele łatwiejszy niż musiałbym zapoznawać się np z ruby.

Acha, zapomniałęm dodać jaki jest kontekst mojego serwera. Otóż w pierwszej iteracji serwer ma “być” i serwować moją apke w react. Na tym się skupiłem na początek.

A więc wyzwanie: „postawić serwer node.js”. Szybki research w sieci i zdecydowałem że, najłatwiej będzie mi wykorzystać express.js. 

Jak zacząć? Bardzo prosto 🙂 W katalogu projektu stworzyłem przestrzeń dla mojego serwera i utworzyłem plik server.js, będzie to mój punkt wyjścia. Następnie dodałem do projektu express

npm install express --save

Po zaisntalowaniu się paczki zacząłem tworzyć właściwy serwer. Mój plik server.js

const path = require("path");
const express = require("express");
const app = express();
const publicPath = path.join(__dirname, "..", "public");
const port = process.env.PORT || 3000;
 
app.use(express.static(publicPath));
app.get("*", (req, res) => {
  res.sendFile(path.join(publicPath, "index.html"));
});
 
app.listen(port, () => {
  console.log("server is up");
});

Dwa słowa komentarza, w podstawowej konfiguracji okazuję się trywialne. importuje potrzebne moduły (express, path) i tworzę instancję expressa. Jako że główny router jest w aplikacji reactowej to na poziomie servera wszystkie żądania odsyłają do pliku index.html (gdzie uruchamia się aplikacja reactowa) i oto całą magia 🙂

Podczas lektur w necie wyszukałem informację że, dobrze jest zabezpieczyć swój serwer na różnego rodzaju niebezpieczeństwa (co jest logiczne). Wiele osób poleca pakiet Helmet. Jest to zbiór reguł , ustawień , zabezpieczeń pomagający pozbyć się kilku potencjalnych kierunków ataku na serwer a także poprawiają bezpieczeństwo nagłówków HTTP

Dodanie Helmeta do projektu:

npm install helmet

następnie trzeba go zaimportować do pliku serwera:

const helmet = require('helmet');

i wykorzystać

app.use(helmet())

czyli finalnie, całościowo w pierwszej iteracji mój serwer wygląda tak:

const path = require("path");
const express = require("express");
const helmet = require('helmet');
const app = express();
const publicPath = path.join(__dirname, "..", "public");
const port = process.env.PORT || 3000;
 
app.use(helmet())
 
app.use(express.static(publicPath));
app.get("*", (req, res) => {
  res.sendFile(path.join(publicPath, "index.html"));
});
 
app.listen(port, () => {
  console.log("server is up");
});

i gotowe. Serwer jest gotowy do działania. Jako środowisko testowe wykorzystałem Heroku. Dodałem do package.json script

"heroku-postbuild": "npm run build:prod",

sam deploy odbywa sie za pomocą Heroku CLI.  Wystarczy w terminalu wpisać:

git push heroku master

i po chwili można podziwiać efekt swoje pracy.

Powiem szczerze że spodobało mi się to, a biorąc pod uwagę ile funkcjonalności chce tam dodać to będę miał trochę zabawy 🙂

Ten wpis jest pierwszym z serii opowiadającym o mojej przygodzie z node.js. Wpisy powstają na bieżąco wraz z rozwojem mojego serwera.