Uso de Live Server para Desarrollo Web en Visual Studio Code

Clase 6 de 13 • Curso de Configuración de Entorno de Desarrollo en macOS

Clase anteriorSiguiente clase

Resumen

¿Cómo empezar con Live Server en Visual Studio Code?

El uso de Live Server puede transformar tu flujo de trabajo al facilitar la visualización de cambios en tiempo real en tu navegador. La organización es clave para comenzar, por lo que te recomendamos crear una estructura de carpetas que te permita mantener todo en orden. Empieza creando una carpeta general llamada "proyectos" en tus documentos y, dentro de ella, una más específica para cada curso, como "curso prework". Esto te ayudará a gestionar el contenido de cada curso de forma eficiente.

¿Cómo crear un archivo HTML básico en Visual Studio Code?

El siguiente paso es abrir Visual Studio Code. Crea un nuevo archivo que contendrá tu código HTML. Guarda este archivo en la carpeta que creaste anteriormente como "demo_live_server.html". Aunque este curso no está enfocado en HTML, usaremos algunas etiquetas fundamentales.

  1. Crea el archivo con el siguiente inicio básico en HTML: 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Live Server</title>
</head>
<body>
    <p>El desarrollo web es divertido, ¿no?</p>
</body>
</html>
  2. Guarda el archivo usando command + S en macOS o Ctrl + S en Windows.

¿Cómo habilitar y usar Live Server?

Abrir tu proyecto en Live Server es sencillo y permite visualizar cambios al instante. Asegúrate de abrir la carpeta del proyecto en Visual Studio Code, no solo el archivo individual. Una vez dentro, abre el archivo HTML y haz clic en "Go Live" en la parte inferior derecha de Visual Studio Code.

  1. Cuando hagas clic en "Go Live", Live Server abrirá una ventana del navegador con tu archivo HTML renderizado.
  2. La dirección típica será http://127.0.0.1:5500/, donde 5500 es el puerto que utiliza por defecto.

¿Cómo realizar cambios dinámicos con Live Server?

Live Server detecta y refleja automáticamente los cambios que realices en tu archivo HTML. Esto significa que, cada vez que guardas el archivo, las modificaciones se aplican instantáneamente en el navegador.

  • Cambiar el título del documento: 
    <title>Demo Platzi</title>
  • Añadir más contenido en el body: 
     <body>
     <p>El desarrollo web es divertido, ¿no?</p>
     <p>Estoy aprendiendo en Platzi.</p>
 </body>

¿Por qué es recomendable probar en varios navegadores?

Es una buena práctica asegurarte de que tus desarrollos web se vean y funcionen correctamente en diferentes navegadores, como Google Chrome, Firefox, y Safari. Cada uno de ellos podría renderizar los contenidos de maneras distintas, así que probar en todos te ayudará a garantizar una experiencia de usuario homogénea y efectiva.