fix(pwa/icons): correct base url

prod-sample/sample-modules/frank-lloyd-root/0.0.3/package.json

@@ -26,6 +26,12 @@
   "devDependencies": {
     "@americanexpress/one-app-bundler": "^6.0.0",
     "babel-preset-amex": "^3.1.0",
-    "rimraf": "^2.5.2"
+    "rimraf": "^2.5.2",
+    "webpack": "^4.43.0"
+  },
+  "one-amex": {
+    "bundler": {
+      "webpackConfigPath": "webpack.config.js"
+    }
   }
 }

prod-sample/sample-modules/frank-lloyd-root/0.0.3/src/components/FrankLloydRoot.jsx

@@ -20,26 +20,27 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { fromJS } from 'immutable';
 import ModuleRoute from 'holocron-module-route';
+import { getModuleMap } from 'holocron';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import HelloWorldComponent from './HelloWorld';
 
 export function FrankLloydRoot({ children, config }) {
-  const cdnUrl = React.useMemo(() => config.get('cdnUrl'), [config]);
+  const baseUrl = React.useMemo(() => getModuleMap().getIn(['modules', 'frank-lloyd-root', 'baseUrl']), []);
   return (
     <React.Fragment>
       <Helmet
         title="Frank Lloyd Root"
         meta={[
           { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
-          { name: 'description', content: 'A Progressive Web App ready Holocron Module' },
-          { name: 'theme-color', content: '#FDB92D' },
+          { name: 'description', content: config.get('description') },
+          { name: 'theme-color', content: config.get('themeColor') },
         ]}
         link={[
           // favicon
-          { rel: 'icon', href: `${cdnUrl}modules/frank-lloyd-root/0.0.3/assets/pwa-icon-192px.png` },
+          { rel: 'icon', href: `${baseUrl}assets/pwa-icon-192px.png` },
           // icon ideally with a size of 192px (or 180px), it is added as the home icon
-          { rel: 'apple-touch-icon', href: `${cdnUrl}modules/frank-lloyd-root/0.0.3/assets/pwa-icon-180px.png` },
+          { rel: 'apple-touch-icon', href: `${baseUrl}assets/pwa-icon-180px.png` },
         ]}
       />
       <pre className="value-provided-from-config">{ config.get('someApiUrl') }</pre>
@@ -50,7 +51,7 @@ export function FrankLloydRoot({ children, config }) {
 
 FrankLloydRoot.childRoutes = () => [
   <ModuleRoute path="vitruvius" moduleName="vitruvius-franklin" />,
-  <ModuleRoute path="/success" component={HelloWorldComponent} />,
+  <ModuleRoute path="success" component={HelloWorldComponent} />,
   <ModuleRoute path="healthy-frank" moduleName="healthy-frank" />,
   <ModuleRoute path="demo/:moduleName" moduleName="preview-frank" />,
 ];

prod-sample/sample-modules/frank-lloyd-root/0.0.3/src/config.js

@@ -18,10 +18,16 @@ import csp from './csp';
 import pwa from './pwa';
 import createFrankLikeFetch from './createFrankLikeFetch';
 
+const remoteCdnUrl = process.env.SURGE_DOMAIN || '';
+const clientCdnUrl = process.env.NODE_ENV === 'development'
+  ? 'http://localhost:3001/static/'
+  : 'https://sample-cdn.frank/';
+const themeColor = '#FDB92D';
+const description = 'A Progressive Web App ready Holocron Module';
+
 export default {
   csp,
   pwa,
-  corsOrigins: [/\.example\.com$/],
   configureRequestLog: ({ req, log = {} }) => {
     const clonedLog = JSON.parse(JSON.stringify(log));
     const { cookies } = req;
@@ -34,6 +40,26 @@ export default {
     return clonedLog;
   },
   provideStateConfig: {
+    // by providing various web manifest values as config, they can both be used by
+    // the webManifest fn and the root module rendered content and achieve parity.
+    // For the root module, having the meta and links improves the browsing experience
+    // and can be used as fallback meta data where the webManifest is not supported.
+    description: {
+      server: description,
+      client: description,
+    },
+    themeColor: {
+      server: themeColor,
+      client: themeColor,
+    },
+    clientCdnUrl: {
+      server: clientCdnUrl,
+      client: clientCdnUrl,
+    },
+    remoteCdnUrl: {
+      server: remoteCdnUrl,
+      client: remoteCdnUrl,
+    },
     someApiUrl: {
       client: {
         development: 'https://internet-origin-dev.example.com/some-api/v1',

prod-sample/sample-modules/frank-lloyd-root/0.0.3/src/pwa.js

@@ -14,38 +14,55 @@
  * permissions and limitations under the License.
  */
 
-export const webManifest = (config) => ({
-  // like the service worker, we can set a scope which this manifest takes effect
-  scope: '/',
-  // when loading an installed PWA, we can set the starting url on entry/load
-  start_url: '/success',
-  name: 'Frank Lloyd Root',
-  short_name: 'frank lloyd root',
-  description: 'A Progressive Web App ready Holocron Module',
-  display: 'standalone',
-  background_color: '#FFF',
-  theme_color: '#FDB92D',
-  icons: [
-    {
-      src: `${config.cdnUrl}modules/frank-lloyd-root/0.0.3/assets/pwa-icon-180px.png`,
-      type: 'image/png',
-      sizes: '180x180',
-    },
-    {
-      src: `${config.cdnUrl}modules/frank-lloyd-root/0.0.3/assets/pwa-icon-192px.png`,
-      type: 'image/png',
-      sizes: '192x192',
-    },
-    {
-      src: `${config.cdnUrl}modules/frank-lloyd-root/0.0.3/assets/pwa-icon-512px.png`,
-      type: 'image/png',
-      sizes: '512x512',
-    },
-  ],
-});
+const scope = '/';
+
+export const webManifest = (config) => {
+  const {
+    cdnUrl = '', clientCdnUrl = '', remoteCdnUrl = '', themeColor, description,
+  } = config;
+  // if the cdnUrl starts with the remoteCdnUrl, we should rely on that for the base url
+  const baseUrl = remoteCdnUrl.startsWith(cdnUrl) ? remoteCdnUrl : clientCdnUrl || cdnUrl;
+  return {
+    // like the service worker, we can set a scope which this manifest takes effect
+    scope,
+    // when loading an installed PWA, we can set the starting url on entry/load
+    start_url: '/success',
+    // a summary of what this app is about
+    description,
+    // name is used to identify the icon created for app installs (on any device)
+    name: 'Frank Lloyd Root',
+    // the short name is the same as name, except used if name is too long
+    short_name: 'frank lloyd root',
+    // UI options
+    // the display sets the web view that a PWA is run in
+    display: 'standalone',
+    // background and theme colors are used with the native UI and splash screens
+    // to control the colors used by each color respectively
+    background_color: '#FFF',
+    theme_color: themeColor,
+    // icons allow us to add sizes for icons for various devices and the splash screen to use
+    icons: [
+      {
+        src: `${baseUrl}modules/frank-lloyd-root/0.0.3/assets/pwa-icon-180px.png`,
+        type: 'image/png',
+        sizes: '180x180',
+      },
+      {
+        src: `${baseUrl}modules/frank-lloyd-root/0.0.3/assets/pwa-icon-192px.png`,
+        type: 'image/png',
+        sizes: '192x192',
+      },
+      {
+        src: `${baseUrl}modules/frank-lloyd-root/0.0.3/assets/pwa-splash-512px.png`,
+        type: 'image/png',
+        sizes: '512x512',
+      },
+    ],
+  };
+};
 
 export default {
   serviceWorker: true,
-  scope: '/',
+  scope,
   webManifest,
 };

prod-sample/sample-modules/frank-lloyd-root/0.0.3/webpack.config.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 American Express Travel Related Services Company, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+const webpack = require('webpack');
+
+module.exports = {
+  plugins: [
+    new webpack.EnvironmentPlugin([
+      'SURGE_DOMAIN',
+    ]),
+  ],
+};