Static demos

ringcentral · Jun 12, 2020 · 18864ae · 18864ae
1 parent 25907c8
commit 18864ae
Show file tree

Hide file tree

Showing 40 changed files with 267 additions and 199 deletions.
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
diff --git a/.travis.yml b/.travis.yml
@@ -12,7 +12,7 @@ before_install: npm config set //registry.npmjs.org/:_authToken=${NPM_TOKEN}
 
 before_script:
 - DEBUG=eslint:cli-engine yarn lint:all
-- yarn build
+- yarn build:quick
 
 deploy:
 - provider: script

diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: yarn serve
diff --git a/README.md b/README.md
@@ -1068,10 +1068,6 @@ SKIP_PREFLIGHT_CHECK=true
 
 REACT_APP_VERSION=1.0.0
 
-REACT_APP_API_SERVER=http://pla01-t11-wap11.lab.nordigy.ru:8080
-REACT_APP_HOST_CLIENT_ID=wap-rel-all-permissions-app-key
-REACT_APP_FRAME_CLIENT_ID=wap-app-test-key
-
 REACT_APP_HOST_PORT=3000
 REACT_APP_HOST_WC_PORT=3001
 REACT_APP_REACT_PORT=4001
@@ -1080,6 +1076,8 @@ REACT_APP_IFRAME_PORT=4003
 REACT_APP_ADMIN_PORT=4005
 REACT_APP_REACT_MENU_PORT=4006
 REACT_APP_ANGULAR_PORT=4007
