Before writing TaskFlow's first component you need to prepare the work environment: install the basic tools, create a project with a sensible structure, and check that everything works by serving a page in the browser. This lesson is purely practical and is designed for someone starting from scratch: by the end you will have a project folder ready, with the lit package installed, a development server running, and the editor configured to work comfortably with Lit templates.

1. Installing Node.js
2. Creating the project with Vite (Lit template)
3. Alternative: npm init @open-wc
4. Installing the lit package
5. Recommended folder structure
6. Serving the project locally
7. Useful editor extensions
8. JavaScript or TypeScript: this course's decision

Lit itself is a library that runs in the browser and does not need any special environment to work. However, for the modern development workflow — managing dependencies, running a development server with automatic reload, bundling the project — Node.js is used together with its package manager, npm.

Steps:

1. Download and install the LTS (Long Term Support) version of Node.js from nodejs.org. On Linux you can also use your distribution's package manager or a version manager like nvm.
2. Check the installation by opening a terminal and running:

You should see two version numbers. For this course, any version of Node.js 18 or higher is enough, since that is the minimum required by the modern tools in the ecosystem (Vite, Lit 3.x).

Vite is a development tool that is very popular for its almost instant startup and its hot reloading. It comes with official templates for several ecosystems, including Lit.

To create a new project called taskflow:

The wizard will create a taskflow folder with a sample project already configured to work with Lit. Next, go into the folder and install the dependencies:

And start the development server:

Vite will show a local URL (usually http://localhost:5173). When you open it in the browser you will see the sample component that comes with the template, with automatic reload every time you save a change to the code.

Note: the lit Vite template uses TypeScript by default. There is also an explicit lit-ts template, and if you prefer plain JavaScript, you can start from the vanilla template and add lit manually (this is explained in section 4). Later in this same lesson, we discuss how to choose between JavaScript and TypeScript to follow the course.

Another route, maintained by the Open Web Components community (a set of tools and recommendations specifically designed for Web Components, not just for Lit), is the @open-wc wizard:

This wizard interactively asks what you want to generate (an application, a component publishable as a package...), whether you want to use TypeScript, and whether you want to include linting, testing or demo tools. It is a somewhat more complete option aimed at those who are going to publish reusable components as independent packages, while the Vite template is more direct for starting an application as quickly as possible.

For the purposes of this course, either route is valid; the examples will assume a project structure created with Vite, as it is the most widespread and the simplest to get started with.

If you start from a blank template (for example, Vite's vanilla template) or you simply want to know what happens "under the hood," installing Lit manually is as simple as:

This adds lit to the project's package.json dependencies. From there, in any JavaScript or TypeScript file in the project you can import what you need:

No additional bundler configuration is needed: lit is distributed as standard ES modules, compatible with Vite and with any modern bundling tool.

A Lit project does not impose a specific folder structure — unlike some more opinionated frameworks — but it is worth adopting a clear organization from the start, especially because TaskFlow will grow with several components throughout the course. A recommended structure for this course is:

Key ideas behind this organization:

• Each component lives in its own file, with a name that matches the name of the HTML tag it defines (task-card.js defines <task-card>).
• The components/ folder groups together all of the application's Web Components, separate from the startup logic (main.js).
• As the course progresses, this structure will be expanded (for example, with a folder for reactive controllers or for tests), but the idea of "one component, one file" will be kept throughout the entire course.

During development, Lit components run directly in the browser, so a server that just serves the project's static files is enough. We have already seen that Vite offers this with npm run dev, but it is worth understanding exactly what that command does:

• It starts a local HTTP server (there is no need to configure Apache, Nginx or anything similar).
• It serves index.html and resolves ES modules (import ... from 'lit') on the fly, with no need to generate a bundle beforehand.
• It watches for changes in the project's files and automatically refreshes the browser (or even updates the specific module without reloading the whole page, thanks to "Hot Module Replacement").

To generate a version optimized for production (minified, with the modules bundled), Vite also offers:

The result is generated in a dist/ folder. The production bundling process, with more detail on optimization and publishing, is studied in the integration and deployment module; for now it is enough to know that this second command exists.

Working with Lit templates — blocks of HTML embedded inside JavaScript through the html function — is much more comfortable with proper editor support. If you use Visual Studio Code (the most common editor in the ecosystem), these are the recommended extensions:

lit-plugin internally relies on a tool called lit-analyzer, which also exists as a command-line tool and can be integrated into continuous integration to catch errors in templates (for example, misspelled attributes) before reaching production. We will come back to code quality tools in the testing and best practices module.

Lit is written in TypeScript and offers excellent integration with it (typed properties, template autocompletion, type-checked decorators). However, TypeScript is not required: Lit works just as well with plain JavaScript.

There are two common ways to declare a component class in Lit:

• With decorators (@customElement, @property, @state...): this is the most concise syntax and the one the official documentation uses by default. Decorators are a JavaScript proposal that, as of today, requires a build tool that supports them (TypeScript, or Babel with the corresponding plugin in JavaScript projects). Vite already comes with this capability configured in its Lit template.
• Without decorators, with static properties: an alternative form, fully equivalent in outcome, designed for plain JavaScript projects that do not want to depend on a build step with decorator support. It is more verbose but requires no additional configuration.

This course will use JavaScript, showing both variants (decorators and static properties) wherever it makes sense to compare them, so you can choose the one that best fits your own projects. This choice will first come up in detail in the next lesson, when building the first real component.

• Using an old version of Node.js: if npm create vite@latest fails with strange errors, the first thing to check is the installed Node.js version. Updating it usually solves the problem.
• Forgetting npm install after cloning or creating the project: without this step, the lit package (and the rest of the dependencies) will not be available and the project will not start.
• Mixing decorator syntax without the proper build configuration: if you copy examples with @customElement into a project that does not have decorator support configured, syntax errors will appear. The Vite template for Lit already comes ready for this; if you are starting from scratch, it is worth checking first.
• Confusing the development server with a production server: npm run dev is not meant to serve real traffic; for production you first generate the build and serve the resulting static content.

1. Install Node.js if you don't have it yet, and check the node and npm versions from the terminal.
2. Create a new project called taskflow using Vite's Lit template, install the dependencies, and start it in development mode. Check that you can open it in the browser.
3. Inside the newly created project, create the src/components/ folder and an empty task-card.js file inside it, following the folder structure recommended in this lesson.

1. The check is done with:

If both commands return a version number (for example v20.11.0 and 10.2.4), the installation is correct.

After the last command, the terminal will show a local URL (for example http://localhost:5173); opening it in the browser should show the Lit template's sample page.

On Windows, without touch available by default, it is enough to create the empty file from the code editor, saving it at that path.

In this lesson you have prepared all the groundwork needed to start programming: Node.js installed, a TaskFlow project created with Vite (or alternatively with @open-wc), the lit package available, a folder structure designed to grow, and an editor configured with specific support for Lit templates. You have also seen that this course will use JavaScript, alternating between decorator syntax and static properties as appropriate.

With the environment ready, in the next lesson you will stop configuring and start programming: you will create your first real Lit component and, with it, the first — fully static — version of <task-card>, the fundamental piece of TaskFlow.