Installing open-wc first requires the installation of some additional tools and dependencies. In this post, I will cover Node.js/NPM, yarn, and the open-wc boilerplate.
Node.js
Download the latest LTS Build of Node.js here. Once the download is completed, the installer will have you go through a series of steps to complete agreements and enable necessary permissions. For now, stick with all of the default settings. NPM should also be installed with Node. To confirm that they were both installed, you can do node -v and npm -v in the terminal to check the version numbers.
yarn
Open your terminal to begin installing yarn. You can use the recently installed NPM to instal yarn with npm install --global yarn. If you encounter a permissions error, you may not have administrative permissions with your current user. If this is the case, use sudo npm install --global yarn.
Go to https://yarnpkg.com/ for more information about yarn.
open-wc boilerplate
Let's create a test project called hello-world to ensure everything is setup as expected. First, in your terminal, navigate to the folder where you want your project to be. Next, run the following command: npm init @open-wc. If your installations were successful, you should be given an option to Scaffold a new project. Use your return key to select this option. Next, use return to select Web Component and space bar to select all three tooling options: Linting, Testing, and Demoing. Select No for Typescript and set the name for you component as hello-world in all lowercase. Then, select Yes for writing this file structure to the disk and Yes, with yarn to complete the installation of all necessary dependencies. If everything was setup correctly, you should see the You're all set up now! message. To run it, do cd hello-world and npm run start.
Top comments (0)