Skip to content

Instantly share code, notes, and snippets.

@JohnRiv

JohnRiv/rwx-polymer-workshop.md

Last active March 10, 2019 23:34
Show Gist options
  • Save JohnRiv/b5085c0c9d622022e73763b716b7aaf7 to your computer and use it in GitHub Desktop.
Save JohnRiv/b5085c0c9d622022e73763b716b7aaf7 to your computer and use it in GitHub Desktop.
Download ZIP
Rich Web Experience: Intro to Web Components & Polymer Workshop
Raw
rwx-polymer-workshop.md

Introduction to Web Components & Polymer Workshop

Hello Rich Web Experience! 👋

Thanks for coming to our hands-on introduction to Web Components & Polymer!

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. Install Git: Mac OSX & Linux Users | Windows Users
  2. Install Node.js at least v8.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 https://github.com/ComcastSamples/wc-toast to get the dependencies & repo set up
  3. Clone the wc-components repo & follow the instructions on https://github.com/ComcastSamples/wc-components to get the dependencies & repo set up
  4. Clone the Polymer Google Maps Codelab and install dependencies:
  • git clone https://github.com/ComcastSamples/polymer-maps.git
  • cd polymer-maps
  • npm install
  1. Clone the PWA Starter Kit default template and install dependencies:
  • git clone --depth 1 https://github.com/Polymer/pwa-starter-kit pwa-starter-kit-default
  • cd pwa-starter-kit-default
  • npm install
  1. Clone the PWA Starter Kit no-redux template and install dependencies:
  • git clone --depth 1 -b template-no-redux --single-branch https://github.com/Polymer/pwa-starter-kit pwa-starter-kit-no-redux
  • cd pwa-starter-kit-no-redux
  • npm install
  1. (Optional) Obtain a Google Maps API key and record that somewhere it will be easy to copy from so you can paste it into your code during the workshop. Note Google now requires a Credit Card to obtain a key. If you don't wish to provide Google a Credit Card, we'll also share a temporary key for use during the workshop.

Codelab Links

Slides

Click here to view & download the slides

Questions?

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