Polymer 3: How to customize starter kit application

2019/04/14: New strategy on creating apps with litElement + RXFIRE + Redux

Below are the links for sample application using React, but it can be a nice source of information.

https://medium.com/quick-code/how-to-integrate-react-redux-and-firebase-in-3-simple-steps-c44804a6af38

https://medium.com/quick-code/adding-authentication-to-react-redux-firebase-app-f0efcb1c519a

Node.js

Upgrading version

  • How to check version of Node.js: 
node -v

In Windows, you can try upgrading Node.js manually with commands below or downloading a new version and installing it.

How to upgrade:

Install npm-windows-upgrade. More info at www.npmjs.com/package/npm-windows-upgrade: 

npm install --global --production npm-windows-upgrade

npm-windows-upgrade

How to uninstall package 

npm uninstall -g npm-windows-upgrade

Section below might be outdated…

Polymer PWA starter kit

How to install

  1. Follow instructions under https://pwa-starter-kit.polymer-project.org/setup
  2. Right at first step, you may need to modify instruction of creating new app to: 
git clone --depth 1 https://github.com/Polymer/pwa-starter-kit my-app // OR git clone -c http.sslVerify=false --depth 1 https://github.com/PolymerLabs/books my-app
  1. If you’re using Kaspersky as your anti-virus, try deactivating scanning of encrypted connections (as seen on forum:
    • “…I learned how to make Kaspersky permit connections to github.com. See this link:
      https://help.kaspersky.com/KIS/2019/en-US/157530.htm Apparently the issue is that Kaspersky can’t trust certain kinds of encrypted transmissions and you have to specify sites you trust such as github.com…”
  2. When trying template for google books, when setting up a authorization, issue related to “white listing of localhost:8081” will be fixed by accessing https://console.developers.google.com/apis/credentials, then changing respective ‘OAuth 2.0 client ID’ and adding ‘localhost:8081’ to section ‘Authorized JavaScript origins’.
Redux

If you don’t know what is Redux, I urge you first to understand it, then work through starter kit and try to modify it.

https://redux.js.org/

WEB COMPONENTS

LitElement

VIRTUAL SCROLLER

Material design

Color tool

https://material.io/tools/color/
https://www.materialpalette.com/
https://material-ui.com/style/color/
https://saruwakakun.com/en/material-color

LAYOUT

http://polymerelements.github.io/app-layout/https://mprmdemo.getmotopress.com/menus/simple-list/

Firebase

https://www.npmjs.com/package/firebase
https://www.npmjs.com/package/polymerfire3

How to integrate firestore to polymer 3 application:
https://github.com/psvensson/firestore-components

https://github.com/FirebaseExtended/polymerfire

https://github.com/merlinnot/polymerfire/tree/fix-issue-333

Firebase guides

https://firebase.google.com/docs/web/setup

https://github.com/firebase/quickstart-js/tree/master/firestore

Run a local web server for development

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Codelab example

  1. Friendly eats (Web)

https://github.com/firebase/friendlyeats-web
https://github.com/firebase/quickstart-js/tree/master/firestore

2. Sample polymer component
https://github.com/deltaepsilon/firebase-ui

3 firebase-app
https://github.com/FirebaseExtended/polymerfire

4 firebase npm library
https://www.npmjs.com/package/firebase

5. Example of old code lab using polymer and firebase component.
https://github.com/googlearchive/note-app

Deploy to firebase

https://pwa-starter-kit.polymer-project.org/building-and-deploying#firebase-hosting
Steps => https://gist.github.com/Dabolus/314bd939959ebe68f57f1dcebe120a7e

Adding firebase logon UI

https://www.npmjs.com/package/firebaseui
https://github.com/firebase/firebaseui-web#installation

Example of wrapper of firebaseui in polymer
https://www.youtube.com/watch?v=sB5ZpXr9qiA
https://github.com/marcus7777/firebase-ui-auth/blob/master/demo.html

ES6 TIPS

ES6 In Depth: Arrow functions

SVG icon font if needed

https://fontawesome.com/

NPM package Management

npm outdated

Check for outdated packages. https://docs.npmjs.com/cli/outdated.html

npm update -g

This command will update all the packages listed to the latest version.

npm install -g <package>

This command installs/update a package, and any packages that it depends on.
https://docs.npmjs.com/cli/install

Leave a Reply