Hey everyone! Web Components are an incredibly strong piece of technology that are incredibly flexible & powerful. But before we can start building all of these fancy tools, we have to start simply. In this blog post, we'll go over creating a simple Hello World element.
But even before that, we'll have to start by installing some required software (Windows).
I used Windows Powershell in order to do this, although practically any terminal works. https://ohmyz.sh/ is a good terminal to use.
In addition, make sure you have a GitHub account. GitHub, along with Git, are great tools that can help aid collaboration and also version control. I've had many an experience where I've forgotten something that I could find back on GitHub or had to switch back to a previous version to resolve the dreaded merge conflict.
Something that may be a little different is generating a SSH key. SSH stands for Secure Shell Protocol and pretty much just makes sure your computer and GitHub are communicating securely, so malicious actors can't gain access to our great projects.
Here's a link for help with setting up your SSH for Git: Click Here!
Check out this link for help with installing NodeJS and NPM: Click Here!.
Now, as is tradition, let's start off our Web Component journey by creating a Hello World element.
Start by running
npm init @open-wc
Then, the helper should ask you what you want to do today. Click Scaffold A New Project, then scaffold a Web Component. Having done so, the helper should give you three options. We want all three of these options, so hit enter on each one, and then hit enter a final time to move to the next step.
TypeScript is a personal choice, but we skipped it (no) for this tutorial. We can name our new component whatever, but we'll choose to call it hello-world.
Keep in mind if this is your first time running npm, it can take quite a while for packages to install and audit. But soon enough, it should run and create the whole file structure for you!
If you've done everything correctly, it should look something like this.
Then, we just need to run
npm run start
And we have our first web component!