How To: Open WC on macOS

Hello! Today will be a blog post on how to instal and set up the appropriate tools to be able to use web components on macOS.

NodeJS

The first step will be to install nodeJS LTS for more stability at the link here: https://nodejs.org/en/. All this download takes is a simple file and you are good to go.

Homebrew

installing home-brew will make the rest of this process and future downloads much faster due to avoiding sudo access that could possibly come with making installations through npm. First, enter this into your terminal window: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Follow the instructions on the terminal window and wait till installation is done. Note This installation will require sudo access so make sure you know your password.

Yarn

Now installing yarn with node is simple, just type: brew install yarn, into your terminal window.

Git

Also now is a good time to install Git while everything else is installing. Go to your terminal window and type: brew install git.

Creating a Directory

Create a directory however you want on your machine, either through the command Lind or just the desktop. I made a new folder through the desktop by right clicking, then hitting new folder and naming it git. From there I created a new folder inside of it named edtechjoker, but you can name it whatever you want.

Web Component

Now it is time to create your first web component.

1. go to terminal window and type: npm init @open-wc
2. Hit enter to select scaffold a new project
3. Hit enter to select Web Component
4. Hit A to select all then hit enter
5. Hit enter to select no to typescript
6. Type in "hello-world" no capital or spaces as the name of the web component.
7. Hit enter to select yes to writing to disk
8. Hit enter to install dependencies with yarn
9. After it is done building the web component, type in "cd hello-world"
10. Type in "npm run start"

Congratulations! you have just built your first web component!