I have to admit this will be my first encounter with JavaScript and I am trying my best to stay positive. I understand that with every new language comes new set ups, challenges and road blocks and I am excited to see where my work with JS will take me!
When working with web components and open-wc there are various approaches, however this is the one that I chose to follow. This approach requires the installation of Node.JS and npm.
Installing software
Node.JS
This is a JavaScript runtime environment that runs on various operating systems such as Mac OS, Microsoft or Linux. Node.js has been used by companies such as Paypal and ebay for creating and designing applications and carrying out projects.
To download Node.js follow this link for Mac users and you will be directed to the home page of the Node.js website. The 'LTS' version should be most suitable for most users.
For other operating systems follow this separate link.
npm
Once you have downloaded Node.js you will need to install npm which is a package manager that will be used to publish, discover and develop node programs. When you initially download Node.js it should automatically install npm, but to make sure both have been installed you can run node -v and npm -v. You will be shown the version of node and npm that have been installed.
Running open-wc
Once everything has been installed we are going to set up open-wc. Be sure to create a series of folders in order to store your project and your github repo.
2. We are going to run npm init @open-wc which should yeild the start up page for open-wc
3. You are going to select the option to 'Scaffold a new project' by clicking enter.
4. Select the 'Web Component' option and press enter
5. Select all three options: Linting, Testing and Demoing. You do this by hitting the space bar and using the down arrow key to navigate followed by the enter key.
6. Select 'No' when asked about typescript.
7. Assign a name to your web component which should consist of two words, both lowercase, separated by a dash.
8. Finally, you are going to choose to write to disk and install dependencies with npm. If you have chosen to install yarn then feel free to install with yarn instead.
You have finally created your first web component! Let's take a look at what we've created.
Now I am going to be brutally honest here, I'm not quite sure what any of this really means or what I am supposed to do with it so far. I have gone through the tutorial on Lit Playground, but I think I might need another thorough run through. Nonetheless we can find in VS code our hello-world.js file(or whatever you chose to name your folder).
Although I have had previous coding experience, I feel like I am harbouring a little insecurity having to deal with a new platform which I am going to have to get passed sooner rather than later.
Top comments (0)