Introduktion

Webbserverprogrammering med Node och Express

Vad är Node?

Node.js (Node) är en server. Beskrivningen på nodejs.org kräver dock sin förklaring.

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

Node är byggt på en javascriptmotor (Chromes V8) för att kunna använda Javascript på en server. Node kan fungera som en en webbserver och fyller samma roll som webbservern Apache i LAMP.

Installation och förberedelse

Den här guiden utgår från materialet kring Windows Subsystem for Linux (WSL). Den Node version som kommer att användas är 14, vilket är Nodes Long Term Support (LTS) version. För att installera version 14 av Node går det inte att köra apt install node direkt.

Bash

sudo apt update
sudo apt upgrade

sudo apt install curl dirmngr apt-transport-https lsb-release ca-certificates
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

sudo apt install nodejs

Kontrollera sedan den installerade versionen av Node, bör vara 14.x.

Bash

node --version

Med node följer Node Package Manager (npm), bör vara 6.x.

Bash

npm --version

Nästa steg är att installera Express och Express generator. Express är ett minimalistiskt ramverk för Node. Express underlättar skapandet av en webbserver med Node. Express kommer att installeras globalt på systemet, något som kräver sudo.

Bash

sudo npm install -g express express-generator

Kontrollera sedan att det fungerade med.

Bash

express --help

Ett första projekt

För att skapa grunden till ett webbprojekt så används Express generator.

Var alltid väldigt noga med att köra kommandon från rätt mapp. Skapa inte Git-repon eller Express-projekt i c:\

Skapa en mapp för projektet, gå in i mappen och kör Express.

Bash

mkdir PROJEKTNAMN
cd PROJEKTNAMN
express --no-view --css sass --git

Express generator skapar med detta kommando grund-strukturen för en app. Express generator körs med parametrarna view, css och git.

• View väljer den motor (på engelska template engine), templatmotor, som Express anväder. I det här fallet väljer vi att inte använda en motor för detta. Då genereras statiska filer som default. Men vi kommer att installera och använda Nunjucks för detta.
• Css väljer att Express ska använda sig av sass/scss för projektets stilar.
• Git skapar en .gitignore fil i projektet för att undvika att filer som inte ska finnas på Git hamnar där(node_modules mappen bland annat).

Node-projekt kräver i allmänhet ett antal NPM-paket för att fungera. Express är inget undantag och för att slutföra installationen behöver NPM ladda ned de paket som Express kräver. Paketen för ett Node-projekt är alltid listade i filen package.json. Paketen för Express installationen är följande.

package.json

"dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1",
    "node-sass-middleware": "0.11.0"
},

NPM installerar paket med följande kommando.

Bash

npm install

npm install skapar en fil som heter package-lock.json, filen innehåller information om alla paketen som installerats och de paket som de kräver för att fungera i sin tur. Om install-kommandot kördes utan fel (vid fel står det npm ERR!) så är servern redo.

Bash

npm start

Surfa sedan till localhost:3000. Node-servern är startad och kan besökas med värddatorns ip-adress och rätt port även från andra datorer.

Port 3000 används ofta för att komma åt en utvecklar Node-servern. Detta skiljer sig från HTTP-standardporten som är 80.

Nodemon

Nodemon är ett paket till Node som underlättar utvecklingen av projekt. Det bevakar och lyssnar efter ändringar i serverns filer. Om filerna sparas (ändras) så laddas Node om.

Bash

sudo npm install -g nodemon

Uppdatera package.json.

package.json

"scripts": {
  "dev": "nodemon ./bin/www"
},

Starta sedan servern igen.

npm run dev

Eslint

Visual Studio Code (vscode) kan användas tillsammans med en så kallad linter för att hitta fel och formatera kod. Eslint är en linter för Javascript. Det är väldigt praktiskt vid arbete med kod och hjälper dig som utvecklare att följa praxis och skapa kod av hög kvalité. För att kunna köra Eslint kan det behöva installeras globalt, det gör vi med -g parametern.