+
+REACT_APP_PRODUCTION_HOST=http://localhost
 ```
 
 Then you can start the watchers/servers:

diff --git a/demo/admin/index.html b/demo/admin/index.html
@@ -5,8 +5,8 @@
 </head>
 <body>
 <h1>Admin</h1>
-<p><a href="other.html">Go to other page</a></p>
-<script type="text/javascript" src="node_modules/@ringcentral/web-apps-sync-iframe/dist/ringcentral-web-apps-iframe.js"></script>
-<script type="text/javascript" src="scripts.js"></script>
+<p><a href="/demo/admin/other.html">Go to other page</a></p>
+<script type="text/javascript" src="/demo/admin/node_modules/@ringcentral/web-apps-sync-iframe/dist/ringcentral-web-apps-iframe.js"></script>
+<script type="text/javascript" src="/demo/admin/scripts.js"></script>
 </body>
 </html>
diff --git a/demo/admin/other.html b/demo/admin/other.html
@@ -2,12 +2,13 @@
 <html>
 <head>
     <title>Admin</title>
+    <base href="/demo/admin">
 </head>
 <body>
 
 <h1>Admin > Other</h1>
 
-<p><a href="/">Go to index page</a></p>
+<p><a href="/demo/admin/">Go to index page</a></p>
 
 <hr/>
 
@@ -164,7 +165,7 @@ <h1>1914 translation by H. Rackham</h1>
    matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he
    endures pains to avoid worse pains."</p>
 
-<script type="text/javascript" src="node_modules/@ringcentral/web-apps-sync-iframe/dist/ringcentral-web-apps-iframe.js"></script>
-<script type="text/javascript" src="scripts.js"></script>
+<script type="text/javascript" src="/demo/admin/node_modules/@ringcentral/web-apps-sync-iframe/dist/ringcentral-web-apps-iframe.js"></script>
+<script type="text/javascript" src="/demo/admin/scripts.js"></script>
 </body>
 </html>
diff --git a/demo/admin/package.json b/demo/admin/package.json
@@ -3,13 +3,13 @@
   "version": "0.6.0",
   "private": true,
   "scripts": {
-    "start": "http-server -p $REACT_APP_ADMIN_PORT --cors"
+    "start": "serve -l $REACT_APP_ADMIN_PORT"
   },
   "dependencies": {
     "@ringcentral/web-apps-sync-iframe": "*"
   },
   "devDependencies": {
-    "http-server": "0.11.1"
+    "serve": "11.3.2"
   },
   "workspaces": {
     "nohoist": [

diff --git a/demo/admin/scripts.js b/demo/admin/scripts.js
@@ -2,4 +2,5 @@ let sync = new RCApps.IFrameSDK.IFrameSync({
     history: 'html5',
     id: 'admin',
     sendInitialLocation: true,
+    base: '/demo/admin',
 });
diff --git a/demo/admin/serve.json b/demo/admin/serve.json
@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/demo/admin/**",
+      "destination": "/"
+    }
+  ]
+}
diff --git a/demo/angular/angular.json b/demo/angular/angular.json
@@ -13,7 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/demo-angular",
+            "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",

diff --git a/demo/angular/package.json b/demo/angular/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port=$REACT_APP_ANGULAR_PORT",
-    "build": "ng build"
+    "build": "ng build --base-href /demo/angular/dist/"
   },
   "private": true,
   "dependencies": {

diff --git a/demo/fed/package.json b/demo/fed/package.json
@@ -6,13 +6,14 @@
     "@babel/core": "7.10.2",
     "@babel/preset-react": "7.10.1",
     "babel-loader": "8.1.0",
-    "serve": "11.3.0",
+    "http-server": "0.12.3",
     "webpack": "^5.0.0-beta.17",
     "webpack-cli": "3.3.11",
     "webpack-dev-server": "3.11.0"
   },
   "scripts": {
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server",
+    "build": "webpack --progress"
   },
   "dependencies": {
     "react": "^16.13.0",

diff --git a/demo/fed/webpack.config.js b/demo/fed/webpack.config.js
@@ -3,13 +3,16 @@ const path = require('path');
 
 module.exports = {
     entry: './src/index',
-    mode: 'development',
+    mode: process.env.NODE_ENV || 'development',
     devServer: {
         contentBase: path.join(__dirname, 'dist'),
         port: process.env.REACT_APP_FED_PORT,
     },
     output: {
-        publicPath: `http://localhost:${process.env.REACT_APP_FED_PORT}/`,
+        publicPath:
+            process.env.NODE_ENV === 'production'
+                ? '/demo/fed/dist/'
+                : `http://localhost:${process.env.REACT_APP_FED_PORT}/`,
     },
     module: {
         rules: [

diff --git a/demo/host-web-component/package.json b/demo/host-web-component/package.json
@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "PORT=$REACT_APP_HOST_WC_PORT react-scripts start"
+    "start": "PORT=$REACT_APP_HOST_WC_PORT react-scripts start",
+    "build": "react-scripts build"
   },
   "browserslist": [
     "IE 11"

diff --git a/demo/host/package.json b/demo/host/package.json
@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server",
+    "build": "webpack --progress"
   },
   "browserslist": [
     "IE 11"
@@ -24,6 +25,7 @@
     "@babel/preset-react": "7.10.1",
     "babel-loader": "8.1.0",
     "css-loader": "^3.5.3",
+    "http-server": "0.12.3",
     "style-loader": "^1.2.1",
     "html-webpack-plugin": "^4.3.0",
     "webpack": "^5.0.0-beta.17",

diff --git a/demo/host/public/index.html b/demo/host/public/index.html
@@ -4,7 +4,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="fragment" content="!">
     <meta charset="utf-8">
-    <base href="/">
     <title>Service Web</title>
 </head>
 <body>

diff --git a/demo/host/src/lib/registry.js b/demo/host/src/lib/registry.js
@@ -1,6 +1,8 @@
 // This could be any other provisioning method
 const fetchManifest = async url => (await fetch(`${url}/asset-manifest.json`)).json();
 
+const angularSuffix = process.env.NODE_ENV === 'production' ? '-es5' : '';
+
 // Special treatment of Create React App manifest
 const getFilesFromManifest = (url, manifest) =>
     [
@@ -12,56 +14,96 @@ const getFilesFromManifest = (url, manifest) =>
 export const appRegistry = {
     react: {
         type: 'script',
-        getUrl: async (url = `http://localhost:${process.env.REACT_APP_REACT_MENU_PORT}`) =>
-            getFilesFromManifest(url, await fetchManifest(url)),
+        getUrl: async (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/react-menu/build`
+                : `http://localhost:${process.env.REACT_APP_REACT_MENU_PORT}`,
+        ) => getFilesFromManifest(url, await fetchManifest(url)),
     },
     reactMenuIframe: {
         type: 'iframe',
-        origin: `http://localhost:${process.env.REACT_APP_REACT_MENU_IFRAME_PORT}`,
-        getUrl: async (url = `http://localhost:${process.env.REACT_APP_REACT_MENU_IFRAME_PORT}`) => url,
+        origin:
+            process.env.NODE_ENV === 'production'
+                ? window.location.origin
+                : `http://localhost:${process.env.REACT_APP_REACT_MENU_IFRAME_PORT}`,
+        getUrl: async (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/react-menu-iframe/build/`
+                : `http://localhost:${process.env.REACT_APP_REACT_MENU_IFRAME_PORT}`,
+        ) => url,
     },
     global: {
         type: 'global',
-        getUrl: async (url = `http://localhost:${process.env.REACT_APP_REACT_PORT}`) =>
-            getFilesFromManifest(url, await fetchManifest(url)),
+        getUrl: async (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/react/build`
+                : `http://localhost:${process.env.REACT_APP_REACT_PORT}`,
+        ) => getFilesFromManifest(url, await fetchManifest(url)),
     },
     vue: {
         type: 'script',
-        getUrl: (url = `http://localhost:${process.env.REACT_APP_VUE_PORT}`) => [
-            `${url}/js/app.js`,
-            `${url}/js/chunk-vendors.js`,
-        ],
+        getUrl: (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/vue/dist`
+                : `http://localhost:${process.env.REACT_APP_VUE_PORT}`,
+        ) => [`${url}/js/app.js`, `${url}/js/chunk-vendors.js`],
     },
     iframe: {
         type: 'iframe',
-        origin: `http://localhost:${process.env.REACT_APP_IFRAME_PORT}`,
-        getUrl: (url = `http://localhost:${process.env.REACT_APP_IFRAME_PORT}`) => url, // add # to URL enable hash history in IFRAME
+        origin:
+            process.env.NODE_ENV === 'production'
+                ? window.location.origin
+                : `http://localhost:${process.env.REACT_APP_IFRAME_PORT}`,
+        getUrl: (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/iframe/build`
+                : `http://localhost:${process.env.REACT_APP_IFRAME_PORT}`,
+        ) => url, // add # to URL enable hash history in IFRAME
     },
     admin: {
         type: 'iframe',
-        origin: `http://localhost:${process.env.REACT_APP_ADMIN_PORT}`,
-        getUrl: (url = `http://localhost:${process.env.REACT_APP_ADMIN_PORT}`) => url,
+        origin:
+            process.env.NODE_ENV === 'production'
+                ? window.location.origin
+                : `http://localhost:${process.env.REACT_APP_ADMIN_PORT}`,
+        getUrl: (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/admin`
+                : `http://localhost:${process.env.REACT_APP_ADMIN_PORT}`,
+        ) => url,
     },
     angular: {
         type: 'script',
-        getUrl: (url = `http://localhost:${process.env.REACT_APP_ANGULAR_PORT}`) => [
-            url + `/runtime.js`,
-            url + `/polyfills.js`,
-            url + `/styles.js`,
-            url + `/vendor.js`,
-            url + `/main.js`,
+        getUrl: (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/angular/dist`
+                : `http://localhost:${process.env.REACT_APP_ANGULAR_PORT}`,
+        ) => [
+            url + `/runtime${angularSuffix}.js`,
+            url + `/polyfills${angularSuffix}.js`,
+            url + `/styles${angularSuffix}.js`,
+            url + `/vendor${angularSuffix}.js`,
+            url + `/main${angularSuffix}.js`,
         ],
     },
     federation: {
         type: 'global',
-        getUrl: async (url = `http://localhost:${process.env.REACT_APP_FED_PORT}`) => url + '/remoteEntry.js',
+        getUrl: async (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/fed/dist`
+                : `http://localhost:${process.env.REACT_APP_FED_PORT}`,
+        ) => url + '/remoteEntry.js',
         options: {
             federation: true,
         },
     },
     federationDirect: {
         type: 'global',
-        getUrl: async (url = `http://localhost:${process.env.REACT_APP_FED_PORT}`) => url + '/remoteEntry.js',
+        getUrl: async (
+            url = process.env.NODE_ENV === 'production'
+                ? `/demo/fed/dist`
+                : `http://localhost:${process.env.REACT_APP_FED_PORT}`,
+        ) => url + '/remoteEntry.js',
         options: {
             federation: true,
             module: './App',

diff --git a/demo/host/src/pages/LoggedInWrapper.js b/demo/host/src/pages/LoggedInWrapper.js
@@ -9,14 +9,14 @@ import {FederationDirectApp} from './FederationDirectApp';
 
 const logout = () => alert('Logout');
 
-const Layout = () => (
+const Layout = ({match}) => (
     <>
         <MenuApp logout={logout} />
         <MenuAppIframe logout={logout} />
 
         <Switch>
-            <Route path="/application/apps" component={Index} exact />
-            <Route path="/application/apps/:appId" component={App} />
+            <Route path={`${match.url}`} component={Index} exact />
+            <Route path={`${match.url}/:appId`} component={App} />
         </Switch>
 
         <FederationApp />