WebComponents workshops

Requirements

Before you will use this repository make sure that you have installed:

• Git

  • If you are a Windows or macOS user visit this link Downloading Git then download appropriate installer and install it.

  • If you are a Linux (Ubuntu-based distribution) user you can paste bellow scrip into your terminal or visit this page Installing Git

    sudo apt install git-all

• Node.js and npm

  • If you are a Windows or macOS user visit this link Node.js download then download LTS version for Windows and install it.

  • If you are a Linux (Ubunto-based distribution) user you can paste bellow scrip into your terminal or visit this page Node installation instruction or use nvm

    curl -fsSL https://deb.nodesource.com/setup_15.x | sudo -E bash -
    sudo apt-get install -y nodejs

  Or any other static HTTP server

• If you have installed Node.js and npm, then open your terminal / git-bash and run this command

  sudo npm install -g http-server

If you followed every step, you should be ready to start using this repository. To make sure that you have installed everything correctly open your terminal git-bash and run the following commands:

• To check git: git --version → you shoud see output with git version
• To check node.js: node --version → you shoud see output with node.js version
• To check npm: npm --version → you shoud see output with npm version
• To check http-server: http-server → you should see output which starts with Starting up http-server, serving

Downloading the repository

• Open your terminal / git-bash in location where you create a directory which will contain this repository

• Run the following command in your terminal / git-bash

  git clone https://github.com/GDSC-Lodz-University-of-Technology/workshops-web-components.git
  cd ./workshops-web-components

Using this repository

• Open workshops-web-components directory in your terminal / git-bash
• Run http-server inside your terminal / git-bash in root directory
• Open your web-browser and go under http://localhost:8080/
• You can also use prepared branches if you need any hints
• Starting point of these workshops is branch 0-setup

Workshops aim

At the end of this workshop, you should have a basic understanding of WebComponents. You should also have ready a simple app for adding events to the list.

Workshops app

• App should allow adding and viewing events in the list view
• App should be wrapped into one WebComponent which you will use in index.html
• Main component should contain two children components:
  • Input with button. After button click, the button should emit information about event that user want to add to the list
  • List all events. Every time user adds a new event, this event should be displayed inside this

Resources

• Presentation
• YouTube stream
• Intro to WebComponent(article)
• Styling WebComponents(article)
• How to Publish Web Components to NPM(article)