Bash

sudo npm install -g eslint

För att slutföra installationen av Eslint så behöver en konfigurationsfil skapas. Var noga med att vara i projektmappen när du kör kommandot.

Bash

eslint --init

Svara följande:

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Standard: https://github.com/standard/standard
? What format do you want your config file to be in? JavaScript

NPM kommer sedan att fråga om paketen ska installeras, välj ja.

I projektets root har Eslint skapat en fil som heter .eslintrc.js med inställningarna. Mer information kring Javascript standard style hittar du på Standardjs.

Eslintrc kan nu redigeras för att ändra inställningarna. För att till exempel ändra formateringsregler så finns de under rules. En sådan regel kan vara att visa fel när semi-kolon saknas.

eslintrc.js

rules: {
  // "indent": ["error", 4],
  "semi": ["error", "always"] // fel om det saknas semikolon
}

Till sist så behöver du installera eslint extension (svenska tillägg) i Vscode. Extensions finns i sidomenyn.

Extensions i Vscode.

Sök efter eslint och installera följande tillägg.

Lär känna din app

Applikationens grunder är nu installerade tillsammans med ett par verktyg för att underlätta utvecklingen. Nästa steg är att titta på Express filstruktur och hur du arbetar med det. Filstrukturen i Express ser ut såhär efter installationen.

bin/
  www
node_modules/
public/
  images/
  javascript/
  stylesheets/
routes/
  index.js
  users.js
app.js
package.json

I roten finns app.js och package.json samt en del andra konfigurationsfiler. App.js är Node-serverns startpunkt. Detta föregås av att start-scriptet i package.json utgår från filen www, i bin mappen, som i sin tur ladda app.js.

App.js laddar in serverns routes från routes/ foldern. När en route laddas efter ett anrop till servern så viser de i sin tur HTML-templaten från views/ mappen. Statiska filer finns i public/ mappen, såsom css och bilder.

Routes

En route är den väg en request tar i din applikation. Användaren efterfrågar en resurs och i routen så bestämmer du vad som ska ske då.

Routerna som skapas av Express generator är index och users. Index hanterar anrop till / och users till /users. Applikationens router laddas och kopplas till en adress i app.js.

app.js

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
// ... //
app.use('/', indexRouter);
app.use('/users', usersRouter);

Routerna innehåller i sin tur koden för att hantera anropen. Detta system skapar struktur för koden. Koden för index-routen ser ut såhär, på Git.

routes/index.js

/* GET home page. */
router.get('/', function (req, res, next) {
  // render view med data
  res.render('index', { data: 'Data jag vill skicka till sidan' });
});

En view laddas med ett så kallat middleware i app.js. Det sätter en path till views-mappen och bestämmer vilken templatmotor som ska användas. Det finns ett stort antal middleware med olika funktioner och det är en viktig del av Express. Enkelt sagt så är middleware insticksprogram som utökar Express funktion.

En egen route

För att skapa en route så kan vi redigera filen index.js i routes mappen. Kopiera GET routen för / och klistra in den efter den existerande routen. Routen vi skapar är för en GET request till /test och den svarar med text.

routes/index.js

/* GET home page. */
router.get('/test', function (req, res, next) {
  // render view med data
  res.send('Detta är en ny testroute.');
});

En till route

Routen ovan finns i index.js filen och är kopplad till / och /test. Prova nu att skapa en test router. Kopiera routes/index.js och döp om den till test.js.

Routen behöver sedan kopplas i app.js filen för att den ska kunna användas.

JavaScript

app.js

const testRouter = require('./routes/test');
...
app.use('/test', testRouter);

JavaScript

routes/test.js

/* GET test page. */
router.get('/', function (req, res, next) {
  res.send('Denna route finns på /test/');
});

Prova sedan att surfa till http://localhost:3000/test, visas din nya route? Annars så behöver du felsöka detta. Har du kvar en /test route i index.js?