DEV Community

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

Posted on • Updated on

Lit Element Simple Starter Kit with Vitejs+TypeScript

#lit #webdev #typescript #vite

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

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

pnpm i lit
pnpm i -D vite @types/node typescript
Enter fullscreen mode Exit fullscreen mode

⚡️ 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({});
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 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
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.
    "useDefineForClassFields": false
}
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 pnpm dev

$ pnpm 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 😃

Get it on npmjs.com

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

Are you disk saver? 😏 use pnpm

pnpm dlx create-lit my-app
Enter fullscreen mode Exit fullscreen mode

Github

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

Top comments (6)

Collapse
 
andyxmas profile image
andyxmas •

thanks - found this really helpful.

I had to set useDefineForClassFields to false in my tsconfig.json to get this working. reference: lit.dev/docs/components/properties...

Collapse
 
mirmayne profile image
Daveyon Mayne 😻 •

This one worked on first try except I had to change useDefineForClassFields to false like what was said in the comments.

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 •

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 •

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

Read next

mattlewandowski93 profile image

Planning Poker Jira integration

Matt Lewandowski -

olatunjiayodel9 profile image

To create a new Node.js project and work with dependencies, you'll need to follow these steps

Olatunji Ayodele Abidemi -

spiff profile image

Calculator with GUI Using Python Tkinter

Ebikara Dandeson Spiff -

akbarnafisa profile image

Setup NGINX

Akbar Nafisa -