Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:nodejs:lite-server [2024/07/27 18:49] – eltávolítva admin
+++ oktatas:web:nodejs:lite-server [2024/07/28 11:27] (aktuális) – admin
@@ Sor 1: / Sor 1: @@
+[[oktatas:web:nodejs|< Node.js]]
+====== lite-server ======
+  * **Szerző:** Sallai András
+  * Copyright (c) 2021, Sallai András
+  * Szerkesztve: 2021-2024
+  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
+  * Web: https://szit.hu
+===== A lite-server =====
+Könnyed Node.js kiszolgáló, webes alkalmazások számára,
+fejlesztési időben.
+Észleli a JavaScript fájlok változásait és a böngészőben automatikusan frissíti a weblapot.
+Webhely:
+  * https://github.com/johnpapa/lite-server#readme
+  * https://www.npmjs.com/package/lite-server
+Beállítások:
+  * https://browsersync.io/docs/options/
+A lite-server egy egyszerű testre szabott **burkoló a BrowserSync körül**.
+A BrowserSync egy fejlesztői webszerver. A lite-server azért jött létre,
+hogy megkönnyítse az SPA webhelyek kiszolgálását.
+===== Használat =====
+Készítsünk egy projektet, például app01 néven, majd lépjünk be a könyvtárba:
+  mkdir app01
+  cd app01
+A lite-server egy Node.js alkalmazás, ezért fel kell készíteni a projektet erre.
+Node.js projekt előkészítése:
+  npm init -y
+vagy:
+  yarn init -y
+Telepítenünk kell a lite-server csomagot fejlesztési céllal. Használjuk a következő parancsot:
+  npm install lite-server --save-dev
+vagy:
+  yarn add lite-server --dev
+A szervert két módon indíthatjuk. Használhatjuk az npx parancsot, ennek módját
+láthatjuk a következő sorban:
+  npx lite-server
+Az npx parancs helyett, felvehetünk egy bejegyzést a package.json fájlban,
+hogy a "npm start" vagy "yarn start" paranccsal indíthassuk a szervert.
+A package.json fájlban felveszek egy start bejegyzést:
+<code>
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "lite-server"
+  }
+</code>
+Vegyük észre a "test": kezdetű sor végén a vesszőt (,).
+Az alkalmazás indítás ezek után:
+  npm start
+vagy
+  yarn start
+Két port is nyílik:
+  * 3000 - a weblapunk
+  * 3001 - a lite-server felülete
+A localhost:3000 porton a weblapunk megnyílik automatikusan egy böngészőben.
+A projekt könyvtárában lenni kell egy index.html állománynak, amit kiszolgál
+a lite-server.
+===== Alapkönyvtár beállítása =====
+A weblapok nem a projekt gyökérkönyvtárában vannak,
+akkor meg kell adnunk annak helyét, például így:
+<code javascript package.json>
+...
+  "scripts": {
+    "start": "lite-server --baseDir=public"
+  },
+...
+</code>
+Mindkét változat jó:
+  * <nowiki>A --baseDir=public</nowiki>
+  * <nowiki>A --baseDir public</nowiki>
+A legszerencsésebb, ha írunk egy konfigurációs fájlt a lite-server számára.
+Így több könyvtár is megadható amit kiszolgál a szerver.
+A konfigurációt egy bs-config.json fájlba írjuk:
+<code javascript bs-config.json>
+{
+    "server": ["src", "node_modules/bootstrap/dist/css"],
+    "port": 3000
+}
+</code>
+A példa konfigurációs fájlban a "server" tulajdonságban van beállítva, hogy
+milyen könyvtárakat szolgáljon ki a szerver, a "port" tulajdonságnál van
+megadva, milyen porton szolgálja ki a weblapot.
+A portbeállítással felülírtuk az alapértelmezett 3000-s portot.
+Másik példa:
+<code javascript bs-config.json>
+{
+  "port": 3000,
+  "files": ["./public/**/*.{html,htm,css,js}"],
+  "server": { "baseDir": "./public" }
+}
+</code>
+Ebben a példában azt is megadtuk, milyen fájlokat szolgáljon ki a szerver.
+Ha van konfigurációs állomány egyszerűen indíthatjuk a szervert az npx paranccsal:
+  npx lite-server
+Ha a package.json fájlba írjuk akkor egy ilyen sor szükséges:
+  "start": "lite-server"
+Ha konfigurációs fájlt egy könyvtárba helyeztük el, például configs nevűbe, akkor adjuk meg a -c kapcsoló után az útvonalat:
+  npx lite-server -c configs/bs-config.json
+===== Globális használat =====
+A lite-server használható globális telepítés után is.
+Telepítés:
+  npm install --global lite-server
+Ebben az esetben nincs szükség az npx parancsra. Indítás:
+  lite-server
+Ha package.json fájlba írjuk az indító sort, akkor mindegy, hogy lokálisan vagy globálisan lett telepítve a lite-server.
+===== Több alapkönyvtár =====
+<code javascript bs-config.json>
+{
+    "server": ["src", "node_modules/bootstrap/dist/css"]
+}
+</code>
+<code javascript bs-config.json>
+{
+    "server": [
+        "src",
+        "node_modules/bootstrap/dist/css",
+        "node_modules/bootstrap/dist/js"
+    ]
+}
+</code>
+A package.json fájl:
+<code javascript package.json>
+  "devDependencies": {
+    "lite-server": "^2.6.1"
+  }
+</code>
+===== Config generálás =====
+<code>
+npm install --save-dev lite-server
+npx browser-sync init
+</code>