Start to finish, open-wc "Hello World" guide for dummies (like myself)

Hello everyone! Have you wanted to get into JavaScript and Open Web Components, but have no idea what either of those are, and need a step by step guide to get a "Hello World" page up and running? Well look no further because that is exactly where I was at about 3 days ago.

Before we get into it... What do all these words mean?

JavaScript is a programming language that allows users to interact with things on web pages. Open Web Components (commonly open-wc) is a tool that provides defaults and basic outlines for website framework. I think of it as sort of a shortcut to getting started on a website. In this guide we will be installing open-wc and using some Javascript to get our page up and running.

Downloads:

For this tutorial you're going to need VSCode and NodeJS. VSCode is Microsoft's code editing tool and it is really helpful because you can launch your pages right from the editor, and you can access your git repositories by linking your git account to the editor.

To get VSCode, go this go to this website, select Download in the top right which will take you to this screen

Select your OS and follow the onscreen instructions to get it set up

Now that we got that one out of the way let's get NodeJS. This is a runtime environment that runs and executes JavaScript code outside of your web browser. This will also by default install a npm which will allow you to interact with your .js files in a given directory. Head over here, select LTS and your OS and then make sure that installs in the default file location. To check this, open a terminal or a command prompt and type 'node' and it should look like this

On to the web component now!

Let's get going!

The first step here is to make a folder, call it what you like, but make sure you can access it. Using the cd command, navigate to the folder you just created, if you are unfamiliar how to navigate directories with cd check herefor further readings.

After you have successfully entered the new folder, type npm init @open-wc and you should be met with this screen

Using the arrow keys, hover over "Scaffold New Project" and hit enter. Next, hover over "Web Component" and press Enter again. Your screen should look like this:

After that, you should select all 3 of the options "linting", "testing", and "demoing" do this by pressing the spacebar, then the down arrow to select each one, the radio buttons should be lit up as such:

Press enter when they are all selected.

When asked if you are going to use typescript, select no by pressing enter.

Finally, you need to give your web component a name, for this example I used hello-world. After, select Yes to write to the file structure

In this tutorial we are going to arrow key down and select "Yes with npm", that was installed with JSNode rather than Yarn, if you have yarn and would like to use it, go ahead and select Yes for that option at this stage (read more about Yarn)

Congrats! Your first Web Component! If your screen looks like this, you did it!

All that's left to do is type npm start into terminal and bask in the glory of your new creation. Whenever that gets boring press ctrl (or command) + C