Tre forhåndsvisningsmetoder for lokalt nettsted på 60 sekunder

Her er tre måter å sette opp lokale forhåndsvisninger på 60 sekunder! Først skal vi se på Prepros. Da bruker vi BrowserSync med Gulp. Til slutt ser vi på XAMPP. Ferdig.

Tre lokale nettsted forhåndsvisning metoder

1. Prepros

Installer og kjør prepros-appen for operativsystemet. Dra den statiske prosjektprosjektmappen til grensesnittet. Høyreklikk på prosjektnavnet og velg Åpne forhåndsvisning.

2. BrowserSync

I prosjektmappen din kjører du npm init, installer deretter BrowserSync og Gulp with sudo npm installere gulp browser-sync-save-dev. Lag en gulpfile.js med riktig kode i den (last ned kildefilene for å få hjelp til å gjøre dette). Løpe Gulp-leser-synkronisering.

3. XAMPP

For prosjekter som bruker PHP, installer XAMPP for operativsystemet. Sett "yourprojectfolder" i XAMPPs "htdocs" -mappe, kjør deretter XAMPP og start Apache og MySQL-tjenestene.

I en nettleser, gå til localhost / yourprojectfolder. Det er det!

Nyttige ressurser

Lær mer om å kjøre nettsteder lokalt på Envato Tuts+.

  • En rask introduksjon til BrowserSync-opplæringen
  • Kommandolinjen for webdesign: Live Reload & BrowserSync opplæring
  • Sudo forklart
  • Kildefiler for denne opplæringen