Tutorial: Getting Started with Open-wc

haileyhahnnnn

haileyhahnnnn

Posted on August 30, 2021

Tutorial: Getting Started with Open-wc

Open-WC, also known as Open Web-components is vital to getting you started on web-programming! It utilizes various ideas on how to build web-components and is accessible for any one interested and ready to learn! Now, let's get started.

Tools Needed
Listed bellow are the tools needed to get started with Open-wc:

  1. A computer which you have full admin rights.
  2. Basic understanding of how to navigate through your device
  3. Basic understanding of how to run terminal commands

Installing VSCode
For this tutorial, we will start by downloading the IDE aka. VSCode. Some programmers prefer other IDE's which is also completely fine. VSCode is great because it is available for free downloads on Mac's and Window PC's,etc. If interested in VSCode, click this link([https://code.visualstudio.com/]) which brings you to the free download. Once you find the correct download for your computer(Windows/mac/etc), click download and install.

When you first open the application, it will ask for permission from the owner of the PC to access certain levels of your folder structure. Please grant access, otherwise the IDE cannot be used on your PC. Overall, this is usually a very easy process.

Installing NodeJS with NPM
Note: NodeJS comes with npm(node package manager) so you do not have to preform a separate installation for that.

Click here to install NodeJS: [https://nodejs.org/en/]
Once you reach the site, find the correct download for your PC and hit download. Follow the instructions to finish out the installation of NodeJS. Following the instructions are quite simple and easy. If you would like to check to make sure everything is downloaded correctly, you can proceed to your terminal and type node -v and npm-v. If you have installed everything correctly, you will receive the version number in response.

Installing Yarn
The next step is installing Yarn to your PC. To start off click this link: [https://yarnpkg.com/]
Once you have the website opened up, you must open up the terminal in your PC. Once your terminal is opened up, use the following command that utilizes the npm that we had previously installed.

npm install -global yarn

In the rare case that you run into permission error while installing Yarn, type sudo in front of your initial command line which would print as

sudo npm install -global yarn

Install Open-wc boilerplate
Congrats! You have made it to the final step of this tutorial. We are now ready to set up our open-wc with these last few steps:

  1. Chose a location on your local machine. I prefer to use a folder on my desktop. This is where you will install and access the boilerplates.
  2. Once you have created a folder, go back and open your terminal and navigate yourself to the correct level and folder.
  3. Run npm init @open-wc (use sudo if you get denied access)
  4. When the download begins you will be prompted with four questions. You want to select:
  5. Scaffold a new project
  6. Web Components, Linting
  7. No(for TypeScript)
  8. Type in LOWERCASE"hello-world" for your tag name
  9. yes for the disk
  10. yes for installing with yarn

Congrats, you have completed the download of open-wc! If you have any other questions/comments please leave them bellow! I hope you enjoy your web programming journey!

💖 💪 🙅 🚩
haileyhahnnnn
haileyhahnnnn

Posted on August 30, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related