Setting up open-wc on Windows 10

To set up Open Web Components, or open-wc, on your Windows 10 machine, we will complete the following steps:

1. Install the latest version of Node LTS and NPM
2. Install Yarn
3. Set up open-wc

Note: To perform the following steps, please be sure to have administrative privileges on your machine and access to the internet.

Node and NPM

Node.js and its package manager, known as Node Package Manager (npm) can be installed from this link. Be sure to choose the LTS version when selecting which build of Node to download, and follow the installation prompts that appear upon successful download of the Node installer.

During the installation process, you may be asked to grant certain permissions or accept agreements. You must do so to properly utilize Node.

NPM will automatically install with Node, and you can verify that both of these programs are up-to-date by opening Windows PowerShell and typing the following:

• To determine Node's version: node -v
• To determine npm's version: npm -v

Yarn

Yarn, an alternative version of the aforementioned npm, can be installed from the command line using the following steps:

1. Open Windows PowerShell.
2. Type npm install -g yarn and press Enter.

If you receive a permissions-related error upon entering this command, your account may not have administrative permissions. To circumvent this, attach sudo to the beginning of your command. In this case, the command would be sudo npm install -g yarn.

1. Optional: To verify the latest version of yarn has been installed, you can enter the command yarn -v.

Open-wc

Now that we have our dependencies installed, we can set up open-wc!

Before taking these steps, be sure to navigate to the directory in which you would like to do so.

In PowerShell, this can be done using the cd command, followed by your desired directory path.

Once you are in the folder that will contain your web component, you can utilize the following commands in PowerShell to create your component:

1. npm init @open-wc
2. Select "Scaffold a new project" from the options that appear.
3. Choose "Web Component" from the new list of options.
4. A list of three tooling options (Linting, Testing, and Demoing) will appear. Enable all three.
5. Select "no" when asked if you are using Typescript.
6. Give your project a name (using lowercase only).
7. Select "Yes" to the following prompts: "Write this file structure to a disk" and "Using yarn."

Upon the completion of these steps, your web component is complete!

You can verify this by using cd followed by your project's name to view the directory entry of your project.