Guías Técnicas

Instalación y Configuración de Svelte

Requisitos previos

Asegúrate de tener configurado tu entorno de desarrollo con los siguientes requisitos:

  1. Node.js: Necesario para gestionar paquetes y ejecutar scripts. Descárgalo desde nodejs.org (versión LTS recomendada).
  2. npm o yarn: npm se incluye con Node.js. Si prefieres Yarn, instálalo globalmente con:
bash 
npm install -g yarn

Verifica la instalación ejecutando:

bash 
node -v
npm -v

Crear tu primer proyecto con Svelte 5

Sigue estos pasos para configurar tu primer proyecto:

1Abre tu terminal y dirígete al directorio donde deseas crear tu proyecto.
2Ejecuta el siguiente comando para generar un proyecto Svelte:
bash 
npx sv create my-svelte-app
  • Sustituye my-svelte-app por el nombre de tu proyecto.
  • El asistente interactivo te permitirá elegir opciones como plantillas, configuración de TypeScript y herramientas adicionales como ESLint o Prettier.
3Una vez creado el proyecto, navega al directorio:
bash 
cd my-svelte-app
4Instala las dependencias necesarias:
bash 
npm install

Estructura del proyecto generada

Al crear un proyecto con Svelte 5, la estructura básica será la siguiente:

bash 
my-svelte-app/
├── node_modules/          # Dependencias instaladas
├── public/                # Archivos estáticos
│   └── favicon.png
├── src/                   # Código fuente principal
│   ├── lib/               # Componentes reutilizables
│   ├── routes/            # Vistas y rutas
│   ├── app.css            # Estilos globales
│   ├── app.html           # Plantilla HTML base
│   └── main.js            # Punto de entrada de la aplicación
├── .gitignore             # Archivos a excluir en Git
├── package.json           # Configuración del proyecto y scripts
└── svelte.config.js       # Configuración personalizada de Svelte

Descripción de carpetas clave:

  Estructura de carpetas en svelte

  • src/: Contiene el código fuente principal, incluyendo componentes y rutas.
  • public/: Archivos que se servirán directamente al navegador.
  • svelte.config.js: Archivo para personalizar configuraciones como adaptadores o herramientas adicionales.

Configuración del entorno de desarrollo

Para iniciar el servidor de desarrollo y trabajar en tiempo real, ejecuta:

bash 
npm run dev

Esto iniciará un servidor local, normalmente accesible en http://localhost:5173/. Abre esa URL en tu navegador para ver tu aplicación en acción.

Herramientas recomendadas

  Herramientas para Svelte

Para un entorno de desarrollo óptimo, considera instalar las siguientes herramientas:

  1. Extensión de Svelte para VS Code: Proporciona autocompletado, resaltado de sintaxis y otras funcionalidades útiles. Descárgala desde el Marketplace de VS Code.
  2. Prettier: Formatea automáticamente tu código.
  3. ESLint: Ayuda a mantener la calidad y consistencia del código.