Merge pull request #201 from kzahel/react-ui

React ui

Author: kzahel

README.md

@@ -1,6 +1,8 @@
 <a target="_blank" href="https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb">![Try it now in CWS](https://raw.github.com/GoogleChrome/chrome-app-samples/master/tryitnowbutton.png "Click here to install this sample from the Chrome Web Store")</a>
 
-# Chrome Web Server - an HTTP web server for Chrome (chrome.sockets)
+## Web Server for Chrome
+
+an HTTP web server for Chrome (chrome.sockets)
 
 Get it in the chrome web store:
 https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
@@ -28,8 +30,7 @@ How to include into your own chrome app
 
 run minimize.sh to concatenate all the required files together and then include the resulting wsc-chrome.min.js in your project. Here is an example of another project's usage: https://github.com/zebradog/kiosk/blob/f7a398f697edc1c22b90c14f959779f1e850012a/src/js/main.js#L124
 
-===
-Basic usage:
+### Basic usage:
 
 ```
 var app = new WSC.WebApplication(options)
@@ -82,14 +83,25 @@ handlers is an array of 2 element arrays where the first item is a regular expre
 ```
 
 
-====
-Building
-====
-Unfortunately there is a build process if you want to run this from source directly because I am using a Polymer (polymer-project.org) user interface. There is a bower.json in the polymer-ui folder and you will need to install node+npm+bower and then run bower install from that folder. Oh, and then you will need to "Refactor for CSP" (chrome apps do not allow inline scripts), one way of doing this is using https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg (open the folder and right click and select refactor for CSP)
 
-I'm now using a script that can do this (look in polymer-ui/build.sh. You'll need to npm install -g vulcanize crisper)
+### Building
+
+```
+cd web-server-chrome
+cd makedeps
+npm install
+npm run make # this builds the app dependencies such as react and material-ui into a bundle
+cd ../react-ui
+npm run watch # Press ctrl-c if you just want to build it once.
+# press ctrl-C if you are done editing
+cd ../
+bash package.sh
+```
+
+This creates package.zip, which can then be distributed.
+
 
-====
+### Where to get it
 
 Get it in the chrome web store:
 https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
@@ -101,7 +113,7 @@ handle range requests. It also sets mime types correctly.
 Here is an example project based on it:
 https://chrome.google.com/webstore/detail/flv-player/dhogabmliblgpadclikpkjfnnipeebjm
 
-====
+---
 
 MIT license
 

background.js

@@ -207,7 +207,7 @@ function launch(launchData) {
 							   height: 700 }
 			   }
     //var page = 'index.html'
-    var page = 'polymer-ui/index.html'
+    var page = 'react-ui/index.html'
     chrome.app.window.create(page,
                              opts,
                              function(mainWindow) {

handlers.js

@@ -474,7 +474,7 @@
         }
     }, WSC.BaseHandler.prototype)
 
-    if (chrome.runtime.id == WSC.store_id) {
+    if (chrome.runtime.id == WSC.store_id || true) {
 
         chrome.runtime.getPackageDirectoryEntry( function(pentry) {
             var template_filename = 'directory-listing-template.html'

manifest.json

@@ -4,7 +4,7 @@
     "short_name": "Web Server",
     "description": "A Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline.",
     "author": "Kyle Graehl",
-    "version": "0.4.8",
+    "version": "0.5.0",
     "manifest_version": 2,
     "offline_enabled": true,
     "minimum_chrome_version": "45",

manifest.json.scratch

@@ -1 +1,2 @@
-    "key":"MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAv7ZULSqbpKKQ1QP5Tb9f8g306PlY87OYYlXBrp7PlBHd/LJMUBDNWMCrWhpFR8sIjpvHjYipDr60j+2i7vj3PZlwbxZ7e3x+2A4cQt1LaC1PVZ6avnbsV0YMkFQi8H5f7NQiBKE2i2/Z/kB2r/DzyiUdGW63/sgjpBvgDCCMysHl3NWCnHqIOOtGD8SFlT5clgNJgVOgosFwHE4yYJDpIkvJ+nrLia9v6V/Cyc8ITEd0njvsp0q0aFJp332Ua/RPvh/m1UKcj8f3FNbaCrdScFzfKo5UNmifKLGhT377xhnvhOKuEJbyghNkPheMUquwVpTEHdRFMm7nVcLAt/kuZwIDAQAB",
+// this is the production app key
+"key":"MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAv7ZULSqbpKKQ1QP5Tb9f8g306PlY87OYYlXBrp7PlBHd/LJMUBDNWMCrWhpFR8sIjpvHjYipDr60j+2i7vj3PZlwbxZ7e3x+2A4cQt1LaC1PVZ6avnbsV0YMkFQi8H5f7NQiBKE2i2/Z/kB2r/DzyiUdGW63/sgjpBvgDCCMysHl3NWCnHqIOOtGD8SFlT5clgNJgVOgosFwHE4yYJDpIkvJ+nrLia9v6V/Cyc8ITEd0njvsp0q0aFJp332Ua/RPvh/m1UKcj8f3FNbaCrdScFzfKo5UNmifKLGhT377xhnvhOKuEJbyghNkPheMUquwVpTEHdRFMm7nVcLAt/kuZwIDAQAB",

package.sh

@@ -2,4 +2,6 @@ rm package.zip
 
 #zip package.zip -r * -x package.sh -x *.git* -x "*.*~" -x images/cws_*.png -x *.scratch -x polymer-ui/node-modules/**\* -x wsc-chrome.min.js
 
-zip package.zip manifest.json *.js *.html images/200*.png polymer-ui/*.html polymer-ui/*.js polymer-ui/*.css polymer-ui/bower_components/font-roboto/fonts/roboto/Roboto-Bold.ttf -x wsc-chrome.min.js
+#zip package.zip manifest.json *.js *.html images/200*.png polymer-ui/*.html polymer-ui/*.js polymer-ui/*.css polymer-ui/bower_components/font-roboto/fonts/roboto/Roboto-Bold.ttf -x wsc-chrome.min.js
+
+zip package.zip manifest.json *.js *.html images/200*.png react-ui/*.html react-ui/nojsx/* assets/* -x wsc-chrome.min.js

polymer-ui/README.md

@@ -0,0 +1 @@
+not used any more. see https://github.com/kzahel/web-server-chrome/issues/199

react-ui/index.html

@@ -0,0 +1,8 @@
+<html style="overflow-y: auto">
+  <script src="../chromise.js"></script>
+  <script src="../assets/bundle.js"></script> <!-- scripts from "makedeps" -->
+  <body style="margin: 0">
+    <div id="app"></div>
+    <script type="module" src="nojsx/index.js"></script>
+  </body>
+</html>