Node - en första serverapplikation - Versionshistorik

PGJ den 31 oktober 2020 kl. 12.26

2020-10-31T12:26:07Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.26
Rad 18:		Rad 18:
	Nu ska vi skapa grunden för vår applikation. Det gör du genom att köra detta kommando:		Nu ska vi skapa grunden för vår applikation. Det gör du genom att köra detta kommando:

	<syntaxhighlight lang="javascript" ~~line~~>		<syntaxhighlight lang="javascript">
	express		express
	</syntaxhighlight>		</syntaxhighlight>
Rad 26:		Rad 26:
	Man kan faktiskt få express generator att även skapa katalogen som din applikation ska ligga i. I sådana fall skriver man:		Man kan faktiskt få express generator att även skapa katalogen som din applikation ska ligga i. I sådana fall skriver man:

	<syntaxhighlight lang="javascript" ~~line~~>		<syntaxhighlight lang="javascript">
	express <katalognamn>		express <katalognamn>
	</syntaxhighlight>		</syntaxhighlight>
Rad 34:		Rad 34:
	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:		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:

	<syntaxhighlight lang="javascript" ~~line~~>		<syntaxhighlight lang="javascript">
	npm install		npm install
	</syntaxhighlight>		</syntaxhighlight>
Rad 42:		Rad 42:
	Vi kan nu provköra vår applikation. Enklast gör du det genom att köra följande i kommandoraden:		Vi kan nu provköra vår applikation. Enklast gör du det genom att köra följande i kommandoraden:

	<syntaxhighlight lang="javascript" ~~line~~>		<syntaxhighlight lang="javascript">
	npm start		npm start
	</syntaxhighlight>		</syntaxhighlight>

PGJ den 31 oktober 2020 kl. 12.25

2020-10-31T12:25:38Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.25
Rad 4:		Rad 4:
	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:		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:

	<syntaxhighlight lang="javascript" ~~line~~>		<syntaxhighlight lang="javascript">
	npm -g install express-generator		npm -g install express-generator
	</syntaxhighlight>		</syntaxhighlight>

PGJ den 31 oktober 2020 kl. 12.24

2020-10-31T12:24:32Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.24
Rad 4:		Rad 4:
	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:		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:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="javascript" line>		<syntaxhighlight lang="javascript" line>
	npm -g install express-generator		npm -g install express-generator
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Om allt gick bra, så har du nu allt som behövs för att hänga med i exemplen.		Om allt gick bra, så har du nu allt som behövs för att hänga med i exemplen.
Rad 20:		Rad 18:
	Nu ska vi skapa grunden för vår applikation. Det gör du genom att köra detta kommando:		Nu ska vi skapa grunden för vår applikation. Det gör du genom att köra detta kommando:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="javascript" line>		<syntaxhighlight lang="javascript" line>
	express		express
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	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.		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.
Rad 30:		Rad 26:
	Man kan faktiskt få express generator att även skapa katalogen som din applikation ska ligga i. I sådana fall skriver man:		Man kan faktiskt få express generator att även skapa katalogen som din applikation ska ligga i. I sådana fall skriver man:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="javascript" line>		<syntaxhighlight lang="javascript" line>
	express <katalognamn>		express <katalognamn>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Där <code>''katalognamn''</code> 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).		Där <code>''katalognamn''</code> 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).
Rad 40:		Rad 34:
	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:		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:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="javascript" line>		<syntaxhighlight lang="javascript" line>
	npm install		npm install
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Nu installeras alla grundpaket som behövs för att köra Express.		Nu installeras alla grundpaket som behövs för att köra Express.
Rad 50:		Rad 42:
	Vi kan nu provköra vår applikation. Enklast gör du det genom att köra följande i kommandoraden:		Vi kan nu provköra vår applikation. Enklast gör du det genom att köra följande i kommandoraden:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="javascript" line>		<syntaxhighlight lang="javascript" line>
	npm start		npm start
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

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

PGJ: /* Skapa en projektkatalog */

2019-01-13T12:46:59Z

Skapa en projektkatalog

← Äldre version		Versionen från 13 januari 2019 kl. 12.46
Rad 62:		Rad 62:
	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:		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:

	~~<div class="well well-cyanide-light">~~
	<pre>		<pre>
	.		.
Rad 84:		Rad 83:
	7 directories, 9 files		7 directories, 9 files
	</pre>		</pre>
	~~</div>~~

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

PGJ den 13 januari 2019 kl. 12.46

2019-01-13T12:46:32Z

← Äldre version		Versionen från 13 januari 2019 kl. 12.46
Rad 4:		Rad 4:
	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:		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:

	<~~code~~>npm -g install express-generator</~~code~~>		<div class="well well-cyanide-light">
			<syntaxhighlight lang="javascript" line>
			npm -g install express-generator
			</syntaxhighlight>
			</div>

	Om allt gick bra, så har du nu allt som behövs för att hänga med i exemplen.		Om allt gick bra, så har du nu allt som behövs för att hänga med i exemplen.
