• Szerző: Sallai András
• Copyright © 2021-2023, Sallai András
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

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.

A weblapok nem a projekt gyökérkönyvtárában vannak, akkor meg kell adnunk annak helyét, például így:

package.json

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

bs-config.json

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

bs-config.json

{
  "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

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.

bs-config.json

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

bs-config.json

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

A package.json fájl:

package.json

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

npm install --save-dev lite-server

npx browser-sync init