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,yarnorpnpminstalled - Use VS code
- Have installed
lit-pluginfor 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
Top comments (6)
thanks - found this really helpful.
I had to set
useDefineForClassFieldstofalsein my tsconfig.json to get this working. reference: lit.dev/docs/components/properties...This one worked on first try except I had to change
useDefineForClassFieldstofalselike what was said in the comments.I created a JetBrains Plugin, you can directly use JetBrains IDE (such as WebStorm) to create a vite project
plugins.jetbrains.com/plugin/16897...
excellent work!
How well does it handle re-renders if you use many nested children?
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