Installing Dependencies
Tags: tutorial, javascript
Published: 2022-01-19 00:42:17



## Installing Debian (or any WSL)


To successfully download the required dependencies on Windows you must get some sort of Windows Subsystem for Linux or WSL. I decided to go with Debian but I'm sure others work just as well (such as Ubuntu). To install Debian simply go to the Microsoft store and click get.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en17db8kbp816moucn8w.png).  

## Installing Oh My Zsh!

Oh My Zsh! is a tool that makes terminal use so much easier through helpful themes and various plugins that could be added on for a variety of niche areas.  

Step 1: In PowerShell run // dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart 

Step 2: Open your WSL (Debian, Ubuntu, etc.) run these two separate commands // $ sudo apt-get update // and // sudo apt-get upgrade

Step 3: Install Zsh using this command // sudo apt-get install zsh

Step 4: After the installation is complete run // zsh

Step 5: Run // sudo apt-get install curl

Step 6: Finally install Oh My Zsh! // ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

## Installing NodeJS/Npm

NodeJS is used for executing Java Script outside of a web browser. Npm (which comes with NodeJS) is the defualt package manager for NodeJS. Simply choose your specs and click the download button and you have NodeJS and npm. To assure that the download was successful you can use the node -v command in your Debian Terminal to see the version of node that you are running.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pmma3lo5mxz4voa4j56.png)

## Installing Yarn

Yarn is another packaging system similar to npm. The utility of Yarn vs npm is argued throughout the community, but in my eyes since npm already comes with NodeJS then it seems a bit redundant. Nevertheless I will still teach you how to install it! In the Debian terminal simply run // sudo apt install yarn // To verify that the installation was successful run // yarn --version


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yty55w27dlyusxoi29o8.png)

## Launching open-wc

In your terminal run // npm init @open-wc

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlwoaltcjh86cw536i0f.png)

## Using open-wc 

Step 1: Hit spacebar with "scaffold a new project" highlighted

Step 2: Hit spacebar with "web component" highlighted

Step 3: Hit spacebar on "linting", "testing", and "demoing" using the up/down arrow keys to navigate between these items. 

Step 4: For our classes purpose we will select No to "Would you like to use typescript?"

Step 5: Name your component, I named it hello-world


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7ypgtnroweo03c6zl7r.png)

Step 6: Next all of the components being written to disk are displayed, press yes with spacebar. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7g0ltzhm1856re2qh0ym.png)

Step 7: It will then ask you to install dependencies with yarn or npm, hit spacebar hovering over your choice (yarn or npm). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6vagcdqtcqcoy9vxfot.png)

Step 8: To get into your new directory run // cd hello-world

Step 9: Finally run // npm run start // which will take you to your output text!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsdevzqvqwz22a1shbn8.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10zi27pvr4o6o1xa4ti6.png)