Boilerplate de Vite

Que debemos recodar

1. Todas las configuraciones las podemos realizar en el archivo vite.config.js
2. El punto de acceso por defecto es index.html pero podemos cambiar para que sea un .html, .js, .ts
3. En el archivo punto package.json tenemos los scripts iniciales del proyecto

• $npm run dev Levanta el servidor en desarrollo
• $npm run build Genera la carpeta /dist donde están los archivos para prod
• $npm run preview Levanta un servidor que nos permite ver el proyecto generado en /dist

1. Cuando vemos el proyecto renderizado en el navegador podemos observar que agrega un parametro que indica en timestamp que representa el momento cuando fue generado.

• <script type=”module” src=”/main.js?t=2345676344”></script>

  Esto tiene relación a que los archivos están en el cache el navegador y para renderizar los cambios necesitamos que sean refrescados.

• Para forzar el limpiado de la cache

  Importante resaltar que puede llegar a ser necesario FORZAR LIMPIAR LA CACHE PARA PODER VER LOS CAMBIOS

  Debemos seguir los pasos

  1. Click en los tres puntos superiores del navegador
  2. “Más herramientas”/”Herramientas del desarrollador”/”Application”/Storage”
  3. Marcar el check de “Cache”/”Cache storage”
  4. Click en “Clear site data”

  O también

  1. Click derecho
  2. ”Inspeccionar”/”Application”/Storage”
  3. Marcar el check de “Cache”/”Cache storage”
  4. Click en “Clear site data”

• Interesante ver el archivo style.css no es un archivo css normal. Cómo se hablo anteriormente Vite convierte todos los archivos en un archivo ECMAScript Module para usarlo de manera universal.

Me encanta haya dado un tip sobre como eliminar el cache, hay veces que uno se parte la cabeza y simplemente es el cache jajaja

Nota: actualmente la ultima version de vite trae un nuevo templete de javascript agregando dos archivos nuevos y una carpeta nueva.
El svg que se menciona en el curso se encuentra en la carpeta public
Esta carpeta public sirve para obtener cualquier archivo disponible a la hora de publicar a prod y por defecto esta carpeta esta siendo expuesta por vite

Muy buena informacion de como va funcionando Vite, no sabia lo del timestamp en la caché

Esta es la nueva estructura de carpetas

Pueden limpiar el caché yendo a inspeccionar, clic derecho al icono de actualizar y seleccionar, borrar caché.