eleventy-lab

Return to posts page

Basic Web Components with Open-wc, npm, node.js, and VScode

In order to start talking about web components and using open-wc, we have to introduce the building blocks that allow us to make that possible. To use open-wc, we have to install a few different dependencies that make it function. Before we install, let’s talk about a few of them. First is npm, which is a JavaScript Node package manager. It offers the largest selection of code packages in their software registry. This is typically concurrently used with Node.js. Node.js is a open-source JavaScript runtime environment where code can be executed outside of the web.

Both of these JavaScript add-ins make developers lives much easier. They are free to use and open-source that make it possible to share software with others and do things that were not possible before their development. They are very commonly used in web development with back-end tools to allow for runtime processes that can occur quicker and more efficient in the web. Now, let’s look at installing these JavaScript helpers.

Node.js

Go to this webpage and download the LTS version of nodejs for your device. Open the package in your downloads file folder and follow the directions to install.

npm

For npm, this can be done in the command line / terminal. Directions can be found here to download and install. After running that command, the commands node -v and npm -v can be used to check that the most current version is installed.

Yarn

Another software component we use for web develop is Yarn. We can install this in the command line with npm with the command npm install --global yarn. To check the version, use command yarn --version.

Visual Studio Code

VSCode can be downloaded and installed here. VSCode is a coding text editor for many different programming languages.

Build a Web Component

Now that we have installed those dependencies, we can make a web component with open-wc. Create a new folder/directory to house this project using either your file explorer or in the terminal with command mkdir. In your terminal, run the command npm init @open-wc. If this command was successful, you have installed everything correctly and you should see this!

When setting up the web component, the parameters I used were:

• Scaffold a new project
• Web component
• Linting, Testing, and Demoing
• No typescript
• Install with npm

From this, open-wc should open a new tab in your web browser showing this:

Congratulations you have successfully made a web component/element!

The github repository containing the code for the web element is here.