Introduction to Web Components

Software to Install

Nodejs

• Nodejs is an open-source, cross-platform runtime environment that executes JavaScript code. It is recommended to install the recommended, not the latest version.

NPM

• When installing Nodejs, npm is also installed along with it. To check the versions of Node and npm, you can type node -v and npm -vinto the terminal.

Git

• Git is a version control system that lets you manage and keep track of source code history.

Yarn

• Yarn is a package manager for Nodejs that manages project dependencies. Type npm install --global yarn and yarn --version into the terminal.

Visual Studio Code

• VSC is a helpful coding environment to edit your project.

How to Start

Open-wc

• In the terminal or Git Bash, type in npm init @open-wc. This command is used to create new projects.
  
  (Intro) is a great walkthrough video that helped through each step of @open-wc.

• Once you get here, click enter on scaffold a new project and web component.

• You will then click tab for the 3 options including linting, testing, and demoing.

• It will then ask if you want typescript, click the up and down arrow to no.

• Next is the tag name of your web component. Type in hello-world.

• Next, it is going to ask if you want to write this file structure to disk. Click yes.

• You want to install with dependencies. Use up and down arrows to get to yes with yarn if the Yarn installation worked or yes with npm if it did not.

• Finally, it will say you are set up. All you need to do is run cd hello-world and npm run start.
  

• And here is your final product. Congratulations on your first web component!