Fastest way to generate a LitElement project in 3 minutes
Tags: javascript, litelement, webcomponents, polymer
Published: 2021-02-25 12:01:49

👋 Hi people! 

My name's Todd. I'm a software engineer with a passion for the web. This is my very first post on DEV 🎉  Any feedback is truly appreciated, even if you're a jerk about it 😉

**Today I want to show you the fastest *(and simplest)* way I've found to create a fully-tooled LitElement project from scratch. All with a single command.**

------

## TL;DR
For those of you just looking for a command to copy to get going,  [let me empower you to do so](#tldr):

```sh
$ npm init @open-wc
``` 

## LitElement Briefly

This forward-thinking project from the Polymer team makes it easy to create stupidly-fast, standards-based web components. It has a similar developer experience to most mainstream component frameworks like React, for example... 

LitElement itself is a simply a lightweight base class based upon native web component spec.

LitElement components can be used anywhere you can use HTML and JS! Sharing components is a breeze, across projects or even entire organizations! This portability can serve your team well for years to come. 

------

# Despite your current framework of choice, LitElement is definitely worth checking out!

------

## Motivation

While the [official documentation](https://lit-element.polymer-project.org/guide/start)  is great overall, their "getting started" section is not exactly straightforward. Their suggested path to "Hello World" seemed rather wishy-washy and task-heavy for a truly quick start. This, coupled with the fact that they present both starting paths for Typescript *and* Javascript in tandem, made for a less-than-straightforward first foray into LitElement. I appreciate simplicity when trying new tech.

I want you to avoid the hassle altogether, and start building cool stuff today: <br>
Enter  [Open-WC project generator](https://open-wc.org/guides/developing-components/getting-started/). 

<p>
<small>
<i>
NOTE: This generator *is* suggested by the official docs as an alternative start; however, at the time of this writing the link is currently broken 😲 
As a concerned and empowered citizen of the web, I've submitted a [PR](https://github.com/Polymer/lit-element/pull/1160) to correct this issue).
</i>
<small>
</p>

## The Generator

![hello-lit.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1614243807958/oQCtss88y.gif "The CLI in action")

First, open a terminal to your root development folder. Personally, I literally use a folder, `development` in my root (`~/`or home) directory (:

Next, run these magical incantations:

```s
$ npm init @open-wc
```

This will download everything needed from npm and launch an interactive CLI.

------

<b>"What's with the weird <code>npm init</code>?"</b>
This command makes use of an initializer.<br>
As mentioned in the npm docs:<br>
<blockquote>
<code>npm init initializer</code> can be used to set up a new or existing npm package.
</blockquote>
<p>In this case, before npm runs our command, it's transformed from <code>npm init @open-wc</code> into <code>npx @open-wc/create</code>. </p>
<p>This is uses npx to install our initializer, <code>@open-wc</code>, then npx will automatically execute the main bin.</p> 
<b>Pretty neat, eh?</b> I learned something new, and I hope you did too (:
</details>

------

After launching, It will ask a few questions:
1. What would you like to do today?
<pre>
    ✅ Scaffold a new project
    › Upgrade an existing project
</pre>
2. What would you like to scaffold?
<pre>
    ✅ Application
    › Component

</pre>
3. What would you like to add?
<pre>
    › Linting (es-lint & prettier)
    › Testing (web-test-runner)
    › Demoing (storybook)
    ✅ Building (rollup)
</pre>
4. Would you like to use typescript?
<pre>
    ✅ Yes
    › No
</pre>
5. Would you like to scaffold examples files for?
<pre>
   ✅ Building (rollup)
</pre>
6. What is the tag name of your application/web component?<pre>
hello-lit
</pre>
7. Do you want to write this file structure to disk?
<pre>
    ✅ Yes
    › No
</pre>
8. Do you want to install dependencies?
<pre>
    › No
    › Yes, with yarn
    ✅ Yes, with npm
</pre>

## Get Crackin'

Now you've got everything you need to make a web application with LitElement! Let's go ahead and start a live-reload dev server. Just `cd` into your project directory and then run `npm run start`:

```sh
$ cd hello-lit && npm run start
```

Open your project in your IDE of choice and get crackin'! If you're using VS Code like me, run this in a new terminal instance in your project's main directory:

```sh
$ code .
```

Congrats! You've now made a vanilla web-component-based app (stub) from scratch! Go forth and make something awesome!

Take a peek at [LitElement's official docs](https://lit-element.polymer-project.org/guide) for an in-depth look at the full (and fully awesome) API.

## Thanks

**Thanks for reading my very first post.** 🎉 I hope you've found it useful! Any feedback is truly appreciated, even if you're a jerk about it (;

<strong>If your interested in building an app with LitElement and Redux, show me some love and follow me for updates!<strong> 

## Additional Resources
- <b>LitElement</b> - https://lit-element.polymer-project.org/
- <b>Open WC Generator</b> - https://open-wc.org/guides/developing-components/getting-started/
- <b>LitElement Material Components</b> - https://github.com/material-components/material-components-web-components