Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=60aece2f-ec9f-43a0-90f0-3511e23f8ebf

Cómo previsualizar en tiempo real una web con HTTPS en VS Code

Si haces desarrollo front-end en Visual Studio Code y quieres disponer de un previsualizador automático para poder ver tus cambios de código aplicados en vivo en un navegador, en este vídeo te explico paso a paso cómo hacerlo. Además conseguiremos que funcione también por https de manera local. Y todo ello gratis, sin pagar certificados.

¿Qué necesito para previsualizar en tiempo real una web que edito en VS Code?

En el funcionamiento por defecto de VS Code, si quieres ver cómo está quedando una página web que estás editando tienes que ir al archivo y hacer doble clic para abrirlo en un navegador.

Después, cada vez que modifiques el código, tienes que volver al navegador y refrescar la página para ver los cambios aplicados. Vamos, lo que se dice un engorro.

Así que vamos a instalar una extensión para VS Code que se llama Live Server, la cual al iniciarla nos abrirá por defecto una ventana de navegador con el archivo que estamos editando y se encargará de refrescar automáticamente el navegador cada vez que modifiquemos el código en VS Code.

Poner el previsualizador dentro de Visual Studio Code

Pero no acaba aquí, además podemos abrir el navegador dentro de VS Code gracias al comando "Simple Browser". Para ello, desde la paleta de comandos (Ctrl+Mayúsculas+P) buscamos "Simple Browser" y le indicamos la ruta y puerto donde se está ejecutando Live Server. Con esto tendremos el navegador ejecutándose en su propia pestaña, y por lo tanto, lo podremos colocar donde queramos dentro de la ventana de VS Code. Para ello, prueba a arrastrar la pestaña hacia cualquier punto de la pantalla y suelta cuando se "ilumine" la zona de la pantalla que prefieras..

Por otro lado, Live Server también te permite muchas opciones de configuración desde File > Preferences > Settings dentro del apartado de "Extensions". Entre las posibilidades más prácticas podemos definir un navegador específico a usar, desactivar notificaciones repetitivas o elegir si queremos usar un puerto específico o aleatorio.

Usar un puerto aleatorio es especialmente interesante si vamos a tener varias instancias de VS Code funcionando a la vez, ya que si todas usan el mismo puerto entrarán en conflicto.

En el vídeo te explico todos estos ajustes (y más) en detalle para que no te quedes con dudas. Por cierto, estas configuraciones no solo las podemos hacer a nivel de aplicación, sino que también las podemos aplicar a nivel de proyecto a través de la configuración de "Worksapces" o "Espacios de trabajo".

Usar certificados HTTPS de manera local

Con Live Server la conexión local es http pero quizá necesitas probar en local una aplicación para conectarte a una API que te exige https. En ese caso también te explico en el vídeo una solución para usar certificados https en local.

Ojo, son certificados solo para uso local en tareas de desarrollo. No son certificados reales para usar en internet.

Para ello nos descargaremos la utilidad MKCert, lo instalaremos a través de la línea de comando y crearemos un certificado raíz con el que certificaremos todos los dominios que necesitemos (por defecto tienen una validez de 10 años desde el momento de la creación). En el vídeo está detallado paso a paso para que lo puedas seguir sin problema.

Con todo esto hemos habilitado un servidor web local en nuestra máquina que además nos muestra los cambios en tiempo real que estamos haciendo en nuestro desarrollo front-end y que además funciona con https para poder probar bien cualquier característica en cualquier navegador aunque necesite seguridad.

De esta manera podemos tener un entorno de desarrollo para front-end con Visual Studio code en un periquete que nos va a facilitar mucho la vida a la hora de trabajar o aprender.

José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Desarrollo Web | Herramientas

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.