DEV Community

Cover image for Lit Simple Starter Kit con Vitejs+TypeScript
Herberth Obregón
Herberth Obregón

Posted on

Lit Simple Starter Kit con Vitejs+TypeScript

#lit #webdev #vite #spanish

lang: en | es

Al momento de iniciar con un nuevo framework o super clase como Lit Element, Vue, React o angular nos encontramos con "starter kits" que tienen demasiada información que en principio no nos es util o no sabemos para que sirven ciertos archivos.

Hoy en dia tenemos muchos archivos de configuración lo que hacer que el desarrollo Web cada dia se vuelva mas complejo pero a la vez mas robusto.

La idea de este post es intruducir a nuevo desarrolladores a Lit con un template bastante simple que le permita jugar con él en local y luego de jugar con él un rato y ya comprenda como funciona todo, pueda empezar a integrar mas configuraciones al proyecto.

Recomiendo encarecidamente usar typescript. Programar en javascript puro en el 2021 ya no es una opción. Personalmente lo considero una mala practica. Si aun no sabe typescript, te recomiendo aprenderlo y si no deseas usarlo simplemente omite la configuración de tsc y usa extensiones .js o .mjs

TLDR;

Requisitos

Conceptos clave

Yarn: Para este tutorial usaremos yarn ya que en lo personal resuelve mejor las dependencias, tiene mas funciones que npm no tiene yuso en otros proyectos. Los comandos son muy parecidos no te preocupes si aún no haz visto yarn.

lit-plugin Is a syntax highlighting, type checking and code completion for lit in VS Code.

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

🚀 Tutorial

Primero incializaremos el proyecto con yarn y dejamos los valores predeterminados que nos da tocando enter en todas.

yarn init
Enter fullscreen mode Exit fullscreen mode

⚙️ Instalación de dependencias

Luego de ello instalamos lit, vite y typescript los cuales será lo unico que necesitamos para iniciar. También necesitamos instalar @types/node unicamente para que VS code nos autocomplete algunas sugerencias en el editor.

yarn add lit
yarn add -D vite @types/node typescript
Enter fullscreen mode Exit fullscreen mode

⚡️ Configuración de Vitejs

Creamos un archivo que se llame vite.config.ts y dentro del él colocamos lo siguiente

import { defineConfig } from "vite";

export default defineConfig({});
Enter fullscreen mode Exit fullscreen mode

Por defecto vite usa nuestro index.html como entrypoint. Esta configuración la puedes cambiar deacuerdo a su documentación

⚔️ Configuracion de Typescript

La configuracion de TypeScrip es sencilla. Primero debemos inicializar typescript.

Como ya instalamos typescript con yarn, este permite ejecutar los binarios instalados en node_modules/.bin con yarn <bin> a diferencia de npm que tenemos que agregar la palabra npm run <bin>

yarn tsc --init
Enter fullscreen mode Exit fullscreen mode

Luego en el archivo de configuración debemos de buscar y cambiar/habilitar las siguientes opciones.

{
    "target": "es2020", // Specify ECMAScript target version
    "module": "es2020", //  Specify module code generation
    "moduleResolution": "node", // Specify module resolution strategy
    "experimentalDecorators": true //  Enables experimental support for ES7 decorators.
}
Enter fullscreen mode Exit fullscreen mode

💻 Crear nuestro Hello world

Creamos un archivo my-element.ts

import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("my-element")
export class MyElement extends LitElement {
    static styles = [
        css`
            :host {
                display: block;
            }
        `
    ];

    @property() name = "World";

    render() {
        return html`<h1>Hello, ${this.name}</h1>`;
    }
}
Enter fullscreen mode Exit fullscreen mode

Y ahora creamos un archivo index.html que importe por medio de type="module nuestro script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lit Simple Starter Kit</title>
</head>
<body>
    <my-element></my-element>
    <script type="module" src="/src/my-element.ts"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

💯 Ejecución de DevServer

Por último en nuestro package.json agregar un script dev para que nos sea mas fácil ejecutar nuestro servidor de desarrollo.

"scripts": {
    "dev": "vite"
}
Enter fullscreen mode Exit fullscreen mode

y ahora ejecutamos nuestro servidor de pruebas con yarn dev

$ yarn dev

vite v2.3.6 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose
Enter fullscreen mode Exit fullscreen mode

Ingresamos a https://localhost:3000/ y tendrémos nuestro hello world 😃

Github

Este ejemplo esa subido a github https://github.com/litelement-dev/lit-simple-starter-kit

Top comments (0)