DEV Community

Frank Palmeri
Frank Palmeri

Posted on • Updated on

Installing open - wc on Mac

What you will need

  1. Mac computer with administrative rights
  2. NodeJS/NPM
  3. VSCode IDE

Step-by-Step

Once you have downloaded and installed the correct versions of NodeJS (https://nodejs.org/en/) and the VSCode IDE (https://code.visualstudio.com/download) on your computer, create a folder on your desktop and name it something applicable to the projects you will be working on. For the sake of the tutorial, I will be naming it "projects". Once your folder is created, 'Ctrl' + click on it and select the setting "New terminal at folder" to access the terminal.

Once the terminal is open, enter the command:

npm install -g yarn

followed by

npm init @open-wc

If errors occur with either input, type "sudo" followed by the command that was displaying an error.

Example:

sudo npm install -g yarn

sudo npm init @open-wc

Once you are prompted with the screen that displays Open Web Components Recommendations:

Use the arrow key to navigate towards the option that says "Scaffold a new project"

Once you have selected it, you should then select "Web Component" to Scaffold

At the next prompt, use your spacebar to toggle each of the options Linting, Testing and Demoing using your arrow key to select each

When prompted if you would like to use typescript, select "No"

When asked what you would like to name your web component, input "hello-world" exactly

When asked if you would like to write the file structure to the disk, select "Yes"

When you are prompted with the option to install dependencies, select the option "Yes, with yarn"

If done correctly, your screen should display a message that says "You are all set up now!"

All you will need to do from there is run the command cd hello-world, followed by npm run start to launch your browser.

Discussion (0)