Building Basic Web Components (open-wc)

Hi, I'm Matthew. My goal is to make you feel comfortable using the node.js command prompt to open web components.

node.js
To get started, download node.js. Go to https://nodejs.org/en/download/. Select the Long-Term Support (LTS) option for your operating system (OS); Windows, Mac, Linux, etc.

Visual Studio Code Editor
Along with node.js, you will need a code editor. I prefer Visual Studio Code. Go to https://code.visualstudio.com/ and download the latest version for your OS.

npm and yarn
Check to see if you have npm and yarn installed. You can do this by typing npm -v and yarn -v in your node.js command prompt.

If you do not have npm or yarn installed, run the command "npm install -g npm" (without the quotes) for npm, and "yarn install" (again without quotes) for yarn. Npm is an online repository to publish node.js projects and it is a command-line tool to interact with specific online repositories for package installation. Npm provides you the ability to publish open-source applications on the web.

Folder for Projects/Clone Repository
In order to clone your repository from GitHub into a folder, add a folder on your desktop, or wherever. To access the folder from node.js command prompt, you will have to change directories. Follow the below images for an example. Run the command "git clone (your link)" to clone your repository from GitHub.

Using node.js Command Prompt to Connect to open-wc
To connect your repository to open-wc, navigate to your folder using command prompt. For me, I typed the following commands into node.js command prompt:

1. cd desktop
2. cd edtechjoker_labs
3. cd edtechjoker-lab1

4. npm init @open-wc
   Answer the questions at this point
   a. 'Do you want to write this file structure to a disk? >> Yes
   b. Do you want to overwrite 'File Path'? >> Yes for all files
   c. Do you want to install dependencies? >> Yes, with npm

5. cd hello-world

6. npm run start

VOILA, you have created your web component.

Your computer should then open a web page that looks like:

Editing src code in HelloWorld.js
Now you can edit code in your HelloWorld.js file in Virtual Studio Code editor. Open Virtual Studio Code and select File > Open Folder and select folder you uploaded the Hello World folder to. In Virtual Studio Code, under the src drop down, double click the HelloWorld.js file. Now you can edit the file as you choose to. To push the changes from the file to your GitHub repository, enter the following commands in your node.js command prompt:

1. git commit -am "" (without the carrots)
2. git push origin main

It will look something like:

Works Cited
1) Cesar Jr RodriguezCesar Jr Rodriguez 1, and Suresh AttaSuresh Atta 117k3737 gold badges188188 silver badges293293 bronze badges.
“Whats the Meaning of 'Static Get' in Javascript (ES6)?” Stack Overflow, 1 Mar. 1965,
stackoverflow.com/questions/42884751/whats-the-meaning-of-static-get-in-javascript-es6.

2) “Export - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export.

3) “Import - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.

4) “Increment (++) - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment.

5) “JavaScript Object Constructors.” JavaScript Constructors, www.w3schools.com/js/js_object_constructors.asp.

6) Node.js. “What Is NPM?” Node.js, nodejs.org/en/knowledge/getting-started/npm/what-is-npm/#:~:text=npm%20is%20two%20things%3A%20first,A%20plethora%20of%20Node.

7) React Render HTML, www.w3schools.com/react/react_render.asp.

8) “Return - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return.

9) “Static - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static.