DEV Community: Herberth Obregón

Lit Element Simple Starter Kit with Vitejs+TypeScript

Herberth Obregón — Sat, 05 Jun 2021 18:51:25 +0000

lang: es | en

When starting with a new framework or super class such as Lit Element (lit.dev), Vue, React or angular, we find "starter kits" that have too much information that in principle is not useful or we do not know what certain files are for.

Today we have many configuration files which make Web development more complex but at the same time more robust.

The idea of this post is to introduce new developers to Lit with a fairly simple template that allows them to play with it locally and after playing with it for a while and you understand how everything works, you can start integrating more configurations to the project .

I highly recommend using typescript. Programming in pure javascript in 2021 is no longer an option. I personally consider it a bad practice. If you don't know typescript yet, I recommend you learn it and if you don't want to use it just skip the tsc setting and use .js or .mjs extensions

TLDR;

Requirements

Have npm,yarn or pnpm installed
Use VS code
Have installed lit-plugin for VS Code. Download: lit-plugin by Rune Mehlsen

Key concepts

Yarn, PNPM: For this tutorial we will use pnpm since personally it solves dependencies better than npm, it has more functions that npm does not have and is used in other projects. The commands are very similar, don't worry if you haven't seen pnpm yet. For save disk space you can use pnpm, this use hard disk links 🤯

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. Use esbulid a faster build package for the web are 10-100x faster than others.

🚀 Tutorial

First we will initialize the project with pnpm and leave the default values that it gives us by touching enter in all of them.

pnpm init

⚙️ Dependency installation

After that we install lit,vite and typescript which will be the only thing we need to start. We also need to install @types/node just for VS code to autocomplete some suggestions in the editor.

pnpm i lit
pnpm i -D vite @types/node typescript

⚡️ Vitejs Settings (optional)

We create a file called vite.config.ts and inside it we place the following

import { defineConfig } from "vite";

export default defineConfig({});

By default vite uses our index.html as entrypoint. You can change this configuration according to its documentation

It is extremely easier to configure than webpack or rollup, right? 😜

⚔️ Typescript Configuration

The TypeScript configuration is simple. First we must initialize typescript.

As we already installed typescript with pnpm, it allows us to run the binaries installed in node_modules/.bin with pnpm <bin> unlike npm that we have to add npm run <bin>

pnpm tsc --init

Then in the configuration file we must find and change / enable the following options.

{
    "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.
    "useDefineForClassFields": false
}

💻 Create our Hello world

We create a file 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>`;
    }
}

And now we create a file index.html that imports by means of type = "module our 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>

💯 Execution of DevServer

Finally in our package.json add a dev script to make it easier for us to run our development server.

"scripts": {
    "dev": "vite"
}

and now we run our test server with pnpm dev

$ pnpm dev

vite v2.3.6 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

We enter https://localhost:3000/ and we will have our hello world 😃

Get it on npmjs.com

You can use this configuration with npx

npx create-lit my-app
cd my-app
npm run dev

or if you use yarn

yarn create lit my-app
cd my-app
pnpm dev

Are you disk saver? 😏 use pnpm

pnpm dlx create-lit my-app

Github

This example is uploaded to github https://github.com/litelement-dev/lit-simple-starter-kit

Lit Simple Starter Kit con Vitejs+TypeScript

Herberth Obregón — Sat, 05 Jun 2021 18:48:34 +0000

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

Tener instalado npm o yarn
Usar VS code
Tener instalado lit-plugin para VS Code. Descarga: lit-plugin by Rune Mehlsen

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

⚙️ 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

⚡️ 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({});

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

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.
}

💻 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>`;
    }
}

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>

💯 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"
}

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

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