< NodeJS

lite-server

Szerző: Sallai András

Copyright © 2021-2023, Sallai András

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A lite-server

Könnyed NodeJS 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 NodeJS alkalmazás, ezért fel kell készíteni a projektet erre.

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

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "lite-server"
}

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:

... "scripts": { "start": "lite-server --baseDir=public" }, ...

Mindkét változat jó:

A --baseDir=public

A --baseDir public

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:

{ "server": ["src", "node_modules/bootstrap/dist/css"], "port": 3000 }

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:

{ "port": 3000, "files": ["./public/**/*.{html,htm,css,js}"], "server": { "baseDir": "./public" } }

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

{ "server": ["src", "node_modules/bootstrap/dist/css"] }
{ "server": [ "src", "node_modules/bootstrap/dist/css", "node_modules/bootstrap/dist/js" ] }

A package.json fájl:

"devDependencies": { "lite-server": "^2.6.1" }

Config generálás

npm install --save-dev lite-server
npx browser-sync init