IST 402: How To Install open-wc
Published: 2021-08-29 03:33:01

##Getting Started:
1. Make sure to have administrator rights on your computer
2. Know how to open terminal (Command + Spacebar, then search Terminal on Mac)

##Steps We Will Complete:
1. Installing NodeJS/NPM
2. Installing Yarn
3. Installing VSCode IDE
4. Running open-wc Boilerplate

##Installing NodeJS/NPM
Start with the NodeJS installation, using this link here: https://nodejs.org/en/. 
(Make sure to download the LTS version, as this will help install the correct package.) 
• Once the installation box opens, continue your way through the installer, just using the default install location.
• Once installed, we can move on to the next necessary package, as NPM will install along with Node.

##Installing Yarn
To install Yarn, we will now open our terminal.
• Paste the following command into the terminal: **npm install -g yarn**
• If errors occur, which could happen for a variety of reasons, mostly to do with administrator permissions on your device, do not panic. This error can be resolved by adding "sudo" to the beginning of the command, like this: **sudo npm install -g yarn**

##Installing VSCode IDE
Head over to: https://code.visualstudio.com/download and select your correct version.
• When the installation prompt appears, accept the agreement, install in the default location, and depending on whether you want the shortcut icon or not is up to you. 

##Running the open-wc BoilerPlate
Great! Now that you have made it this far, we have just a couple more actions to perform. Here is how the last steps will play out:
• Create a new folder on the desktop, we can call this: Documents.
• To access this folder correctly, use the terminal to access the folder's correct level using cd (directory name), or by right-clicking the folder on the desktop, you can select "New Terminal at Folder" to go into the right level of the folder
• Still in the terminal, at the correct level of the folder, run this command: **npm init @open-wc** (If errors occur again, you can add the "sudo" at the beginning of the command.) You should have the screen showing below:
    ![Open-wc Working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vdlihb8qu4ld5johpop.png)

• Using arrow keys and the return key, select "Scaffold a new project"
    ![Select Scaffold](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxvwtsc6n0962q5oluiu.png) 

• Select "Web Component"
    ![Web Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa24xzbd4kyjc5r8t2fh.png) 

• Use your spacebar to select all three options: "Linting, Testing, Demoing" and hit the return key
    ![Add all 3 options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1m3qkxqlv2i2h5773ip.png)
 
• Select "No" when asked for using TypeScript
    ![No TypeScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbfrg47h6kui6hxm25zd.png)

• Name your component: "hello-world" **Make sure this name is all lowercase!**
    ![Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt9uh7cvvjyl2qmiole4.png)

•Select "Yes" to write the file structure to disk
    ![Write File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7twznkxcxkonw5ug288u.png)

• Select "Yes, with yarn" to install all necessary dependencies required for this
    ![Install with Yarn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqtqozhjcrj9xcpp4cvk.png) 

• After some loading and if all is done correctly, it should look like the photo below!
    ![All set up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9q1ax97ghq7d1jnnwwi.png) 

You have now set up your Boilerplate for open-wc! If any questions, comments, or concerns about the whole installation process, feel free to leave anything below the post! Enjoy!