Ha egy egyszerű és könnyű webkiszolgálóra van szükséged csupán a fejlesztéshez, akkor a lite-server kiváló választás.

Ebben a cikkben:

1. Röviden ismertesse, mit és miért a lite-server .
2. Megmutatja, hogyan hozhat létre egy egyszerű webalkalmazást, és hogyan tálalhatja azt a lite-server szolgáltatással .
3. Magyarázzon el néhány egyszerű egyszerű szerver konfigurációt .
4. Végül, ha csak egyszer szeretné telepíteni a lite-szervert és mindenhol használni szeretné, akkor nézze meg a projektem www-lite-szerverét a GitHub-ban.

Bár ezt bevezető szintű cikkként írják, arra számítok, hogy:

• Kicsit tud a parancssorról, például könyvtárak létrehozásáról és váltásáról.
• Npm telepítve van, és megértette, hogyan kell használni a csomagok telepítéséhez.
• Tudja, hogyan lehet egyszerű weboldalakat létrehozni HTML használatával.

Mi az a lite-server?

A lite-server egy könnyű fejlesztő webszerver, amely támogatja az Single Page Apps (SPA) alkalmazásokat . Valójában ennél valamivel technikásabb. De a mi céljainkhoz ez elég jó.

A lite-szervert John Papa hozta létre. Kövesse őt és olvassa el az összes cuccát, mert ő a nyílt forráskódú közösség igazi hőse !

John azért hozott létre egyszerű szervert, mert egy egyszerű webszervert szeretett volna használni, amellyel tesztelheti az URL útvonalakat kihasználó Single Page Applications telepítését . Talán még nem használja a JavaScript GUI keretrendszereket, mint például az Angular, a React és a Vue.js. De tudd, hogy ha megteszed, akkor a lite-server továbbra is ott lesz az Ön számára.

Használjuk ki John munkáját úgy, hogy ténylegesen…

A lite-server használata egy webprojektben

Először létrehozunk egy kis webprojektet, egyszerű index.html- lel . Majd telepíteni lite-szerver . Ezután a lite-szervert fogjuk használni a weboldalunk kiszolgálásához .

Hozzon létre egy projektet

A parancssorba futtassa:

mkdir litecd lite

Ez létrehoz egy új könyvtárat, a lite nevet, és a munka könyvtárává teszi.

A Lite könyvtárba adjon hozzá egy index.html fájlt, amely így néz ki:

Telepítse a lite-szervert

A lite könyvtár parancssorában futtassa:

npm init -y

Az npm segítségével inicializálunk egy üres projektet. Az -ymondja, hogy csak használja az alapértékekre paramétere.

A lite-server hozzáadásához a projektünkhöz futtathatjuk:

npm install --save-dev lite-server

Ez telepíti a lite-server csomagot, és hozzáadja a devDependencies mi projekt package.json fájlt.

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

Ezenkívül megnézheti a node_modules mappát, és láthatja, hogy a lite-server és annak függőségei mind telepítve vannak.

Futtassa a lite-server szoftvert

A package.json fájlban módosítsa a szkriptek objektumot. Cserélje ki a tartalmát egy bejegyzést az úgynevezett startfutó lite-szerver , mint ez:

"scripts": { "start": "lite-server"},

Tehát most a package.json fájljának így kell kinéznie:

A lite-server futtatásához és az index.html weboldal kiszolgálásához futtassa a következőt:

npm start

Figyelje meg, hogy a lite-server elindítja az alapértelmezett böngészőt, és megjeleníti az index.html fájlt :

Továbbá a lite-server a Browsersync- re épül. Tehát, amikor frissítjük az index.html fájlt , a lite-server automatikusan frissül. Próbáljuk ki!

Az index.html fájlban, közvetlenül a <; a> címke előtt adjon hozzá egy címke címkét az oldalhoz:

lite-server

Mentse el a fájlt, és nézze meg automatikusan, mágikusan a böngészőjét !

Néhány egyszerű konfiguráció

A lite-server nagy rugalmasságot biztosít a konfigurálásával kapcsolatban. De ehhez a cikkhez egyszerűvé fogjuk tenni.

Létrehozunk egy egyszerű szerver konfigurációs fájlt, és a módosításhoz szerkesztjük:

• a HTTP port
• a webes gyökérkönyvtár
• melyik böngésző indul

A kiszolgáló konfigurációs fájlja

A konfigurációs fájl a lite-szerver van: bs-config.json

