Getting Started:
- Make sure to have administrator rights on your computer
- Know how to open terminal (Command + Spacebar, then search Terminal on Mac)
Steps We Will Complete:
- Installing NodeJS/NPM
- Installing Yarn
- Installing VSCode IDE
- Running open-wc Boilerplate
Installing NodeJS/NPM
Start with the NodeJS installation, using this link here: https://nodejs.org/en/.
(Make sure to download the LTS version, as this will help install the correct package.)
• Once the installation box opens, continue your way through the installer, just using the default install location.
• Once installed, we can move on to the next necessary package, as NPM will install along with Node.
Installing Yarn
To install Yarn, we will now open our terminal.
• Paste the following command into the terminal: npm install -g yarn
• If errors occur, which could happen for a variety of reasons, mostly to do with administrator permissions on your device, do not panic. This error can be resolved by adding "sudo" to the beginning of the command, like this: sudo npm install -g yarn
Installing VSCode IDE
Head over to: https://code.visualstudio.com/download and select your correct version.
• When the installation prompt appears, accept the agreement, install in the default location, and depending on whether you want the shortcut icon or not is up to you.
Running the open-wc BoilerPlate
Great! Now that you have made it this far, we have just a couple more actions to perform. Here is how the last steps will play out:
• Create a new folder on the desktop, we can call this: Documents.
• To access this folder correctly, use the terminal to access the folder's correct level using cd (directory name), or by right-clicking the folder on the desktop, you can select "New Terminal at Folder" to go into the right level of the folder
• Still in the terminal, at the correct level of the folder, run this command: npm init @open-wc (If errors occur again, you can add the "sudo" at the beginning of the command.) You should have the screen showing below:
• Using arrow keys and the return key, select "Scaffold a new project"
• Select "Web Component"
• Use your spacebar to select all three options: "Linting, Testing, Demoing" and hit the return key
• Select "No" when asked for using TypeScript
• Name your component: "hello-world" Make sure this name is all lowercase!
•Select "Yes" to write the file structure to disk
• Select "Yes, with yarn" to install all necessary dependencies required for this
• After some loading and if all is done correctly, it should look like the photo below!
You have now set up your Boilerplate for open-wc! If any questions, comments, or concerns about the whole installation process, feel free to leave anything below the post! Enjoy!
Top comments (0)