[[oktatas:web:nodejs|< Node.js]]

====== Express ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021-2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Az express =====

Az Express egy minimális és könnyen kezelhető Node.js 
webalkalmazás keretrendszer, ami robusztus funkciókat
kínál webes és mobilalkalmazások számára.

Webhely:
  * http://expressjs.com/


===== Express projekt =====

<code>
mkdir app01
cd app01
npm init -y
</code>



Telepítsük az express csomagot:
  npm install express

Lehetséges kimenet:
<code>
npm install express
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN projekt01@1.0.0 No repository field.

+ express@4.16.4
added 48 packages from 36 contributors and audited 121 packages in 3.732s
found 0 vulnerabilities
</code>


Írjuk meg a programunkat:
<code javascript index.js>
const express = require('express')
const app = express();

app.get('/', (req, res) => {
  res.send('Helló Világ!')
});

app.listen(8000, () => {
  console.log('Példa alkalmazás port 8000')
});
</code>


<code>
$ node index.js
Példa alkalmazás port 8000
</code>



Böngészőbe írjuk be:
  http://192.168.5.100:8000/

===== Generátor használata =====

  npx express-generator --view=pug projekt01

A 8.2.0 előtt Node.js esetén csak így:

<code>
npm install -g express-generator
express --view=pug projekt01
</code>



A következő könyvtárszerkezet jön létre:
<code>
projekt01/
  |-bin/
  |  `-www
  |-public/
  |  |-images/
  |  |-javascripts/
  |  `-stylesheets/
  |      `-style.css
  |-routes/
  |  |-index.js
  |  `-users.js
  |-views/
  |  |-error.jade
  |  |-index.jade
  |  `-layout.jade
  |-app.js
  `-package.json
</code>

Lépjünk be a projekt könyvtárába, majd telepítsük a függőségeket:

  cd projekt01
  npm install

A node_modules mappába, települnek a függőségek.

===== Indítás =====

MacOS és Linuxon:
  DEBUG=projekt01:* npm start

Windowson:
  set DEBUG=projekt01:* & npm start

Windows PowerShellben:
  $env:DEBUG='projekt01:*'; npm start


Az utolsó sorban ehhez hasonlót kell lássunk:
  projekt01:server Listening on port 3000 +0ms

A kezdetleges programot a 3000 porton tekinthetjük meg. Böngészőbe:
  localhost:3000

===== Routing =====

Szeretnénk egy action weblapot. 
Készítsünk egy bejegyzést az routers/index.js fájlba:


<code javascript>
router.get('/action', function(req, res, next) {
  res.send('Itt lesznek a tevékenységek');
});
</code>

Az index.js teljes kódja:

<code javascript index.js>
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Webes' });
});

/* action page */
router.get('/action', function(req, res, next) {
  res.send('Itt lesznek a tevékenységek');
});

module.exports = router;
</code>

===== Nézet =====


Készítsünk egy weblapot a views könyvtárban PUG nyelven:

<code pug action.pug>
extends layout

block content
  h1 Tevékenységeink
  p Vállaljuk weblapok elkészítését
  p Keressen minket

</code>

Most javítsuk a routingot:

<code javascript>
router.get('/action', function(req, res, next) {
  res.render('action', { title: 'Webes' });
});
</code>

===== Lásd még =====

  * [[oktatas:web:back-end_framework:express|Back-end framwork Express]]
  * https://github.com/oktat/exchat.git

===== Linkek =====

  * http://expressjs.com/en/starter/generator.html (2021)
  * https://express-validator.github.io/ (2024)