Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Latest commit

 

History

History
97 lines (72 loc) · 3.89 KB

SETUP.md

File metadata and controls

97 lines (72 loc) · 3.89 KB
Raw

PReview Code frontend Build Status Issues ready for review

This is the frontend code for https://preview-code.com implemented with Polymer.

Please read the complete SETUP.md file before executing any of the steps.

Installation guide

Prerequisites: nodejs, npm, and git

  1. Install the LTS version (4.x) of node.js. Please do not install version 6.0 as it is not officially supported by polymer (last checked on 2016.09.22).

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

  2. install the latest version of npm:

     sudo npm install npm@latest -g

  3. install git:

     sudo apt-get install git -y

Please note: It is important to first install nodejs, as shown here, and then npm. The script for nodejs downloads an older version of npm, which we subsequently update.

Install tooling

Install Chrome:

Please visit https://www.google.com/chrome/ to install the newest version of Chrome.

Install the npm (global) packages

  1. install the java runtime

     sudo apt-get install default-jre

  2. install bower

     sudo npm install -g bower

  3. install gulp

     sudo npm install -g gulp-cli

  4. install Polymer CLI

     sudo npm install -g polymer-cli

  5. install polyserve

     sudo npm install -g polyserve

  6. install web-component-tester

     sudo npm install -g web-component-tester@4.2.2

  7. install web-component-tester-istanbul

     sudo npm i -g web-component-tester-istanbul@git://github.com/TimvdLippe/web-component-tester-istanbul.git

Please note: version 4.3.5 of web-component-tester causes errors. Please use 4.2.2 until further notice.

Clone the frontend

  1. Clone the repository

     git clone https://github.com/preview-code/frontend.git

  2. Enter the (newly created) directory named frontend

Prepare the frontend to run

  1. Install the (local) npm packages

     sudo npm install -only=dev

  2. Install bower packages

     bower install

Please note: It is important to first install the npm packages and then the bower packages. The bower script depends on the former.

Start up the frontend

Use gulp to serve the frontend

	gulp serve

Certificate warnings

The frontend makes use of a service-worker which in turn requires https. As the development certificate has not been issued by a trusted authority, Chrome will warn you that the site is not safe.

To make Chrome recognize the certificate, please follow these steps: (These steps have been inspired by http://stackoverflow.com/a/15076602/2761676)

  • Open Chrome and visit localhost:5200.
  • Click on ADVANCED (on the bottom left of the page.)
  • Click on Proceed to localhost (unafe).
  • Click on the red attention sign in the url bar.
  • Click Details.
  • Click View certificate.
  • Click Details.
  • Click Export....
  • Choose PKCS #7, single certificate as the file format.
  • Save the file.
  • Open Chrome Settings.
  • Click Show advanced settings....
  • Under HTTPS/SSL click Manage certificates.
  • Click the Authorities tab.
  • Click Import...
  • Select the saved file.
  • Enable all the trust settings on the Certificate authority prompt.
  • Reload the page on localhost:5200.
  • There should now be a green (safe) lock next to the url.