Vercel deployment

Nicer demo

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .idea
 .cache
+.vercel
 /.env
 lerna-debug*
 node_modules

.travis.yml

@@ -39,4 +39,9 @@ deploy:
   on:
     all_branches: true
     condition: $TRAVIS_TAG == *"-"*
-    repo: ringcentral/web-apps
+    repo: ringcentral/web-apps
+
+after_success:
+  - mkdir .vercel
+  - echo $VERCEL_PROJECT > .vercel/project.json
+  - if [[ ${TRAVIS_BRANCH} == "master" ]]; then yarn vercel --prod --token=$VERCEL_TOKEN --no-clipboard; fi

.vercelignore

@@ -0,0 +1,31 @@
+.idea
+cypress
+node_modules
+packages
+
+.env
+.eslintrc
+.huskyrc
+.lintstagedrc
+.npmrc
+.prettierrc
+.travis.yml
+CONTRIBUTING.md
+cypress.json
+lerna.json
+lerna-debug.log
+package.json
+Procfile
+README.md
+serve.json
+tsconfig.json
+yarn.lock
+yarn-error.log
+
+# dark magic to keep one file
+demo/admin/node_modules/*
+demo/admin/node_modules/@ringcentral/web-apps-sync-iframe/node_modules
+!demo/admin/node_modules
+!demo/admin/node_modules/@ringcentral
+!demo/admin/node_modules/@ringcentral/web-apps-sync-iframe
+!demo/admin/node_modules/@ringcentral/web-apps-sync-iframe/dist/ringcentral-web-apps-iframe.js

demo/fed/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@web-apps/fed",
+  "name": "@web-apps/demo-fed",
   "version": "0.0.0",
   "private": true,
   "devDependencies": {

demo/fed/src/App.js

@@ -1,16 +1,21 @@
 import React from 'react';
 import moment from 'moment';
 
-export default ({foo}) => (
+export default ({mode}) => (
     <div
+        className="border border-info"
         style={{
             borderRadius: '4px',
-            padding: '2em',
-            backgroundColor: 'red',
-            color: 'white',
+            padding: '1em',
+            display: 'flex',
+            alignItems: 'center',
         }}
     >
-        <h2>App 2 Widget: {foo}</h2>
-        <p>{moment().format('MMMM Do YYYY, h:mm:ss a')}</p>
+        <h4 className="font-weight-lighter" style={{margin: '0 10px 0 0'}}>
+            Global App (Federated)
+        </h4>
+        <div>
+            Mode: <code>{mode}</code>, {moment().format('MMMM Do YYYY, h:mm:ss a')}
+        </div>
     </div>
 );

demo/fed/src/index.js

@@ -3,6 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 export default node => {
-    ReactDOM.render(<App foo={node.getAttribute('foo')} />, node);
+    ReactDOM.render(<App mode={node.getAttribute('mode')} />, node);
     return () => ReactDOM.unmountComponentAtNode(node);
 };

demo/host/package.json

@@ -25,9 +25,10 @@
     "@babel/preset-react": "7.10.1",
     "babel-loader": "8.1.0",
     "css-loader": "^3.5.3",
+    "html-webpack-plugin": "^4.3.0",
     "http-server": "0.12.3",
     "style-loader": "^1.2.1",
-    "html-webpack-plugin": "^4.3.0",
+    "url-loader": "4.1.0",
     "webpack": "^5.0.0-beta.17",
     "webpack-cli": "3.3.11",
     "webpack-dev-server": "3.11.0"

demo/host/src/index.css

@@ -8,4 +8,23 @@ html, body {
 
 .card, .navbar-container {
     margin-bottom: 1rem;
+}
+
+.logo {
+    background: no-repeat url("./images/ringcentral.png") center center;
+    background-size: contain;
+    width: 140px;
+    height: 50px;
+    margin-right: 20px;
+    display: block;
+}
+
+.header {
+    margin: 10px 0;
+    display: flex;
+    align-items: center;
+}
+
+.app-popup-bg {
+    z-index: 3 !important;
 }

demo/host/src/pages/FederationApp.js

@@ -34,7 +34,7 @@ export const FederationApp = memo(({logout}) => {
                     <span className="navbar-text">{render}</span>
                 </nav>
             )}
-            <Component foo="bar" />
+            <Component mode="JSONP" />
         </div>
     );
 });

demo/host/src/pages/FederationDirectApp.js

@@ -34,7 +34,7 @@ export const FederationDirectApp = memo(({logout}) => {
                     <span className="navbar-text">{render}</span>
                 </nav>
             )}
-            <Component direct foo="bar" />
+            <Component direct mode="Direct" />
         </div>
     );
 });

demo/host/src/pages/Index.js

@@ -1,3 +1,3 @@
 import React from 'react';
 
-export default () => <div>This is a placeholder component for index page. Please choose an app in the top menu.</div>;
+export default () => <p>This is a placeholder component for index page. Please choose an app in the top menu.</p>;

demo/host/src/pages/LoggedInWrapper.js

@@ -1,16 +1,22 @@
 import React, {memo} from 'react';
-import {Route, Switch} from 'react-router-dom';
+import {Link, Route, Switch} from 'react-router-dom';
 import App from './App';
 import Index from './Index';
 import {MenuApp} from './MenuApp';
 import {MenuAppIframe} from './MenuAppIframe';
 import {FederationApp} from './FederationApp';
 import {FederationDirectApp} from './FederationDirectApp';
+import logo from '../images/ringcentral.png';
 
 const logout = () => alert('Logout');
 
 const Layout = ({match}) => (
     <>
+        <div className="header">
+            <Link to="/" className="logo" />
+            <h3 className="font-weight-lighter text-primary">Web Apps</h3>
+        </div>
+
         <MenuApp logout={logout} />
         <MenuAppIframe logout={logout} />
 

demo/host/webpack.config.js

@@ -31,6 +31,10 @@ module.exports = {
                 test: /\.css?$/,
                 use: ['style-loader', 'css-loader'],
             },
+            {
+                test: /\.(png|jpg|gif)$/i,
+                loader: 'url-loader',
+            },
         ],
     },
     plugins: [

package.json

@@ -21,7 +21,8 @@
     "lint:staged": "lint-staged",
     "serve": "serve -l $PORT",
     "cypress": "cypress open",
-    "cypress:run": "cypress run"
+    "cypress:run": "cypress run",
+    "vercel": "vercel"
   },
   "author": "",
   "license": "ISC",
@@ -36,7 +37,8 @@
     "lint-staged": "9.2.0",
     "serve": "11.3.2",
     "start-server-and-test": "1.11.0",
-    "typescript": "3.8.3"
+    "typescript": "3.8.3",
+    "vercel": "19.1.0"
   },
   "workspaces": {
     "packages": [

vercel.json

@@ -0,0 +1,28 @@
+{
+  "name": "ringcentral-web-apps",
+  "scope": "[email protected]",
+  "rewrites": [
+    {
+      "source": "/application/(.*)",
+      "destination": "/demo/host/dist/index.html"
+    },
+    {
+      "source": "/demo/iframe/build/(.*)",
+      "destination": "/demo/iframe/build/index.html"
+    },
+    {
+      "source": "/demo/react-menu-iframe/build/(.*)",
+      "destination": "/demo/react-menu-iframe/build/index.html"
+    }
+  ],
+  "redirects": [
+    {
+      "source": "/demo/admin/",
+      "destination": "/demo/admin/index.html"
+    },
+    {
+      "source": "/",
+      "destination": "/application/apps"
+    }
+  ]
+}

yarn.lock

@@ -474,7 +474,7 @@
     "@babel/traverse" "^7.8.3"
     "@babel/types" "^7.8.3"
 
-"@babel/helper-compilation-targets@7.10.2", "@babel/helper-compilation-targets@^7.10.2", "@babel/helper-compilation-targets@^7.8.3", "@babel/helper-compilation-targets@^7.9.6":
+"@babel/helper-compilation-targets@^7.10.2", "@babel/helper-compilation-targets@^7.8.3", "@babel/helper-compilation-targets@^7.9.6":
   version "7.10.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.2.tgz#a17d9723b6e2c750299d2a14d4637c76936d8285"
   integrity sha512-hYgOhF4To2UTB4LTaZepN/4Pl9LD4gfbJx8A34mqoluT8TLbof1mhUlYuNWTEebONa8+UlCC4X0TEXu7AOUyGA==
@@ -3940,6 +3940,45 @@
     lodash.unescape "4.0.1"
     semver "5.5.0"
 
+"@vercel/[email protected]":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@vercel/build-utils/-/build-utils-2.4.0.tgz#c756a3804f072cc693ebe0bbcc1adcce61b9f15c"
+  integrity sha512-VRXMLBPDcpFUHQMgHdgYHBl9SRwqNFb43tgkMdTYaNml2HgqlLNvNuINKlqwB2/Q/tARIWcm4jmPKR0gu1CaEQ==
+
+"@vercel/[email protected]":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@vercel/go/-/go-1.1.2.tgz#0b0067a56616e4c56eeac8a8b33a9bb64a79be71"
+  integrity sha512-1k7w6gY2Uj4DVqvvqm5VXZZeCqmzV5Fw3T3hjfgt13WVXPVwYfXf50ya4VvwpF9/IEvXpAhXLRcHD7ZTCMoXKA==
+
+"@vercel/[email protected]":
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/@vercel/next/-/next-2.6.6.tgz#ec8a4fd8b8b058940010e491de2c41bb25fe1159"
+  integrity sha512-1Zx3PqDznaoCtFLd3DfDQ5nBkyr/8UbyUtrDR5aj7TXCi1BQ9jBzO9NGzpRmxZRNkVX4BFQTX2ESEBz8rKbLHw==
+
+"@vercel/[email protected]":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@vercel/node/-/node-1.7.0.tgz#f90412a05463edc29d34ab6a56abd02867181d66"
+  integrity sha512-UaG86cstaCEaNd8N1BAelysofzxi6Grhpg4Tq6UmYJuz7CqmRwsVhsqkK0u0dXFvH1uHjRUGSEwjndpKiAFfFg==
+  dependencies:
+    "@types/node" "*"
+    ts-node "8.9.1"
+    typescript "3.9.3"
+
+"@vercel/[email protected]":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@vercel/python/-/python-1.2.2.tgz#52e8e2a0d3a65153b8bd25a63db36b704aafde72"
+  integrity sha512-+rHfbjJaySdac59Oa11a7/nZzpXC98Kqw5tPh8DT1I5OG8YTfgJnwgfBoytZOAZZQBcggoJspnjAd+wGVCoVXw==
+
+"@vercel/[email protected]":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@vercel/ruby/-/ruby-1.2.2.tgz#0a6ef704d9eec7a88d3bf12f462cd52046b75361"
+  integrity sha512-5kKFNS84EvjHRI/umZqL31KdyvoWO05qbIeR3YHHJBCPSBIUlGimM0Wx7OsdAK+TMDzpWszBF/6bgk//KpmYbg==
+
+"@vercel/[email protected]":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@vercel/static-build/-/static-build-0.17.2.tgz#fa9963e951cada1059918837e7ca223bd31f58d8"
+  integrity sha512-jK7WUvZIaYqJJffQ1z7Q2wSbAWJhAv8SluMyLfGMox5hBIso/QOPd2Tnh5xnMGbib6U/4noEG3ekHr81l3Yo3w==
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
@@ -16030,6 +16069,14 @@ [email protected], source-map-support@^0.5.5, source-map-support@^0.5.6,
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@^0.5.17:
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
@@ -17012,6 +17059,17 @@ [email protected]:
     micromatch "^4.0.0"
     semver "^6.0.0"
 
+[email protected]:
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.9.1.tgz#2f857f46c47e91dcd28a14e052482eb14cfd65a5"
+  integrity sha512-yrq6ODsxEFTLz0R3BX2myf0WBCSQh9A+py8PBo1dCzWIOcvisbyH6akNKqDHMgXePF2kir5mm5JXJTH3OUJYOQ==
+  dependencies:
+    arg "^4.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    source-map-support "^0.5.17"
+    yn "3.1.1"
+
 ts-node@~8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.3.0.tgz#e4059618411371924a1fb5f3b125915f324efb57"
@@ -17117,6 +17175,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
   integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
+[email protected]:
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.3.tgz#d3ac8883a97c26139e42df5e93eeece33d610b8a"
+  integrity sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==
+
 [email protected]:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
@@ -17310,6 +17373,15 @@ [email protected]:
     mime "^2.0.3"
     schema-utils "^1.0.0"
 
+[email protected]:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.0.tgz#c7d6b0d6b0fccd51ab3ffc58a78d32b8d89a7be2"
+  integrity sha512-IzgAAIC8wRrg6NYkFIJY09vtktQcsvU8V6HhtQj9PTefbYImzLB1hufqo4m+RyM5N3mLx5BqJKccgxJS+W3kqw==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.26"
+    schema-utils "^2.6.5"
+
 url-loader@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.3.0.tgz#e0e2ef658f003efb8ca41b0f3ffbf76bab88658b"
@@ -17439,6 +17511,19 @@ vendors@^1.0.0:
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
+[email protected]:
+  version "19.1.0"
+  resolved "https://registry.yarnpkg.com/vercel/-/vercel-19.1.0.tgz#63db7e1d6b5c994ff0a35c8ce69bf4fe33115029"
+  integrity sha512-DWb7MfysrkiWQAar85fjcLUmOj9N7WjH93mwZw1SX1wDiVLkvcm/5of+DYCOfmJkt2YJoNiglx2JpLW8EDsDSQ==
+  dependencies:
+    "@vercel/build-utils" "2.4.0"
+    "@vercel/go" "1.1.2"
+    "@vercel/next" "2.6.6"
+    "@vercel/node" "1.7.0"
+    "@vercel/python" "1.2.2"
+    "@vercel/ruby" "1.2.2"
+    "@vercel/static-build" "0.17.2"
+
 [email protected]:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
@@ -18505,7 +18590,7 @@ [email protected], yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-yn@^3.0.0:
+yn@3.1.1, yn@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
   integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==