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

Contenido del curso

Introducción

Elementos básicos de Svelte

Configuración del proyecto

Desarrollo de la aplicación

Deployment

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:30

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

Curso de Svelte

Clase 15 de 26

Clase 15 / 26

Recursos

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.

marcelo tito copa

Hace 6 años

Hola... me sale este error. al momento de ejecutar npm run build

<ERROR in ./src/containers/App.svelte 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <style>
|   :global(body){
|     background-color:#676778;
 @ ./src/index.js 1:0-42 2:16-19
npm ERR! code ELIFECYCLE>

veo que hace referencia al archivo App.svelte y es el siguiente:

<style>
  :global(body){
    background-color:#676778;
    color:white;
  }
  .main {
    display: flex;
    justify-content: center;
  }
</style>

<div class="main">
  <h1>hola Pugstagram</h1>
</div>

tambien hace referencia a los cargadores y tengo lo siguiente:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',//aqui eligimos nuestro punto de entrada
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },//ahi adicionamos nuestro punto de salida verificar
  resolve: {
    extensions: ['*', '.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main'],

    alias: {
      svelte: path.resolve('node_modules', 'svelte')
    },//adicionamos el soporte para las expentsiones que utiliza svelte
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules\/(?!svelte)/,
        use: {
          loader: 'babel-loader',
        },
      },//creamo la regla para nuestros archivos js
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: 'svelte-loader'

      }, //utilizamos svelte -loader para trabajar con los archivos .svelte
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    })
  ]//utilizamos este plugin para adiciona el recurso complilado al documento html
};

y mi Package.json es el Siguiente:

{
  "name": "pugstagram",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "svelte": "^3.23.2"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/polyfill": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

Sorin Danila

Hace 5 años

Hola, tienes un fallo en el config de webpack, donde esta el loader de svelte. hay que escribirlo asi: use: {loader:'svelte-loader'}

Comentarios (41)41 comentarios

Walter Díaz

Matthew Dominick Rosell Felix

Mauricio Garibello Rodriguez

Jhon Carlos Colorado Angulo

Juan Jose Vega

Manuel Ojeda

Wilson Fernando Antury Torres

Wilson Orlando Capacho Carmona

Leticia Berardo

José Hidalgo

Robinson Vegas

Mauricio Perera

Rex Guzmán

Manuel Duarte

Cristofher Jumbo Jimenez

Juan Pablo Celiz

Digneli Mariet Dávila Ramones

Alexis Sebastian Ramos Caballero

Miguel Segura

Jahiker Rojas

Hace 2 años

Osmar Valero

Reynaldo Francisco Moreno Briceño

Juan Esteban Galvis

Edgardo Marcano

Silvio Catucuago

Uriel Mojica Mejía

Damián Vigo

Kenneth Angulo L

Hace 25 días

Edward Alarcón

Hace 5 meses

Diego Díaz Mendaña

Hace un año

Ruben Monrroy Condori

Introducción

Implementación de Aplicaciones Web con Svelte

Introducción a Svelte: Creación de Interfaces de Usuario Simples

Elementos básicos de Svelte

Primeros Pasos con Svelte: Instalación y Configuración Básica

Estilos CSS y Variables Globales en Componentes Svelte

Creación e Importación de Componentes en Svelt

Reactividad en Svelt: Creación de un Contador Interactivo

Componentes Svelte: Uso de Propiedades y Valores por Defecto

Condicionales y Dark Mode en Componentes Svelte

Estructuras de Control en Svelte: Iteración de Arreglos y Componentes

Eventos DOM y Binding de Datos en Svelte

Manejo del ciclo de vida de componentes en Svelte

Reactividad en Svelte: Uso de Stores para Componentes Compartidos

Configuración del proyecto

Creación de una Red Social con Svelte y Git

Configuración de Webpack para Proyectos Svelte

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

Desarrollo de la aplicación

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Estructuración de Headers y Sidebars en Aplicaciones Web

Estructura de Componente Timeline en Svelte para Pubstagram

Estilos CSS para Aplicaciones con Svelte

Conexión de Aplicaciones Svelte a APIs Públicas

Integración de API para Comentarios en Pubstragram

Creación de un Modal para Compartir en Facebook con Svelte

"Implementación de Likes y Stores en Svelte para Pubsstagram"

Deployment

Despliegue de Aplicaciones con Netlify y GitHub

Desarrollo de Aplicaciones Web con Svelte y PUXTgram

Programación en Python para Principiantes

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

Progreso del curso

Introducción

Elementos básicos de Svelte

Configuración del proyecto

Desarrollo de la aplicación

Deployment

Recursos

Recursos