A Brief Intro to Web Components

Required Software

Before starting with coding, one first needs the proper software! Required software will be VSCode and NodeJS. This introduction is primarily made for those with Windows devices, but many of the products mentioned are accessible by both MacOS and Linux devices to some capacity.

VSCode

VSCode is a popular code editor used by millions to interact with modern web and cloud applications. To install VSCode, follow the link here. For window users, you can download VSCode by clicking on the "Download for Windows" button provided on the home screen. For others, utilize the Download button in the top right corner!

Node.JS

Node.JS is a free open-source JavaScript runtime environment and is commonly used for web applications and web development. To install Node.JS, follow the link here and install the LTS (currently 16.13.2 as of this post). A picture of the screen to install for window users is included below. as a result of installing Node.JS, npm (the package manager for Node Javascript) should also be installed now. Click here to read more about npm.

Getting Started

You are finally ready to begin your project! First, create a secure folder in your file explorer to store your web component. Within your terminal, navigate to your folder. A screenshot is included below of how I myself navigated to my newly created folder, IST402, utilizing the "cd" command.

Once you have successfully navigated to your new folder, type the line "npm init @open-wc" as your next command. This will start Node.JS generator and prompt the user about the type of project to scaffold, as seen below.

The next series of questions asks about the , select "Scaffold New Project", and then select "Web Component". Using the spacebar, select "Linting", "Testing", and "Demoing". Do not select TypeScript. Give your web component a name (I named mine "hello-world-1", write the file structure to the disk by selecting "yes", and finally, "install dependencies with npm".