Live Server – ekstenzija koja automatski refrešuje web stranicu
Da li vec koristiš Visual Studio Code Editor – trenutno jedan od najpopularnijih editora? Ako ga koristiš za razvijanje frontend aplikacija, ovaj post ti može biti veoma koristan.
Tokom našeg frontend kursa, u nekom trenutku kada već napredujemo imamo sve više promena u našem kodu i puno eksperimentišemo, samim tim svaki put kada napravimo neku promenu u našem kodu, mi te promene i sačuvamo. Otvaramo browser i refrešujemo stranicu kako bismo videli nove promene koje smo napravili i taj proces ponavljamo puno puta. Zato nam se jako dopada mogućnost da se, čim sačuvamo izmene koje smo napravili, naš browser automatski refrešuje.
U ovom postu detaljno ću ti objasniti i pokazati kako da i ti u svom Visual Studio Code editoru instaliraš i pokreneš Live Server ekstenziju.
Kako se instalira Live Server ekstenzija?
Ali pre toga instaliraj Visual Studio Code editor
Ukoliko već imaš instaliran Visual Studio Code Editor možeš preskočiti ovaj korak. Ako još uvek nemaš intaliran VS Code, možeš ga preuzeti sa njihovog zvaničnog sajta klikom na ovaj link. VS Code je potpuno besplatan editor i instalacija je veoma jednostavna.
Nakon instaliranja i pokretanja VS Code editora, sa leve strane će nam se prikazati ikonice kao na slici ispod. Poslednja ikonica označava ekstenzije.
Klikom na dugme “Extensions” otvorice nam se pretraživač (search bar), i tu ukucamo “Live Server”.
Prikazaće nam se nekoliko rezultata, ja sam odabrala Live Server koji je kreirao Ritwick Dey, i ona trenutno broj više od 13 miliona instalacija. A ocena je skoro svih 5 zvezdica.
Sada je još preostalo da instaliramo Live Server ekstenziju. To ćemo učiniti klikom na dugme Install. Sada je Live Server instaliran i globalno dostupan u editoru.
Kako se pokreće Live Server?
Kako bismo pokazali upotrebu Live Servera treba nam jedna kreirana HTML stranica. Prvo otvorimo folder u koji ćemo smestiti fajlove.
Novi fajl kreiramo klikom na file ikonicu koja se nalazi pored naziva otvorenog foldera, ili u Menu Bar-u klikom na File > New File.
Pokretanje Live Servera – I način
Najkraći način da pokrenemo Live Server je klikom na ikonicu “Go Live” koja se nalazi sa desne strane na statusnoj liniji. Ukoliko ne vidiš ovu ikonicu probaj da restartuješ Visual Studio Code editor.
Klikom na “Go Live” ikonicu server je pokrenut i automatski će se otvoriti onaj browser koji nam je namešten da se po defaultu otvara.
Zaustavljanje pokrenutog servera obavlja se klikom na ikonicu “Port: 5500”. Kao što je to prikazano na slici ispod.
Pokretanje Live Servera – II način
Drugi način da pokrenemo Live Server jeste tako što na ime fajla ili unutar HTML dokumenta (mora biti HTML fajl da bi se prikazale ove opcije) kliknemo desnim klikom i prikazaće nam se opcija Open With Live Server, kada kliknem na nju pokrenuće se server i potom otvoriti predefinisani browser.
Na sličan način ćemo zaustaviti Live Server tako što kliknemo na opciju Stop Live Server.
Hvala ti što si pročitao/la naš blog post. Prijavi se na naš newsletter i primaj besplatan edukativan sadržaj direktno u inbox!
Happy coding!
