Local dev server to serve example html SkygearIO#333

carmenlau · Nov 7, 2017 · 9969805 · 9969805
1 parent 25a0b13
commit 9969805
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ var skygear = require('skygear');
 #import skygear from 'skygear'; #For ES2015
 
 skygear.config({
-    'endPoint': 'http://<your-app-name>.skygeario.com',
+    'endPoint': 'https://<your-app-name>.skygeario.com',
     'apiKey': '<your-api-key>',
 }).then(() => {
     console.log('Container is ready to make API call');
@@ -67,6 +67,20 @@ Include the following lines into the header of your HTML file:
 </script>
 ```
 
+## Running client example
+
+Checkout the source and run the following to launch a local server:
+
+```
+npm install
+
+# run example with demo endpoint
+npm run example
+
+# run example with your app endpoint
+SKYGEAR_ENDPOINT=https://<your-app-name>.skygeario.com SKYGEAR_API_KEY=<your-api-key> npm run example
+```
+
 ## Development
 Pull requests are welcomed!
 

diff --git a/example/index.html b/example/index.html
@@ -96,15 +96,15 @@ <h4>Forgot password</h4>
     <hr>
     <p><button onclick="logout();">Logout</button></p>
   </div>
-  <script src="../packages/skygear/dist/bundle.js"></script>
+  <script src="/bundle.js"></script>
   <script type="text/javascript">
     var m = document.getElementById("endpoint");
     var token = document.getElementById("accessToken");
     var currentUsername = document.getElementById("currentUsername");
     var currentEmail = document.getElementById("currentEmail");
     skygear.config({
-      'endPoint': 'https://sdkjsexample.skygeario.com/',
-      'apiKey': '363826633dc44161a11e9135b1546539'
+      'endPoint': '{{ SKYGEAR_ENDPOINT }}',
+      'apiKey': '{{ SKYGEAR_API_KEY }}'
     }).then(function(container) {
       m.textContent = container.endPoint;
       token.innerText = skygear.auth.accessToken;

diff --git a/example/pubsub.html b/example/pubsub.html
@@ -51,13 +51,13 @@ <h4>Publish Message</h4>
       <button onclick="publishMessage();">Publish Message</button>
     </form>
   </div>
-  <script src="../packages/skygear/dist/bundle.js"></script>
+  <script src="/bundle.js"></script>
   <script type="text/javascript">
     var m = document.getElementById("endpoint");
     var token = document.getElementById("accessToken");
     skygear.config({
-      'endPoint': 'https://sdkjsexample.skygeario.com/',
-      'apiKey': '363826633dc44161a11e9135b1546539'
+      'endPoint': '{{ SKYGEAR_ENDPOINT }}',
+      'apiKey': '{{ SKYGEAR_API_KEY }}'
     }).then(function(container) {
       m.textContent = container.endPoint;
       token.innerText = container.auth.accessToken;

diff --git a/example/push.html b/example/push.html
@@ -55,13 +55,13 @@ <h4>Send push notification</h4>
       <pre id="result"></pre>
     </form>
   </div>
-  <script src="../packages/skygear/dist/bundle.js"></script>
+  <script src="/bundle.js"></script>
   <script type="text/javascript">
     var m = document.getElementById("endpoint");
     var token = document.getElementById("accessToken");
     skygear.config({
-      'endPoint': 'https://sdkjsexample.skygeario.com/',
-      'apiKey': '363826633dc44161a11e9135b1546539'
+      'endPoint': '{{ SKYGEAR_ENDPOINT }}',
+      'apiKey': '{{ SKYGEAR_API_KEY }}'
     }).then(function(container) {
       m.textContent = container.endPoint;
       token.innerText = container.auth.accessToken;

diff --git a/example/record.html b/example/record.html
@@ -193,15 +193,15 @@ <h4>Upload Asset</h4>
       <button onclick="uploadAsset();">Upload</button>
     </form>
   </div>
-  <script src="../packages/skygear/dist/bundle.js"></script>
+  <script src="/bundle.js"></script>
   <script type="text/javascript">
     var m = document.getElementById("endpoint");
     var token = document.getElementById("accessToken");
     var currentUsername = document.getElementById("currentUsername");
     var currentEmail = document.getElementById("currentEmail");
     skygear.config({
-      'endPoint': 'https://sdkjsexample.skygeario.com/',
-      'apiKey': '363826633dc44161a11e9135b1546539'
+      'endPoint': '{{ SKYGEAR_ENDPOINT }}',
+      'apiKey': '{{ SKYGEAR_API_KEY }}'
     }).then(function(container) {
       m.textContent = container.endPoint;
       token.innerText = skygear.auth.accessToken;

diff --git a/example/role-acl.html b/example/role-acl.html
@@ -133,7 +133,7 @@
     <hr />
   </div>
 </body>
-<script src="../packages/skygear/dist/bundle.js"></script>
+<script src="/bundle.js"></script>
 
 <!-- init -->
 <script>
@@ -147,8 +147,8 @@
     };
 
     skygear.config({
-      'endPoint': 'https://sdkjsexample.skygeario.com/',
-      'apiKey': '363826633dc44161a11e9135b1546539'
+      'endPoint': '{{ SKYGEAR_ENDPOINT }}',
+      'apiKey': '{{ SKYGEAR_API_KEY }}'
     }).then(function (container) {
       display.endPoint.textContent = container.endPoint;
       display.token.textContent = container.auth.accessToken;

diff --git a/example/user.html b/example/user.html
@@ -108,15 +108,15 @@ <h4>Remove user relation</h4>
       <button onclick="removeRelation();">Remove</button>
     </form>
   </div>
-  <script src="../packages/skygear/dist/bundle.js"></script>
+  <script src="/bundle.js"></script>
   <script type="text/javascript">
     var m = document.getElementById("endpoint");
     var token = document.getElementById("accessToken");
     var currentUsername = document.getElementById("currentUsername");
     var currentEmail = document.getElementById("currentEmail");
     skygear.config({
-      'endPoint': 'https://sdkjsexample.skygeario.com/',
-      'apiKey': '363826633dc44161a11e9135b1546539'
+      'endPoint': '{{ SKYGEAR_ENDPOINT }}',
+      'apiKey': '{{ SKYGEAR_API_KEY }}'
     }).then(function(container) {
       m.textContent = container.endPoint;
       token.innerText = skygear.auth.accessToken;

diff --git a/gulp/tasks/example.js b/gulp/tasks/example.js
@@ -0,0 +1,24 @@
+var gulp = require('gulp');
+var serve = require('gulp-serve');
+var connectInject = require('connect-inject');
+
+gulp.task('example', serve({
+  root: ['./example', './packages/skygear/dist'],
+  port: 5000,
+  middleware: connectInject({
+    runAll: true,
+    rules: [{
+      match: /{{ SKYGEAR_ENDPOINT }}/,
+      fn: function () {
+        return process.env.SKYGEAR_ENDPOINT ||
+          'https://sdkjsexample.skygeario.com/';
+      }
+    },{
+      match: /{{ SKYGEAR_API_KEY }}/,
+      fn: function () {
+        return process.env.SKYGEAR_API_KEY ||
+          '363826633dc44161a11e9135b1546539';
+      }
+    }]
+  })
+}));
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "babelify": "^7.3.0",
     "browserify": "^11.0.1",
     "chai": "^3.2.0",
+    "connect-inject": "^0.4.0",
     "dirty-chai": "^1.2.2",
     "esdoc": "^1.0.1",
     "esdoc-accessor-plugin": "^1.0.0",
@@ -60,6 +61,7 @@
     "gulp-nsp": "^2.0.0",
     "gulp-preprocess": "^1.2.0",
     "gulp-rename": "^1.2.2",
+    "gulp-serve": "^1.4.0",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.5.3",
     "gulp-util": "^3.0.6",
@@ -84,7 +86,8 @@
     "test": "gulp --type dev",
     "deploy": "gulp deploy --type production",
     "deploy-latest": "gulp deploy --type production --latest",
-    "lerna": "lerna"
+    "lerna": "lerna",
+    "example": "gulp --type dev example"
   },
   "bin": {
     "skygear-node": "./bin.js",