Lit, from Google, is a simple way to start working with web components. In Part 1 of this series, I explain how we got to web components and why I cal

Getting Started with Web Components & Lit | Part 2

submited by

Style Pass

2022-07-01 20:30:08

Lit, from Google, is a simple way to start working with web components. In Part 1 of this series, I explain how we got to web components and why I call Lit the anti-framework for web applications. In this post, we’ll get Lit installed with VSCode and the Vite development server, then create a test app and show how it works.

If this is your first time doing local web development in Typescript (or the first time on this machine), you’ll need to install NPM, the Node Package Manager. A package is simply a folder with files in it that your application needs. Another term for this is dependency. NPM installs packages from the web and keeps track of which ones you have. To use a package, we import it into our code.

VSCode (or VS Code, or Visual Studio Code) is a modern IDE, an Integrated Development Environment — which is a fancy way of saying a text editor for code. We’ll use VSCode to organize our files and folders and write the files that make up the app.

Because it’s not a framework, Lit doesn’t come with any rules or recommendations on how to setup your files and folders. So I’ll make some for you! Best practices say that we need a root folder where your application will live. It’s only contents will be the index.html file that’s served-up to the browser and some configuration files. Everything else will live in separate folders, with each web component or Typescript module that we write in its own file.