Rad 16:		Rad 20:
	Nu ska vi skapa grunden för vår applikation. Det gör du genom att köra detta kommando:		Nu ska vi skapa grunden för vår applikation. Det gör du genom att köra detta kommando:

	<~~code~~>express</~~code~~>		<div class="well well-cyanide-light">
			<syntaxhighlight lang="javascript" line>
			express
			</syntaxhighlight>
			</div>

	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.		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.
Rad 22:		Rad 30:
	Man kan faktiskt få express generator att även skapa katalogen som din applikation ska ligga i. I sådana fall skriver man:		Man kan faktiskt få express generator att även skapa katalogen som din applikation ska ligga i. I sådana fall skriver man:

	<~~code~~>express ~~''<~~katalognamn>''</~~code~~>		<div class="well well-cyanide-light">
			<syntaxhighlight lang="javascript" line>
			express <katalognamn>
			</syntaxhighlight>
			</div>

	Där <code>''katalognamn''</code> 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).		Där <code>''katalognamn''</code> 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).
Rad 28:		Rad 40:
	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:		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:

	<~~code~~>npm install</~~code~~>		<div class="well well-cyanide-light">
			<syntaxhighlight lang="javascript" line>
			npm install
			</syntaxhighlight>
			</div>

	Nu installeras alla grundpaket som behövs för att köra Express.		Nu installeras alla grundpaket som behövs för att köra Express.
Rad 34:		Rad 50:
	Vi kan nu provköra vår applikation. Enklast gör du det genom att köra följande i kommandoraden:		Vi kan nu provköra vår applikation. Enklast gör du det genom att köra följande i kommandoraden:

	<~~code~~>npm start</~~code~~>		<div class="well well-cyanide-light">
			<syntaxhighlight lang="javascript" line>
			npm start
			</syntaxhighlight>
			</div>

	Då kör npm igång Node och startar vår kod.		Då kör npm igång Node och startar vår kod.
Rad 41:		Rad 61:

	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:		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:

			<div class="well well-cyanide-light">
	<pre>		<pre>
	.		.
Rad 62:		Rad 84:
	7 directories, 9 files		7 directories, 9 files
	</pre>		</pre>
			</div>

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

PGJ: /* views */

2016-08-06T07:38:09Z

views

← Äldre version		Versionen från 6 augusti 2016 kl. 07.38
Rad 83:		Rad 83:

	== <code>views</code> ==		== <code>views</code> ==
	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 ~~<code>~~Jade~~</code>~~. 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.		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.
			<div class="well-sm well-danger">
			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.
			</div>

	== Nästa aktivitet ==		== Nästa aktivitet ==

PGJ: /* public */

2016-08-06T07:08:13Z

public

← Äldre version		Versionen från 6 augusti 2016 kl. 07.08
Rad 77:		Rad 77:

	== <code>public</code>==		== <code>public</code>==
	Här lägger du material som ska vara statiskt. Det vill säga ~~sån~~ som inte kommer att ändra sig utifrån vad applikationen gör. Det kan vara saker som bilder, CSS-stylesheets och rena statiska webbsidor.		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.

	== <code>routes</code> ==		== <code>routes</code> ==

PGJ: /* Skapa en projektkatalog */

2016-08-06T06:55:01Z

Skapa en projektkatalog

← Äldre version		Versionen från 6 augusti 2016 kl. 06.55
Rad 18:		Rad 18:
	<code>express</code>		<code>express</code>

	Detta lägger till massvis med kataloger och filer. Dessa kommer att tjäna som grunden till din webbapplikation. Vi kan ~~redan~~ nu provköra vår applikation. Enklast gör du det genom att köra följande i kommandoraden:		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:

			<code>express ''<katalognamn>''</code>

			Där <code>''katalognamn''</code> 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:

			<code>npm install</code>

			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:

	<code>npm start</code>		<code>npm start</code>

	~~npm kommer nu att kolla så att alla paket som vår applikation beror på är tillgängliga. Vilket de bör vara när vi precis initierat vår applikation. Därefter~~ kör npm igång Node och startar vår kod.		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 <code>localhost:3000</code>. Då ansluter sig webbläsaren till port 3000 på ~~vår~~ lokala ~~maskin~~, vilket är defaultporten ~~i applikations-ramverket~~. Du bör nu få ett litet välkomstmeddelande som visar att ~~express~~ är igång. Hitintills har vi en riktigt tråkig applikation!		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 <code>localhost:3000</code>. 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:		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:

PGJ den 6 augusti 2016 kl. 06.41

2016-08-06T06:41:33Z

← Äldre version		Versionen från 6 augusti 2016 kl. 06.41
Rad 1:		Rad 1:
	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.		Nu ska vi skapa vår första riktiga serverapplikation med Node. För att göra det ska vi ta [https://expressjs.com/ 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.

	<div class="well well-warning">		<div class="well well-warning">

PGJ den 6 augusti 2016 kl. 06.15

2016-08-06T06:15:45Z

← Äldre version		Versionen från 6 augusti 2016 kl. 06.15
Rad 1:		Rad 1:
	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 ~~samtidigt~~. 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.		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.

	<div class="well well-warning">		<div class="well well-warning">