Folosesti Chrome? Ai deja un WebServer

Using Chrome Development Tools as a Local Web Server

Daniel Turcu

2 minute read

De multe ori avem nevoie de un server local cu functionalitati minime pentru a testa proiectele web sau mici aplicatii. Majoritatea developerilor deja utilizeaza Chrome Development Tools ca unealta de dezvoltare. Incepand cu versiunea 65 Chrome poate salva modificarile din browser direct in fisierele sursa.

Aceasta caracteristica (local override) poate fi utilizata pentru a creea un server web local.

O pagina web simpla

Vom crea o pagina care incarca resurse locale

Vom afisa o imagine din folderul assets.

/assets
    |____ low-poly.png
index.html

Fisierul index.html are urmatorul cod:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Local Web Server</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" />
  </head>

  <body>
      
  <div>
    <div class="d-flex justify-content-center">
      <div class="ml-4">
        <img src="/assets/low-poly.png" />
      </div>
    </div>
  </div>

  </body>
</html>

Acum incercam sa incarcam fisierul index.html in browser:

“Pagina web nu merge incarcata in web browser fara server”

Pentru a incarca acest site corect in browser, avem nevoie de un webserver. Nu este o simpla pagina HTML izolata, este un site static, care incarca si utilizeaza si alte fisiere locale; pentru ca asta sa functioneze este nevoie de un server web.

Website-ul static

Sa vedem cum putem configura unul folosind chiar Google Chrome:

Vom pune sursele site-ului intr-un folder cu numele poly.comm (nu vrem ca site-ul sa existe deja in internet)

“Website local folder”

“Website static content”

Configurarea Chrome Development Tools

Deschidem Developer Tools (F12, Ctrl + Shift + J pentru Linux/Windows sau Option + Command + J pentru Mac) apoi selectam tab-ul Sources si apoi meniul Overrides (posibil ascuns by default)

Chrome Configure overrides

Acum adaugam un director care sa permita overrides. Selectam directorul parinte al site-ului (poly). Raspundem afirmativ la acceptul de a permite acces la director.

“Chrome Development Tools Select Folder for Overrides”

Acum putem sa deschidem site-ul folosind adresa http://poly.comm. Si asta este tot ceea ce avem nevoie sa facem pentru a servi site-ul nostru cu ajutorul unui server web.

De data asta imaginea se incarca corect:

“Website Incarcat Corect”

Modificarea surselor din browser

Putem sa modificam fisierele si sa le si salvam chiar din Development Tools (Ctrl-S):

“Chrome Development Tools Save changes”

Concluzie

Daca vrem un server web local rapid aceasta este o solutie prin care evitam instalarea unui server web pe statia locala.

Daca vrem un nou site, adaugam un nou director sub directorul poly: mysecondwebsite.devv Aveti grija ca numele site-ului sa nu existe pe internet.

In plus vom putea sa persistam si modificarile operate in browser.

comments powered by Disqus