Kuinka voit käyttää lite-palvelinta yksinkertaiseen Web-palvelimen kehittämiseen

Jos tarvitset helppoa ja kevyttä Web-palvelinta vain kehitystyöhön, lite-server on erinomainen valinta.

Tässä artikkelissa aion:

  1. Selittää lyhyesti , mitä ja miksi on lite-palvelimen .
  2. Näytä kuinka luoda yksinkertainen verkkosovellus ja palvella sitä lite-palvelimen kanssa .
  3. Selitä yksinkertainen yksinkertaisen palvelimen kokoonpano .
  4. Lopuksi, jos haluat vain asentaa lite-palvelimen kerran ja käyttää sitä kaikkialla , tutustu projektini www-lite-palvelimeen GitHubissa.

Vaikka tämä on kirjoitettu johdantotason artikkeliksi, odotan, että:

  • Tiedät vähän komentokehotteesta, kuten hakemistojen luomisesta ja vaihtamisesta.
  • Sinulla on asennettuna npm ja ymmärrät kuinka sitä voidaan käyttää pakettien asentamiseen.
  • Tiedät kuinka luoda yksinkertaisia ​​verkkosivuja HTML: n avulla.

Mikä on Lite-Server?

lite-server on kevyt kehityspalvelin, joka tukee Single Page Apps (SPA) -sovelluksia . Itse asiassa se on vähän teknisempi kuin se. Mutta tarkoituksellemme se on tarpeeksi hyvä.

lite-palvelimen loi John Papa. Sinun tulisi seurata häntä ja lukea kaikki hänen jutut, koska hän on todellinen avoimen lähdekoodin yhteisön sankari !

John loi yksinkertaisen palvelimen, koska hän halusi yksinkertaisen verkkopalvelimen, jonka avulla hän voisi testata URL-reittejä hyödyntävien Single Page -sovellusten käyttöönottoa . Ehkä et vielä käytä JavaScript-käyttöliittymäkehyksiä, kuten Angular, React ja Vue.js. Mutta tiedä, että kun teet niin, lite-palvelin on edelleen käytettävissäsi.

Hyödynnetään siis Johnin työtä todella…

Lite-palvelimen käyttö Web-projektissa

Ensin luomme pienen verkkoprojektin, jossa on yksinkertainen index.html . Asennamme lite-palvelimen . Sitten käytämme yksinkertaistettua palvelinta palvelemaan verkkosivustoamme.

Luo projekti

Suorita komentokehotteessa:

mkdir litecd lite

Tämä luo uuden hakemiston nimeltä lite ja tekee siitä työhakemistomme.

Meidän lite hakemistoon, lisää index.html tiedosto, joka näyttää tältä:

Asenna lite-palvelin

Suorita Lite- hakemiston komentokehotteessa :

npm init -y

Käytämme npm: tä tyhjän projektin alustamiseen. -yKertoo se vain käyttää oletusasetuksia parametreja.

Lisätä Lite-palvelimen meidän projekti voimme käyttää:

npm install --save-dev lite-server

Tämä asentaa Lite-palvelimen paketin ja lisää sen devDependencies meidän projektin package.json tiedosto.

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

Voit myös katsoa node_modules- kansiota ja nähdä, että lite-palvelin ja sen riippuvuudet on asennettu sinne.

Suorita lite-server

Muokkaa paketti.json- tiedostossa komentosarjaobjektia . Korvaa sisältö nimellä, startjoka käyttää lite-server-palvelinta , seuraavasti:

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

Joten nyt package.json- tiedostosi pitäisi näyttää tältä:

Suorita lite-server ja palvele index.html- verkkosivua suorittamalla:

npm start

Huomaa, että lite-server käynnistää oletusselaimesi ja näyttää hakemisto index.html :

Lisäksi lite-server on rakennettu Browsersyncin päälle. Joten kun päivitämme index.html-tiedostoamme , lite-server päivittyy automaattisesti. Kokeillaan!

Lisää hakemistotiedostoon index.html, juuri ennen <; a> -tagia, sivulle otsikkotunniste:

lite-server

Tallenna tiedosto ja katsele selaimesi päivitystä automaattisesti !

Joitakin yksinkertaisia ​​määrityksiä

lite-server tukee paljon joustavuutta sen kokoonpanossa. Mutta pidämme tämän artikkelin yksinkertaisena.

