Zabaw z serwerem na Node.js część druga. Ostatnio opisywałem jak postawiłem prosty, działający serwer, pora więc iść dalej. W dzisiejszym wpisie dodaje do mojego projektu TypeScripta :). Dlaczego? TypeScript jest nowy (względnie), fajny i wygodny w pisaniu. TypeScript pozwala na pisanie lepszego jakościowo kodu, bardziej odpornego na błedy. Poza tym jest kolejnym klockiem do zbudowania nowoczesnej aplikacji. Dodanie go na wczesnym etapie prac jest proste, dodatkowo postanowiłem wydzielić część serwerową mojej aplikacji jako osobny projekt.

Dobra, tyle wstępu, pora na konkrety. Punktem wyjścia do dzisiejszych prac był plik server.js:

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");
});

Zacząłem od dodania do projektu TypeScripta:

npm install --save-dev typescript

następnie zainicjalizowałem go w projekcie:

tsc --init

od razu także dodałem ts-loader do webpacka:

npm install ts-loader

Jako rezultat powyższych działań w projekcie pojawił się plik tsconfig.json, w którym należało ustawić parę rzeczy takich jak wersje ES i mode w jakim typescript ma współpracować z nodem:

"target": "es2018", 
"moduleResolution": "node",

W  webpacku zamieniłem punkt startowy z server.js na server.ts, i w tym momencie … wszystko zaświeciło się na czerwono :). No cóż typescript wymaga innej składni, więc po kolei zająłem się błędami.

Na pierwszy ogień importy

const express = require("express");

taka forma nie jest mile widziana przez TypeScripta. Generalnie TypeScript pozwala używać składni którą znam z reacta więc to nawet dla mnie jest wygodne.

Poprawny import wygląda tak:

import express from 'express';

Niestety TypeScript  nie ogarnia za dobrze typów które znajdują się w express, z pomocą przychodzą pakiety serii @types:

npm install @types/node  // typy do noda
npm install @types/express //  typy do expressa

I od razu życie developera staje się łatwiejsze:) Teraz już TypeScript potrafi interpretować poprawnie typy. Dodałem jeszcze typy do Helmeta:

npm install --save @types/helmet

oraz poprawiłem jego import:

import Helmet from "helmet";

Finalnie plik wygląda tak:

import express from 'express';
import Helmet from "helmet";
const port = process.env.PORT || 3000;
 
const app = express();
app.use(Helmet());
 
app.get("/test", (req, res) => {
    const list = ['john','doe']
    res.json(list)
  });
 
app.listen(port)

W ten oto sposób upgrajdowałem mój serwer. Tymczasowo usunąłem funkcjonalność wyświetlania strony, gdyż w następnym kroku chcę właśnie zająć się routingiem. Dodałem obsługę tylko jednego żądania do celów testowych. Wszystko działa zarówno lokalnie jak i “produkcyjnie” na Heroku. 

To koniec dzisiejszego wpisu.