Miért a bs-config ? Nos, a lite-server a Browsersync- re épül, amely támogatja a bs-config nevű JSON vagy JavaScript konfigurációs fájl birtoklását .

Adjon hozzá egy bs-config.json fájlt a projekt gyökérkönyvtárához. Így kell kinéznie:

Ez a példa a konfigurációs fájl valójában csak az alapértelmezett értékeket másolja. De azt fogjuk használni, hogy elmagyarázzuk, hogyan lehet megváltoztatni néhány hasznosabb konfigurációs paramétert.

A HTTP-port megadása

Alapértelmezés szerint a lite-server a 3000-es portot használja . De ha másik portot szeretne használni, könnyen megváltoztathatja azt.

Váltjuk át például a 3001-es port használatára. A bs-config.json fájlban változtassa meg a portot, hogy így nézzen ki:

"port": 3001,

Indítsa újra a lite-server alkalmazást npm start.

A lite-server újra elindítja az alapértelmezett böngészőnket. De ezúttal az URL így néz ki:

//localhost:3001/

A webgyökér megadása

Alapértelmezés szerint a lite-server kiszolgálja az oldalakat az aktuális könyvtárból, ahova telepítve van. A bs-config.json szerver elemet használva megadhatunk egy másik webgyökeret vagy „alapkönyvtárat”, amelyet a lite-server hív.

Próbáljuk ki:

1. Az Ön lite projekt hozzon létre egy könyvtárat neve: teszt
2. Másolás az index.html a teszt könyvtár
3. A bs-config.json fájlban módosítsa a kiszolgáló elemet a következőképpen:

"server": { "baseDir": "./test"}

Indítsa újra a lite-szervert. A kimenetben láthatja, hogy:

Fájlok kiszolgálása innen: ./test

A Böngésző elindítása

Amikor elindul, a lite-server elindítja az alapértelmezett böngészőnket a weboldal megjelenítéséhez. De talán azt szeretné, hogy projektje támogassa mind az IE-t, mind a Chrome-ot . Nos, mondhatjuk a lite-server-nek, hogy indítsa el mindkettőt.

Figyelje meg, hogy a konfigurációs fájl böngészőbejegyzése valójában tömb. Tehát adhatunk neki egy listát a húrokról.

Szórakozzunk ezzel, és tegyük lehetővé, hogy a lite-server elindítson egy csomó böngészőt. A gépemen három böngésző van telepítve: a Chrome, az IE és a Firefox. Annak érdekében, hogy a lite-server elindítsa mindhármat, egyszerűen módosítom a böngésző bejegyzését:

"browser": ["chrome", "iexplore", "firefox"]

És amikor futok, npm startezt látom:

Mert hé! Soha nem lehet túl sok böngésző nyitva.

www-lite-server: Telepítse egyszer és használja bárhol

Mivel nem tudjuk beállítani a szerver Base Directory mi bs-config.json tudjuk valóban telepíteni lite-szerver egy helyen, és pont ez minden más projekt.

Hoztam létre egy egyszerű projektet a www-lite-server néven, amely éppen ezt teszi. Használhatja így:

git clone //github.com/t-palmer/www-lite-server.gitcd www-lite-servernpm installnpm start

Ez a helyi index.html fájlt fogja kiszolgálni , amely így néz ki:

Ha módosítja a baseDir bejegyzést a bs-config.json fájlban, akkor a www-lite-server weblapokat szolgálhat bármelyik projektjéhez. Például, ha van projektje:

C: \ dev \ my-project

csak változtassa meg a bs-config.json fájlt , hogy valami ilyennek tűnjön:

{ "port": 3000, "server": { "baseDir": "C:\dev\my-project" }}

Ezután használja npm starta weboldalak kiszolgálásának megkezdéséhez.

Néhány műszaki megjegyzés

A lite-server csak egy burkoló a Broswersync körül. Valójában a Browsersync végzi a legtöbb „nehéz emelést”. Az egyoldalas alkalmazások azonban általában olyan útvonalakat használnak, amelyeket a Browsersync nem kezel. További információkért lásd a Miért részt a lite-server GitHub README oldalon.

Erőforrások

Kövesse John Papa-t a Medium-on: //medium.com/@John_Papa

Kérjük, csillagozza meg a lite-szervert a GitHubon: //github.com/johnpapa/lite-server

www-lite-server: //github.com/t-palmer/www-lite-server

Böngésző szinkron: //www.browsersync.io/