Node - en första serverapplikation

Nu ska vi skapa vår första riktiga serverapplikation med Node. För att göra det ska vi ta Express till hjälp. Det är ett minimalistiskt ramverk som används för att bygga serverapplikationer. Med det i grunden så slipper man skriva massvis med onödig kod. Man vet även att grundkoden är vältestad och förhoppningsvis buggfri. Det gör att man snabbare kan komma igång med sin applikation och att man kan koncentrera sig på den viktiga delen av koden.

Om du inte följde med i exemplen i npm-delen, måste du först av allt installera ”Express Generator”. Denna behövs för att kunna följa med i exemplen i denna aktivitet. Detta kan du göra genom att gå till en kommandorad och skriva följande:

npm -g install express-generator

Om allt gick bra, så har du nu allt som behövs för att hänga med i exemplen.

Skapa en projektkatalog

Vi ska först av allt skapa en tom katalog som ska tjäna som hemvist för vår applikation. Skapa en tom katalog. Se till att ge den ett bra namn, så att du vet vad den innehåller. Det är en bra vana att alltid använda ungefär samma namngivningsstandard för ens applikationer. Då blir de lättare att hålla reda på samt att det underlättar om du ska flytta din applikation till en annan server.

Härnäst behöver man gå in i en kommandorad och förflytta sig till den tomma katalogen.

Nu ska vi skapa grunden för vår applikation. Det gör du genom att köra detta kommando:

express

Detta lägger till massvis med kataloger och filer. Dessa kommer att tjäna som grunden till din webbapplikation. Om din katalog inte skulle vara tom, kommer express generator att varna dig och fråga om du verkligen vill installera i den valda katalogen.

Man kan faktiskt få express generator att även skapa katalogen som din applikation ska ligga i. I sådana fall skriver man:

express <katalognamn>

Där katalognamn förstås är namnet på den katalog du vill installera i. Finns inte katalogen så skapas den, finns den redan så installeras det i den befintliga katalogen (och om den inte är tom får du en varning).

Nu skapades en minimal struktur för vår applikation. Dock så har inga npm-paket installerats än. Så gå in i katalogen och skriv:

npm install

Nu installeras alla grundpaket som behövs för att köra Express.

Vi kan nu provköra vår applikation. Enklast gör du det genom att köra följande i kommandoraden:

npm start

Då kör npm igång Node och startar vår kod.

För att testa att allt fungerar som det ska kan du gå in i en webbläsare på samma dator som du kör applikationen. Dra igång en ny flik och som URL skriver du localhost:3000. Då ansluter sig webbläsaren till port 3000 på den lokala maskinen, vilket är defaultporten som används av Express. Du bör nu få ett litet välkomstmeddelande som visar att Express är igång. Hitintills har vi en riktigt tråkig applikation!

Nu ska vi titta närmare på vad som egentligen installerades när vi körde Express. Du bör ha fått en filstruktur som ser ut ungefär så här:

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

7 directories, 9 files

Vi ska gå igenom vad filerna och katalogerna har för funktion. Vi börjar ifrån toppen på filstrukturen.

app.js

Detta är grunden till vår applikation. Här kommer vi att ändra på vissa saker allteftersom vi bygger ut vår applikation.

bin

Här återfinner vi filen www. Detta är filen som kommer att öppna portar och skapa grundservern för oss. I de flesta fall behöver vi inte gå in och ändra något i denna fil.

package.json

Projektets package.json är ifylld med minimal information. Du vill antagligen lägga till mer metadata om projektet i den. Läs på i tidigare aktiviteter för att se mer om vad du kan göra här.

Under dependencies-biten återfinns de paket som Express automatiskt lade till. Om du vill använda fler paket, kan du lägga till dem med npm. Kom ihåg att till att ha med flaggan; ”--save”, så att informationen om vilka paket din applikation är beroende på uppdateras.

public

Här lägger du material som ska vara statiskt. Det vill säga sånt som inte kommer att ändra sig utifrån vad applikationen gör. Det kan vara saker som bilder, CSS-stylesheets och rena statiska webbsidor.

routes

Här ligger det som kommer att bli huvuddelen i din kod. När användaren går till olika URL:er som matchar filerna i denna katalog, så kommer kod som är kopplad till dessa filer att exekveras. Detta är ett kraftfullt koncept kring vilket många webbapplikationer är uppbyggda. Vi återkommer till detta.

views

Här finns mallar som kommer att köras när applikationen ska generera dynamiska webbsidor. Default använder sig Express av mallsystemet som heter Jade. Det är inte helt nödvändigt att använda sig av detta och det kan kännas lite krångligt i början. Så till att börja med kommer vi att generera vår HTML-kod själva.

På grund av ett företag anser sig ha märkesskyddat namnet Jade, har mallsystemet döpts om till Pug. I skrivandes stund används dock fortfarande paketet som heter Jade, då Pug fortfarande är i beta-stadiet.

Nästa aktivitet

Det är nu dags att börja titta på hur applikationskoden fungerar.

Node - grundkoden för vår första applikation