Tres métodos de vista previa del sitio local en 60 segundos

Aquí hay tres formas de configurar vistas previas de sitios web locales, ¡en 60 segundos! Primero, veremos los prepros. Luego usaremos BrowserSync con Gulp. Por último, veremos el XAMPP. Hecho.

Tres métodos de vista previa del sitio local

1. Prepros

Instala y ejecuta la aplicación prepros para tu sistema operativo. Arrastre su carpeta de proyecto de sitio estático en la interfaz. Haga clic derecho en el nombre del proyecto y elija Abrir vista previa.

2. BrowserSync

En la carpeta de su proyecto ejecute npm init, a continuación, instale BrowserSync y Gulp con sudo npm install gulp browser-sync -save-dev. Haga un gulpfile.js con el código correcto (descargue los archivos de origen para obtener ayuda para hacer esto). correr Sencilla sincronización de navegador.

3. XAMPP

Para proyectos que usan PHP, instale XAMPP para su sistema operativo. Coloque “yourprojectfolder” dentro de la carpeta “htdocs” de XAMPP, luego ejecute XAMPP e inicie los servicios Apache y MySQL.

En un navegador vaya a localhost / yourprojectfolder. Eso es!

Recursos utiles

Obtenga más información sobre cómo ejecutar sitios web localmente en Envato Tuts+.

  • Una introducción rápida a BrowserSync tutorial
  • La línea de comandos para el diseño web: tutorial de Live Reload & BrowserSync
  • Sudo explicado
  • Archivos fuente para este tutorial