de Todd Palmer

Cum puteți utiliza lite-server pentru un server Web de dezvoltare simplă

Dacă aveți nevoie de un Server Web ușor și ușor doar pentru a face ceva dezvoltare, lite-server este o alegere excelentă.

În acest articol voi:

1. Explicați pe scurt ce și de ce de lite-server.
2. Vă arăt cum creați o aplicație web simplă și servește-l cu lite-server.
3. Explicați câteva simple configurație lite-server.
4. În cele din urmă, dacă doriți doar instalați lite-server o dată și folosiți-l peste tot, aruncă o privire la proiectul meu www-lite-server în GitHub.

Deși acest lucru este scris ca un articol introductiv la nivel, mă aștept ca:

• Știți puțin despre promptul de comandă, cum ar fi crearea și comutarea directoarelor.
• Tu ai npm instalat și să înțelegeți cum să îl utilizați pentru a instala pachete.
• Știți cum să creați pagini web simple folosind HTML.

Ce este lite-server?

lite-server este un server web de dezvoltare ușoară cu suport pentru aplicații cu o singură pagină (SPA-uri). De fapt, este ceva mai tehnic decât atât. Dar, pentru scopurile noastre, este suficient de bun.

lite-server a fost creat de John Papa. Ar trebui să-l urmezi și să-i citești toate lucrurile, pentru că este un adevărat erou al comunității open source!

John a creat lite-server pentru că dorea un server web simplu pe care să-l poată folosi pentru a testa implementarea Aplicații pentru o singură pagină care utilizează traseele URL. Poate că nu utilizați cadre GUI JavaScript ca Unghiular, Reacţionași Vue.js încă. Dar să știi că atunci când o faci, lite-server va fi tot acolo pentru tine.

Deci, să profităm de munca lui John, de fapt …

Utilizarea serverului lite într-un proiect web

În primul rând, vom crea un mic proiect web cu un simplu index.html. Vom instala lite-server. Apoi, vom folosi lite-server pentru a ne servi pagina web.

Creați un proiect

La promptul de comandă, executați:

mkdir litecd lite

Aceasta creează un nou director numit lite și îl face directorul nostru de lucru.

În a noastră lite director, adăugați un index.html fișier care arată astfel:

Instalați lite-server

La promptul de comandă din lite director, rulați:

npm init -y

Folosim npm pentru a inițializa un proiect gol. -y îi spune să folosească doar valorile implicite pentru orice parametru.

A adauga lite-server la proiectul nostru putem executa:

npm install --save-dev lite-server

Aceasta instalează fișierul lite-server pachet și îl adaugă la devDependențe în proiectul nostru pachet.json fişier.

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

De asemenea, puteți arunca o privire la nod_module dosar și vedeți asta lite-server iar dependențele sale sunt instalate acolo.

Rulați lite-server

În dumneavoastră pachet.json fișier, modificați fișierul scripturi obiect. Înlocuiți conținutul cu o intrare numită start care rulează lite-server, asa:

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

Deci acum pachet.json fișierul ar trebui să arate astfel:

A alerga lite-server și slujește-ți index.html pagina web, rulați:

npm start

Observa asta lite-server lansează browserul implicit și afișează index.html:

În plus, lite-server este construit pe Browsersync. Deci, când ne actualizăm index.html, lite-server se va reîmprospăta automat. Hai sa incercam!

În dumneavoastră index.html, chiar înainte de <; o> etichetă, adăugați o etichetă de titlu la pagină:

<h1>lite-server</h1>

Salvați fișierul și urmăriți actualizarea browserului auto-magic!

Câteva configurări simple

lite-server acceptă multă flexibilitate în ceea ce privește modul în care este configurat. Dar pentru acest articol îl vom simplifica.

Vom crea un lite-server fișier de configurare și editați-l pentru a modifica:

• portul HTTP
• directorul rădăcină web
• ce browser este lansat

Fișierul de configurare lite-server

fișier config pentru lite-server este: bs-config.json

De ce bs-config? Bine, lite-server este construit pe Browsersync care acceptă să aveți un fișier de configurare JSON sau JavaScript numit bs-config.

Adauga o bs-config.json fișierul la rădăcina proiectului dvs. Ar trebui să arate astfel:

Acest exemplu de fișier de configurare chiar duplică valorile implicite. Dar îl vom folosi ca bază pentru a explica cum să schimbăm unii dintre parametrii de configurare mai utili.

Specificarea portului HTTP

În mod implicit, lite-server utilizări port 3000. Dar dacă doriți să utilizați un alt port, îl puteți schimba cu ușurință.

De exemplu, să-l schimbăm pentru a utiliza portul 3001. În bs-config.json fișier, schimbați fișierul port sa arate asa:

"port": 3001,

Repornire lite-server folosind npm start.

lite-server lansează din nou browserul nostru implicit. Dar, de data aceasta URL-ul arată astfel:
http://localhost:3001/

Specificarea rădăcinii web

În mod implicit, lite-server servește pagini din directorul curent unde este instalat. Folosind Server element în bs-config.json, putem specifica o altă rădăcină web sau „Director de bază” la fel de lite-server îl numește.

Hai sa incercam:

1. În dumneavoastră lite proiect, creați un director numit: Test
2. Copiați-vă index.html la Test director
3. În bs-config.json, modificați elementul server pentru a arăta astfel:

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

Reporniți lite-server. Puteți vedea în rezultat că este:
Difuzarea fișierelor din: ./test

Lansarea browserului

Când pornește, lite-server lansează browserul nostru implicit pentru a afișa pagina web. Dar, poate, doriți ca proiectul dvs. să le susțină pe amândouă IE și Crom. Ei bine, putem spune lite-server pentru a lansa ambele.

Observați că intrarea browserului din fișierul de configurare este de fapt o matrice. Deci îi putem oferi o listă de șiruri.

Să ne distrăm puțin cu asta și să facem ca serverul lite să lanseze o grămadă de browsere. Pe computerul meu am instalat trei browsere: Chrome, IE și Firefox. A face lite-server lansează toate cele trei, doar schimb intrarea browserului în:

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

Și acum când alerg npm start Vad asta:

Pentru că hei! Nu poți avea niciodată de asemenea se deschid multe browsere.

www-lite-server: Instalați o dată și folosiți-l oriunde

Deoarece putem configura serverul Director de bază în a noastră bs-config.json, putem instala de fapt lite-server într-un singur loc și îndreptați-l către orice alt proiect.

Am creat un proiect simplu numit www-lite-server pentru tine asta face exact asta. Îl puteți folosi astfel:

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

Acest lucru va servi localului index.html, care arată astfel:

Prin modificarea baseDir intrare în bs-config.json, poti avea www-lite-server difuzați pagini web pentru oricare dintre proiectele dvs. De exemplu, dacă aveți un proiect în:
C: dev my-project
doar schimbă-ți bs-config.json să arăți cam așa:

{  "port": 3000,  "server": {    "baseDir": "C:devmy-project"  }}

Apoi utilizați npm start pentru a începe să difuzați pagini web.

Câteva note tehnice

lite-server este doar un înveliș în jur Broswersync. De fapt, Browsersync este cel care face cea mai mare parte a „greutății grele”. In orice caz, Aplicații cu o singură pagină utilizează de obicei rute pe care Browsersync nu le gestionează. Pentru mai multe informații, consultați De ce secțiunea pe GitHub README pentru serverul lite.

Resurse

Urmăriți-l pe John Papa pe Medium: https://medium.com/@John_Papa

Vă rugăm să stillați serverul lite pe GitHub: https://github.com/johnpapa/lite-server

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

Browsersync: https://www.browsersync.io/