Intro to Working With Web Components

If you have ever been on the internet or used a google, safari, or any kind of web browser, you have been exposed to JavaScript. I have been exposed to JavaScript for a long time and I am now finally learning how to start using it. I am excited to learn about what can be done in this area because it can lead to some incredible things being done and made. This post will be about how I started getting what I needed to create a web component.

Installing an IDE

The first thing I did was install an IDE to write JavaScript code in. There are many good options out there for IDE's such as Eclipse and Netbeans, but I chose VSCode because I have worked with all 3 and found it to be the easiest for me. Link for install

Installing NodeJS

Next, you will need to install NodeJS. Here is the Link to install. To check that NodeJS is installed properly as well as check what version you are using, just type in "node -v" into the command line.

Installing npm

After installing NodeJS, it will automatically install npm with it. Npm stands for Node Package Manager and is used globally to allow programmers to use different packages, share code, and many other useful things. To check that it is installed and see what version you have, type "npm -v" into the command line.

Creating an Open Web Components Project

Now that you have installed all of the required tools, create a folder where you will keep all of your files for the project. When you finish this, create a repository in Github then clone it into that folder you created earlier. To create the open-wc project, go to the command line and type in "npm init @open-wc", which should bring you to something that looks like this:

Once you get here, use the arrow and enter keys to select options that you are given. For this web component, I selected:

1. Scaffold a new project
2. Web Component
3. Select all 3 bubbles
4. No
5. Name of web component
6. Yes
7. Yes, with npm

When all of that is done, you will type "cd (name of project)" and "npm run start" then you should be redirected to a web page that looks like this

Finally! After all of that you are ready to start working with web components. If there is anything in there that was unclear, I recommend watching this video that helped me get through this.