CursosEmpresasBlogLiveConfPrecios

Contenido del curso

Elementos básicos de Svelte

Desarrollo de la aplicación

Tomar examen

Creación de un Proyecto Web con HTML5 y Svelte paso a paso

Resumen

Tener un entorno de desarrollo bien configurado es la base para construir cualquier aplicación web moderna. Aquí se recorre paso a paso la creación del archivo HTML de entrada, el componente principal en Svelte, el archivo index que conecta ambos, y la instalación de webpack dev server para visualizar cambios en tiempo real.

¿Cómo crear el archivo HTML de punto de entrada?

Dentro de la carpeta Public se crea un archivo llamado index.html. Este documento es el punto de entrada de la aplicación: cuando el proyecto se procese para producción, aquí se inyectarán los bundles generados por webpack [0:12].

La estructura sigue el estándar de HTML5:

  • Se declara el <!DOCTYPE html> para indicar que es un documento HTML5.
  • La etiqueta <html> recibe el atributo lang="es" para definir el idioma español.
  • Dentro del <head> se añaden dos metas fundamentales.

La primera meta define el charset UTF-8, que es el estándar de caracteres para Latinoamérica y garantiza que acentos y caracteres especiales se rendericen correctamente [1:08]. La segunda meta configura el viewport, indispensable para que la aplicación responda adecuadamente en dispositivos móviles, tablets y escritorio [1:30].

html <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

El valor width=device-width indica que el ancho se adapta al dispositivo, mientras que initial-scale=1.0 establece la escala inicial sin zoom. Finalmente se agrega un <title> con el nombre del proyecto: Bookstagram [2:08].

Dentro del <body> se coloca únicamente una etiqueta <main>, que funcionará como el contenedor donde Svelte insertará la aplicación completa [2:25].

¿Cómo estructurar el componente principal en Svelte?

Dentro de la carpeta src se crea una subcarpeta llamada Containers y dentro de ella el archivo App.svelte [3:02]. Esta convención de organización separa Containers, Components, Store, Actions y Reducers en carpetas independientes, lo que facilita la escalabilidad del proyecto.

El componente inicial es sencillo: un <div> con clase main que contiene un <h1> con el texto "Hello Bookstagram" [3:38]. También se añaden estilos globales utilizando la directiva :global aprendida en lecciones anteriores:

html

<div class="main"> <h1>Hello Bookstagram</h1> </div> <style> :global(body) { background-color: #1a1a2e; color: white; } </style>

¿Cómo conectar el componente con el HTML mediante el archivo index?

El archivo index.js importa el componente App desde la carpeta Containers y lo instancia pasándole un target [4:22]. El target utiliza document.querySelector('main') para localizar la etiqueta <main> del HTML y ahí inyectar la aplicación:

javascript import App from './Containers/App.svelte';

const app = new App({ target: document.querySelector('main') });

export default app;

Esta configuración es notablemente simple comparada con otros frameworks, y esa es una de las ventajas que ofrece Svelte: muy poco código para lograr resultados funcionales [4:35].

¿Cómo instalar y configurar webpack dev server?

Para crear un entorno de desarrollo local con recarga en tiempo real se instala webpack-dev-server como dependencia de desarrollo [5:10]:

bash npm install webpack-dev-server --save-dev

Después, en el archivo package.json se configuran dos scripts dentro de la sección scripts [5:30]:

  • build: compila el proyecto en modo producción con webpack --mode production.
  • start: levanta el servidor local con webpack-dev-server --open --mode development.

"scripts": { "build": "webpack --mode production", "start": "webpack-dev-server --open --mode development" }

El flag --open abre automáticamente el navegador al ejecutar el comando. Al correr npm run build, webpack genera la carpeta dist con los archivos compilados listos para producción [6:15]. Al ejecutar npm run start, se abre el navegador mostrando "Hello Bookstagram" con los estilos aplicados, confirmando que toda la cadena de configuración —webpack, Babel y Svelte— funciona correctamente [6:35].

Con el entorno personalizado listo y validado, el siguiente paso es construir todos los elementos visuales y funcionales de Bookstagram. ¿Qué parte de la configuración te resultó más interesante o desafiante? Comparte tu experiencia.