Luomme yksinkertaisen palvelimen kokoonpanotiedoston ja muokkaamme sitä muuttaaksesi:

  • HTTP-portti
  • Web-juurihakemisto
  • mikä selain käynnistetään

Lite-server-määritystiedosto

Config tiedosto on Lite-palvelin on: BS-config.json

Miksi bs-config ? No, lite-server on rakennettu Browsersync-sovellukseen, joka tukee JSON- tai JavaScript-määritystiedoston nimeämistä bs-config .

Lisää bs-config.json- tiedosto projektin juuriin. Sen pitäisi näyttää tältä:

Tämä esimerkki konfigurointitiedostosta kopioi oletusarvot. Mutta käytämme sitä perustana selitettäessä, kuinka joitain hyödyllisempiä konfigurointiparametreja muutetaan.

Määritetään HTTP-portti

Lite-server käyttää oletuksena porttia 3000 . Mutta jos haluat käyttää eri porttia, voit helposti muuttaa sitä.

Vaihdetaan se esimerkiksi käyttämään porttia 3001. Vaihda bs-config.json- tiedostossa portti näyttämään tältä:

"port": 3001,

Restart Lite-palvelimen avulla npm start.

lite-server käynnistää oletusselaimen uudelleen. Mutta tällä kertaa URL näyttää tältä:

//localhost:3001/

Verkko-juuren määrittäminen

Oletusarvoisesti lite-server palvelee sivuja nykyisestä hakemistosta, johon se on asennettu. Käyttämällä bs-config.json- palvelimen elementtiä voimme määrittää toisen web-juuren tai " perushakemiston ", kun lite-server sitä kutsuu.

Kokeillaan:

  1. Luo Lite- projektissasi hakemisto nimeltä test
  2. Kopioi index.html sen testin hakemistoon
  3. In bs-config.json, muuttaa palvelinelementti näyttää tältä:
"server": { "baseDir": "./test"}

Käynnistä lite-palvelin uudelleen. Tuloksesta näet, että se on:

Tiedostojen tarjoaminen osoitteesta: ./test

Käynnistetään selain

Kun se käynnistyy, lite-server käynnistää oletusselaimesi näyttämään verkkosivun. Ehkä haluat projektisi tukevan sekä IE: tä että Chromea . No, voimme kertoa lite-serverille käynnistää molemmat.

Huomaa, että asetustiedoston selaimen merkintä on itse asiassa taulukko. Joten voimme antaa sille luettelon jousista.

Pidetään hauskaa tämän kanssa ja saatetaan lite-server käynnistämään joukko selaimia. Koneelleni on asennettu kolme selainta: Chrome, IE ja Firefox. Jotta lite-server käynnistää kaikki kolme, vaihdan vain selaimen merkinnän seuraavasti:

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

Ja nyt kun juon, npm startnäen tämän:

Koska hei! Sinulla ei voi koskaan olla liian monta selainta auki.

www-lite-server: Asenna kerran ja käytä sitä missä tahansa

Koska emme voi määrittää palvelimen päähakemisto meidän bs-config.json , voimme todella asentaa Lite-palvelimen yhteen paikkaan ja suuntaa sitä ketään muuta hanketta.

Olen luonut sinulle yksinkertaisen projektin nimeltä www-lite-server, joka tekee juuri sen. Voit käyttää sitä näin:

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

Tämä palvelee paikallista index.html-tiedostoa, joka näyttää tältä:

Muuttamalla baseDir- merkintää bs-config.jsonissa voit antaa www-lite-palvelimen palvella verkkosivuja mille tahansa projektillesi. Esimerkiksi, jos sinulla on projekti:

C: \ dev \ my-projekti

vaihda vain bs-config.json näyttämään tältä:

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

npm startKäynnistä sitten verkkosivujen tarjoaminen.

Joitakin teknisiä huomautuksia

lite-server on vain kääre Broswersyncin ympärillä. Itse asiassa Browsersync tekee suurimman osan "raskaasta nostamisesta". Yhden sivun sovellukset käyttävät kuitenkin yleensä reittejä, joita Browsersync ei käsittele. Lisätietoja on lite-palvelimen GitHub README -sivuston Miksi-osassa.

Resurssit

Seuraa John Papaa Mediumissa: //medium.com/@John_Papa

Tähditä lite-palvelin GitHubissa: //github.com/johnpapa/lite-server

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

Selaimen synkronointi: //www.browsersync.io/