Hvordan du kan bruge lite-server til en simpel udviklings-webserver

Hvis du har brug for en let og let webserver bare for at udvikle noget, er lite-server et fremragende valg.

I denne artikel vil jeg:

  1. Forklar kort hvad og hvorfor ved lite-server .
  2. Vis dig hvordan du opretter en simpel webapplikation og serverer den med lite-server .
  3. Forklar nogle enkle lite-server konfigurationer .
  4. Endelig, hvis du bare vil installere lite-server en gang og bruge den overalt , skal du kigge på mit projekt www-lite-server i GitHub.

Selvom dette er skrevet som en introduktionsartikel, forventer jeg, at:

  • Du ved lidt om kommandoprompten, såsom at oprette og skifte mapper.
  • Du har npm installeret og forstår, hvordan du bruger det til at installere pakker.
  • Du ved hvordan man opretter enkle websider ved hjælp af HTML.

Hvad er lite-server?

lite-server er en let udviklingswebserver med understøttelse af SPA'er (Single Page Apps) . Faktisk er det lidt mere teknisk end det. Men til vores formål er det godt nok.

lite-server blev oprettet af John Papa. Du skal følge ham og læse alle hans ting, for han er en ægte helt fra open source-samfundet !

John oprettede lite-server, fordi han ønskede en enkel webserver, som han kunne bruge til at teste implementering af enkelt-sideapplikationer, der udnytter URL-ruter. Måske bruger du ikke JavaScript GUI-rammer som Angular, React og Vue.js endnu. Men ved, at når du gør det, vil lite-server stadig være der for dig.

Så lad os drage fordel af Johns arbejde ved faktisk ...

Brug af lite-server i et webprojekt

Først opretter vi et lille webprojekt med et simpelt index.html . Vi installerer lite-server . Derefter bruger vi lite-server til at betjene vores webside.

Opret et projekt

Kør ved din kommandoprompt:

mkdir litecd lite

Dette opretter en ny mappe kaldet lite og gør det til vores arbejdsmappe.

I vores lite- mappe skal du tilføje en index.html- fil, der ser sådan ud:

Installer lite-server

Kør ved kommandoprompten i din lite- mappe:

npm init -y

Vi bruger npm til at initialisere et tomt projekt. Det -yfortæller, at det bare skal bruge standardindstillingerne til alle parametre.

For at tilføje lite-server til vores projekt kan vi køre:

npm install --save-dev lite-server

Dette installerer lite-serverpakken og føjer den til devDependencies i vores projekts package.json- fil.

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

Du kan også se på mappen node_modules og se, at lite-server og dens afhængigheder alle er installeret der.

Kør lite-server

Rediger scripts- objektet i din package.json- fil . Udskift indholdet med en post kaldet der kører lite-server , som denne:start

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

Så nu skal din package.json- fil se sådan ud:

For at køre lite-server og tjene din index.html webside skal du køre:

npm start

Bemærk, at lite-server starter din standardbrowser og viser dit index.html :

Desuden er lite-server bygget på Browsersync. Så når vi opdaterer vores index.html , opdateres lite-server automatisk. Lad os prøve det!

I dit index.html, lige før <; a> -tagget, skal du tilføje et overskriftstag til siden:

lite-server

Gem din fil, og se din browseropdatering automatisk magisk !

Nogle enkle konfigurationer

lite-server understøtter en masse fleksibilitet med hensyn til, hvordan den er konfigureret. Men for denne artikel vil vi holde det simpelt.

Vi opretter en lite-server konfigurationsfil og redigerer den for at ændre:

  • HTTP-porten
  • web-rodmappen
  • hvilken browser bliver lanceret

Lite-serverens konfigurationsfil

Den konfigurationsfil for lite-serveren er: bs-config.json

Hvorfor bs-config ? Nå, lite-server er bygget på Browsersync, som understøtter at have en JSON- eller JavaScript-konfigurationsfil med navnet bs-config .

Føj en bs-config.json- fil til roden af ​​dit projekt. Det skal se sådan ud:

Dette eksempelkonfigurationsfil duplikerer egentlig bare standardværdierne. Men vi bruger det som grundlag for at forklare, hvordan man ændrer nogle af de mere nyttige konfigurationsparametre.

Angivelse af HTTP-port

Som standard bruger lite-server port 3000 . Men hvis du gerne vil bruge en anden port, kan du nemt ændre den.

Lad os f.eks. Skifte det til at bruge port 3001. I din bs-config.json- fil skal du ændre porten for at se sådan ud:

"port": 3001,

Genstart lite-server ved hjælp af npm start.

lite-server lancerer vores standardbrowser igen. Men denne gang ser URL'en sådan ud:

//localhost:3001/

Specificering af webroden

Som standard serverer lite-server sider fra den aktuelle mappe, hvor den er installeret. Brug af serveren element i bs-config.json, kan vi angive en anden web-rod eller ”basismappen” som lite-server kalder det.

Lad os prøve det:

  1. I dit lite- projekt skal du oprette en mappe kaldet: test
  2. Kopier din index.html til testen biblioteket
  3. I bs-config.json skal du ændre serverelementet for at se sådan ud:
"server": { "baseDir": "./test"}

Genstart lite-server. Du kan se i output, at det er:

Visning af filer fra: ./test

Start af browseren

Når det starter, starter lite-server vores standardbrowser til at vise websiden. Men måske vil du have, at dit projekt understøtter både IE og Chrome . Nå, vi kan fortælle lite-server at starte begge dele.

Bemærk, at browserindgangen i konfigurationsfilen faktisk er en matrix. Så vi kan give den en liste over strenge.

Lad os have det sjovt med dette og få lite-server til at starte en masse browsere. På min maskine har jeg installeret tre browsere: Chrome, IE og Firefox. For at få lite-server til at starte alle tre ændrer jeg bare browserindgangen til:

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

Og nu når jeg løber, npm startser jeg dette:

Fordi hej! Du kan aldrig have for mange browsere åbne.

www-lite-server: Installer en gang, og brug den hvor som helst

Da vi kan konfigurere serverens Base Directory i vores bs-config.json , kan vi faktisk installere lite-server ét sted og pege på ethvert andet projekt.

Jeg har oprettet et simpelt projekt kaldet www-lite-server til dig, der gør netop det. Du kan bruge det på denne måde:

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

Dette tjener det lokale index.html, som ser sådan ud:

Ved at ændre baseDir- posten i bs-config.json kan du få www-lite-server til at betjene websider til ethvert af dine projekter. For eksempel, hvis du har et projekt i:

C: \ dev \ mit-projekt

bare skift din bs-config.json til at se sådan ud:

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

Brug derefter npm starttil at starte visning af websider.

Nogle tekniske bemærkninger

lite-server er bare en indpakning omkring Broswersync. Faktisk er det Browsersync, der gør det meste af "tunge løft". Men enkelt side Apps bruger typisk ruter, som Browsersync ikke håndtere. For mere information, se sektionen Hvorfor på lite-serveren GitHub README.

Ressourcer

Følg John Papa på Medium: //medium.com/@John_Papa

Star stjerne lite-server på GitHub: //github.com/johnpapa/lite-server

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

Browsersync: //www.browsersync.io/