DEV Community

Kathryn Simpson
Kathryn Simpson

Posted on • Updated on

Installing open-wc on Mac

Introduction
When installing open-wc on Mac, there are a few software installs that need to be done. The software that we will be installing are NodeJS, yarn, and the open-wc boilerplate.

Installing NodeJS
To install NodeJS just click here. Follow the instructions of the install, and since NodeJS comes with npm we do not have to install it separately. To double-check that both were installed currently you can type in node -v and npm -v into your terminal.

Installing Yarn
First, start by opening your terminal and typing npm install -g yarn. If there is a permissions error when you are trying to install yarn then you may need to type sudo npm install -g yarn instead.

Open-wc boilerplate
To finish out we are going to run a test project of hello-world. So, in your terminal, you are going to navigate to the folder you want to keep the folder in by using cd. For example, if I wanted to use my edtechjoker folder that is in my git folder which is located in my documents folder I would type cd Documents and enter it then cd git enter, and finally cd edtechjoker enter. Once you are in the folder you want you will run this command npm init @open-wc. As long as your installs are all working you should be able to scaffold a new project by using your enter key. You will then want to select web component with your return key. After that, you should be able to select all three tooling options of linting, testing, and demoing by using your space bar. Next, you will want to select no for using typescript and then set the name as hello-world with no caps or it will throw a fit. Finally, select yes to write the file structure to disk and yes with yarn to finalize the install. If the install was successful you should get a message that says it is set up.

Run Project
Just simply type cd hello-world and then npm run start.

Top comments (0)