Skip to content

Instantly share code, notes, and snippets.

Last active November 21, 2022 20:52
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save JohnRiv/f56cb0b562ea06368c0e38745b82a41c to your computer and use it in GitHub Desktop.
Progressive Web Experience: Sharing Components Across Frameworks

Sharing Components Across Frameworks Workshop

Hello Progressive Web Experience! 👋 🏝️

Thanks for coming to our hands-on introduction to Web Components, lit-html and LitElement!

Please complete the following steps to get started. For any project we ask you to clone, clone them all to the same root project directory:

  1. Complete our Pre-Workshop Survey
  2. Install Git: Mac OSX & Linux Users | Windows Users
  3. Install Node.js at least v10.0.0. For Mac OSX & Linux Users, we recommend using NVM (Node Version Manager) to allow you to have different versions of Node.js on your machine and you also will not have to use sudo when running npm install. If you wish to use NVM:
  • Install NVM per their instructions
  • Follow the instructions in your terminal
  • Install the latest version of Node: nvm install --lts
  • Make sure subsequent commands you use use the latest version of Node with NVM: nvm use --lts (this will persist until you close your terminal tab)
  1. Install the Polymer CLI globally: npm install -g polymer-cli
  2. Clone the wc-toast repo & follow the instructions on to get the dependencies & repo set up
  3. Clone the wc-playground repo & run npm install to install dependencies
  4. Clone the wc-components repo & follow the instructions on to get the dependencies & repo set up

If you use VSCode, we also recommend installing the lit-plugin

Codelab Links


Click here to view & download the slides


Please reach out to us on Twitter, we're happy to help :-)

John & Chris

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment