DEV Community

loading...
Cover image for Lit Simple Starter Kit with Vitejs+TypeScript

Lit Simple Starter Kit with Vitejs+TypeScript

Herberth Obregón
🧩 Web Components 💻 Typescript First 🐳 ☸️ K8s
Updated on ・3 min read

lang: es | en

When starting with a new framework or super class such as Lit Element, 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

Key concepts

Yarn: For this tutorial we will use yarn since personally it solves dependencies better, 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 yarn yet.

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 yarn and leave the default values ​​that it gives us by touching enter in all of them.

yarn init
Enter fullscreen mode Exit fullscreen mode

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

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

⚡️ Vitejs Settings

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

import { defineConfig } from "vite";

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

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 yarn, it allows us to run the binaries installed in node_modules/.bin with yarn <bin> unlike npm that we have to add npm run <bin>

yarn tsc --init
Enter fullscreen mode Exit fullscreen mode

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.
}
Enter fullscreen mode Exit fullscreen mode

💻 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>`;
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

💯 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"
}
Enter fullscreen mode Exit fullscreen mode

and now we run our test server with 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

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

npx

You can use this configuration with npx

npx create-lit my-app
cd my-app
npm run dev
Enter fullscreen mode Exit fullscreen mode

or if you use yarn

yarn create lit my-app
cd my-app
yarn dev
Enter fullscreen mode Exit fullscreen mode

Github

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

Discussion (4)

Collapse
rxliuli profile image
rxliuli

I created a JetBrains Plugin, you can directly use JetBrains IDE (such as WebStorm) to create a vite project
plugins.jetbrains.com/plugin/16897...

Collapse
herberthobregon profile image
Herberth Obregón Author

excellent work!

Collapse
seanmclem profile image
Seanmclem

How well does it handle re-renders if you use many nested children?

Collapse
herberthobregon profile image
Herberth Obregón Author

Basically with this configuration it reloads the page completely and starts from 0. but I have seen that it is possible to configure it so that it reloads only the module that it has modified but I still have to investigate this. I recently moved to Vite because webapck was too slow for a large project with more than 300 modules