s3-kennisbank

View the Project on GitHub HU-SD-S3/s3-kennisbank

Lit Web Components Project Setup

In this article we will setup a new boilerplate project that we use for the lit related tutorials in this knowledgebase.

Vite setup

Start with creating a vite project.

npm create vite@latest

Choose the following options:

Project name: lit-web-components

Framework: lit

Select a variant: JavaScript

Use rolldown-vite: No

Install with npm and start now? No

Open the new project in your code editor (in Visual Studio Code, select open Folder and open the newly created vanilla-web-components folder), in order to always have your terminal open in the project folder and not in the parent folder.

Install the dependencies:

npm install

Run the development server:

npm run dev

Open the link the dev server gives you in your web browser and you should see a page with a counter that can be increased by clicking on the button.

Cleanup

The Vite project comes with a counter example that we don’t need, so let’s clean it up.

Remove all files and folders of the /src folder.

Change the content of index.html to:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" type="image/svg+xml" href="./vite.svg" />

    <title>Lit Web Components</title>
  </head>
  <body></body>
</html>

Start the development server, if it isn’t already running, with:

npm run dev

Open the link the dev server gives you in your web browser. You should see a blank page with the title “Lit Web Components”.

Folders

Now let’s create some folders to keep our project organized.

Main Script

Create a file home-page.js inside the /src/view/pages folder. This will be the main script that will be loaded when the page is opened. We therefore need to import this script in the index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" type="image/svg+xml" href="./vite.svg" />

    <title>Lit Web Components</title>

    <script type="module" src="./src/view/pages/home-page.js"></script>
  </head>
  <body></body>
</html>

To check that the script is loaded correctly, add a console.log statement to the script:

console.log('Home Page loaded');

Open the link the dev server gives you in your web browser and open the developer tools of the browser (Ctrl+Shift+i | Cmd+Shift+i). You should see the message “Home Page loaded” in the console. Once this works, you can remove the console.log statement, to keep the console and your code clean.

Addons

Your project setup is now complete and you can start with the learning stories. But before you do that, I recommend you install some addons that can help you with your project.

Prettier

Prettier is a code formatter that can help you keep your code clean and consistent. You can add prettier to your project by running:

npm install --save-dev prettier

To configure prettier create a prettier.config.js file in the root of your project with the following content:

export const semi = true;
export const singleQuote = true;
export const trailingComma = 'all';
export const arrowParens = 'always';

ESLint

ESLint is a linter that can help you find and fix problems in your JavaScript code. In the beginning the number of errors and warnings might be overwhelming, but you can fix them one by one and the number of errors and warnings should decrease relatively quickly. Not all errors and warnings are relevant, but it’s a good idea to at least look at the documentation of the rule that is violated to understand why it is there and if it is relevant for your project. You can setup a configuration file for ESLint at the root of your project by running:

npm create @eslint/config@latest

You will then be asked some questions to setup the configuration file.

The first question: “What would you like to lint?” choose “JavaScript”.
On the question “How would you like to use ESLint?” choose “To check syntax and find problems”.
When asked “What type of modules does your project use?” choose “JavaScript modules (import/export)”.
And on the question “Which framework does your project use?” choose “None of these”.
For the next question “Does your project use TypeScript?” choose “No”.
And when asked “Where does your code run?” choose “Browser”.
You will then be informed that this configuration requires dependencies to be installed.
With the final question “Would you like to install them now?” where we choose “Yes”, with “npm” as the package manager we would like to use.

This will install the necessary dependencies and create a eslint.config.js file in the root of your project. Within this file we can add and/or remove rules as well as change the severity of a rules. Edit this file to look like this:

import js from "@eslint/js";
import globals from "globals";
import prettier from "eslint-config-prettier";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { 
    files: ["**/*.{js,mjs,cjs}"],
    plugins: { js, prettier },
    extends: ["js/all"],
    languageOptions: { globals: globals.browser },
    rules: {
      "no-console": "warn",
      "sort-keys": "off",
      "sort-imports": "off",
      "one-var": "off",
      "no-ternary": "off",
      "capitalized-comments": "off",
      "class-methods-use-this": "warn"
    },
   },
]);

This configuration file requires us to also install the eslint-prettier plugin. We can do this by running:

npm install --save-dev eslint-config-prettier

To run eslint on your project add the following script to your package.json file scripts section:

  "eslint": "eslint ."

Running this script with:

npm run eslint

will run eslint on all JavaScript files in the src folder and its subfolders.

Visual Studio Code Extensions

Visual Studio Code (VSC) is the recommended IDE for developers, especially for web development. VSC can be customized with extensions to fit your needs. You can install extensions by searching for them in the Extensions view (Ctrl+Shift+x | Cmd+Shift+x`). Here are some extensions that we recommend for the vanilla web components learning stories:

Sources

:house: Home | :arrow_up: Lit Web Components | Hello Lit :arrow_forward: