lit-simple-starter-kit v1.0.0
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
- Have
npm
oryarn
installed - Use VS code
- Have installed
lit-plugin
for VS Code. Download:lit-plugin by Rune Mehlsen
Key concepts
Yarn
: For this tutorial we will useyarn
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.
π 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
βοΈ 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
β‘οΈ Vitejs Settings
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
βοΈ Typescript Configuration
The TypeScrip configuration is simple. First we must initialize typescript
.
As we already installed typescript
withyarn
, 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
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.
}
π» 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 oftype = "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 yarn dev
$ yarn 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 π
Github
This example is uploaded to github https://github.com/litelement-dev/lit-simple-starter-kit
2 years ago