szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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>