In this article, we are going to explore the Open-WC CLI tool designed for building web components.
What is Open-WC? Well, Open-WC stands for open web components. It is a tool that “provides a set of defaults, recommendations and tools to help facilitate your web component project” as explained in their README.md file via Github. It comes with a cli tool that will help with building web components.
Let’s get started with Open-WC and how you would use it when building your own web components. Make sure that you have NPM installed. You will not be able to use Open-WC without it.
Go to your web component project via the terminal. Once in the correct location, type:
npm init @open-wc
You have now launched Open-WC. You will be prompted with some questions after launching. You will be asked:
what would you like to do today?
For starting a new project, you can respond with:
Scaffold a new project
It will then ask you:
What would you like to add?
A good option to choose would be:
Linting (eslint & prettier)
Linting is a tool used to check the code for programmatic and stylistic errors.
Next, it will ask:
Would like to use typescript?
Respond accordingly, for this example, we are going to respond with:
No
It will then ask:
What is the tag name of your application/web component?
For this, you can add any name that you would like. Make sure there are no spaces. You can use “-” in absence of a space.
For this example, we will respond with:
new-test
You will be asked:
Do you want to write this file structure to disk?
You can answer:
Yes
Then it will ask:
Do you want to install dependencies?
For this example, we will respond:
Yes, with NPM
There is another option to use yarn instead if you would like.
You can then import your component code. It is recommended to use lit-html and lit-element to build and render web components.
Once you have your web component fully built using lit-html or lit-element, you can then proceed to publish your web component.
To do this, you can use a registry like NPM. If you haven’t already, sign up for an account. You can then login via the terminal by typing:
npm login
.
Go to your project directory, then type the following:
npm init --scope=@npm-username
Where it says npm-username, replace that with your username for NPM. You will be promoted with some of the default choices. You can decide if they will work for your project or not. Simply type:
Yes
.
There is a README file that was generated by Open-WC, in this file, there are some areas that you should modify to reflect your specific project. Type the following into your terminal:
npm i @npm-username/your-project
Replace your-project with the name of your project or component. If you would like to use it in a project, you will need to use import. Here is what it will look like:
import ‘@npm-username/your-project/your-project.js’;
Make sure to save.
Next, we can publish the component to NPM. Simply type the following:
npm publish --access public
You can now see your web component on NPM. You can then install a copy locally if you would like to add it to a project.