What you will need
- Mac computer with administrative rights
- NodeJS/NPM
- 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.
Top comments (0)