Integrated Webpack HTML Plugin.

jest.config.js

@@ -135,7 +135,14 @@ const jestConfig = {
         configureProject('upward-js', 'Upward JS', () => ({
             testEnvironment: 'node'
         })),
-        configureProject('venia-concept', 'Venia Storefront', testVenia),
+        configureProject('venia-concept', 'Venia Storefront', inPackage => {
+            const veniaConceptConfig = testVenia(inPackage);
+            veniaConceptConfig.setupFiles = [
+                ...veniaConceptConfig.setupFilesAfterEnv,
+                inPackage('scripts/fetch-mock.js')
+            ];
+            return veniaConceptConfig;
+        }),
         configureProject('venia-ui', 'Venia UI', testVenia),
         // Test any root CI scripts as well, to ensure stable CI behavior.
         configureProject('scripts', 'CI Scripts', () => ({
@@ -175,7 +182,10 @@ const jestConfig = {
         '__fixtures__',
         '__helpers__',
         '__snapshots__'
-    ]
+    ],
+    globals: {
+        STORE_NAME: 'Venia'
+    }
 };
 
 if (process.env.npm_lifecycle_event === 'test:ci') {

packages/pwa-buildpack/lib/WebpackTools/PWADevServer.js

@@ -55,7 +55,6 @@ const PWADevServer = {
             contentBase: false, // UpwardDevServerPlugin serves static files
             compress: true,
             hot: true,
-            writeToDisk: true,
             watchOptions: {
                 // polling is CPU intensive - provide the option to turn it on if needed
                 poll: !!parseInt(devServer.watchOptionsUsePolling) || false
@@ -237,7 +236,7 @@ const PWADevServer = {
             new UpwardDevServerPlugin(
                 webpackDevServerOptions,
                 process.env,
-                path.resolve(webpackConfig.output.path, upwardPath)
+                path.resolve(webpackConfig.context, upwardPath)
             )
         );
 

packages/venia-concept/package.json

@@ -87,9 +87,11 @@
     "graphql-cli": "~3.0.11",
     "graphql-cli-validate-magento-pwa-queries": "~1.0.0",
     "graphql-tag": "~2.10.1",
+    "html-webpack-plugin": "~3.2.0",
     "informed": "~2.1.13",
     "lodash.over": "~4.7.0",
     "memoize-one": "~5.0.0",
+    "node-fetch": "~2.6.0",
     "prettier": "~1.16.4",
     "prop-types": "~15.7.2",
     "react": "~16.9.0",

packages/venia-concept/scripts/fetch-mock.js

@@ -0,0 +1 @@
+global.fetch = require('jest-fetch-mock');

packages/venia-concept/src/MediaBackendURLFetcherPlugin.js

@@ -0,0 +1,40 @@
+const fetch = require('node-fetch');
+
+const getMediaURL = () =>
+    fetch(new URL('graphql', process.env.MAGENTO_BACKEND_URL).toString(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            query: 'query { storeConfig { secure_base_media_url } }'
+        })
+    })
+        .then(result => result.json())
+        .then(json => json.data.storeConfig.secure_base_media_url)
+        .catch(err => {
+            console.error(err);
+            return '';
+        });
+
+/**
+ * Webpack plugin that makes GraphQL call to get the Media
+ * Backend URL which is needed by WebpackHTMLPlugin to be
+ * replace in template.html. This is done by fetching the URL
+ * from GraphQL and placing it in global.MAGENTO_MEDIA_BACKEND_URL
+ * for the WebpackHTMLPlugin to pickup.
+ */
+class MediaBackendURLFetcherPlugin {
+    apply(compiler) {
+        compiler.hooks.emit.tapPromise(
+            'MediaBackendURLFetcherPlugin',
+            () =>
+                new Promise(resolve => {
+                    getMediaURL().then(url => {
+                        global.MAGENTO_MEDIA_BACKEND_URL = url;
+                        resolve();
+                    });
+                })
+        );
+    }
+}
+
+module.exports = MediaBackendURLFetcherPlugin;

packages/venia-concept/src/__tests__/MediaBackendURLFetcherPlugin.spec.js

@@ -0,0 +1,53 @@
+const MediaBackendURLFetcherPlugin = require('../MediaBackendURLFetcherPlugin');
+
+const tapPromise = jest.fn();
+
+const compiler = {
+    hooks: {
+        emit: {
+            tapPromise
+        }
+    }
+};
+
+beforeEach(() => {
+    process.env.MAGENTO_BACKEND_URL =
+        'https://venia-cicd-lrov2hi-mfwmkrjfqvbjk.us-4.magentosite.cloud/';
+    fetch.resetMocks();
+});
+
+test('The plugin prototype should have apply function in its Prototype', () => {
+    expect(
+        MediaBackendURLFetcherPlugin.prototype.hasOwnProperty('apply')
+    ).toBeTruthy();
+});
+
+test('tapPromise function should be called on compiler hooks', () => {
+    const mediaBackendURLFetcher = new MediaBackendURLFetcherPlugin();
+    mediaBackendURLFetcher.apply(compiler);
+    expect(tapPromise.mock.calls[0][0]).toBe('MediaBackendURLFetcherPlugin');
+    expect(tapPromise.mock.calls[0][1] instanceof Function).toBeTruthy();
+});
+
+test('second argument to tapPromise should return a Promise which when resolved should set global.MAGENTO_MEDIA_BACKEND_URL to a URL', () => {
+    const expectedMediaURL =
+        'https://venia-cicd-lrov2hi-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/';
+    fetch.mockResponseOnce(
+        JSON.stringify({
+            data: {
+                storeConfig: {
+                    secure_base_media_url: expectedMediaURL
+                }
+            }
+        })
+    );
+
+    expect(global.MAGENTO_MEDIA_BACKEND_URL).toBe(undefined);
+
+    const mediaBackendURLFetcher = new MediaBackendURLFetcherPlugin();
+    mediaBackendURLFetcher.apply(compiler);
+
+    return tapPromise.mock.calls[0][1].call().then(() => {
+        expect(global.MAGENTO_MEDIA_BACKEND_URL).toBe(expectedMediaURL);
+    });
+});

packages/venia-concept/template.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" data-image-optimizing-origin="<%= process.env.IMAGE_OPTIMIZING_ORIGIN %>" data-media-backend="<%= global.MAGENTO_MEDIA_BACKEND_URL %>">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="theme-color" content="#ff6334">
+        <link rel="manifest" href="/static/manifest.json">
+
+        <title>Home Page - <%= STORE_NAME %></title>
+
+        <!--
+            Apple Specific Tags
+
+            To be included until Safari supports WebAppManifest
+            See Docs:
+            - https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
+            - https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
+        -->
+        <!--
+            Apple Icons for Homescreen
+            Sizes: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
+        -->
+        <link rel="apple-touch-icon" href="/icons/venia_square_57.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
+        <link rel="preconnect" href="<%= process.env.MAGENTO_BACKEND_URL %>">
+
+        <style type="text/css">
+            /* vietnamese */
+            @font-face {
+              font-family: 'Muli';
+              font-style: normal;
+              font-weight: 300;
+              font-display: swap;
+              src: local('Muli Light'), local('Muli-Light'), url(https://fonts.gstatic.com/s/muli/v13/7Au_p_0qiz-adZnkOCr2z24PMFk-0g.woff2) format('woff2');
+              unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+            }
+            /* latin-ext */
+            @font-face {
+              font-family: 'Muli';
+              font-style: normal;
+              font-weight: 300;
+              font-display: swap;
+              src: local('Muli Light'), local('Muli-Light'), url(https://fonts.gstatic.com/s/muli/v13/7Au_p_0qiz-adZnkOCv2z24PMFk-0g.woff2) format('woff2');
+              unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+            }
+            /* latin */
+            @font-face {
+              font-family: 'Muli';
+              font-style: normal;
+              font-weight: 300;
+              font-display: swap;
+              src: local('Muli Light'), local('Muli-Light'), url(https://fonts.gstatic.com/s/muli/v13/7Au_p_0qiz-adZnkOCX2z24PMFk.woff2) format('woff2');
+              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+            }
+          </style>
+    </head>
+    <body>
+        <div id="root" />
+    </body>
+</html>

packages/venia-concept/webpack.config.js

@@ -1,4 +1,7 @@
 const { configureWebpack } = require('@magento/pwa-buildpack');
+const { DefinePlugin } = require('webpack');
+const HTMLWebpackPlugin = require('html-webpack-plugin');
+const MediaBackendUrlFetcherPlugin = require('./src/MediaBackendURLFetcherPlugin');
 
 module.exports = async env => {
     const config = await configureWebpack({
@@ -36,13 +39,33 @@ module.exports = async env => {
         env
     });
 
-    // configureWebpack() returns a regular Webpack configuration object.
-    // You can customize the build by mutating the object here, as in
-    // this example:
+    /**
+     * configureWebpack() returns a regular Webpack configuration object.
+     * You can customize the build by mutating the object here, as in
+     * this example. Since it's a regular Webpack configuration, the object
+     * supports the `module.noParse` option in Webpack, documented here:
+     * https://webpack.js.org/configuration/module/#modulenoparse
+     */
     config.module.noParse = [/braintree\-web\-drop\-in/];
-    // Since it's a regular Webpack configuration, the object supports the
-    // `module.noParse` option in Webpack, documented here:
-    // https://webpack.js.org/configuration/module/#modulenoparse
+    config.plugins = [
+        ...config.plugins,
+        new DefinePlugin({
+            /**
+             * Make sure to add the same constants to
+             * the globals object in jest.config.js.
+             */
+            STORE_NAME: JSON.stringify('Venia')
+        }),
+        new MediaBackendUrlFetcherPlugin(),
+        new HTMLWebpackPlugin({
+            filename: 'index.html',
+            template: './template.html',
+            minify: {
+                collapseWhitespace: true,
+                removeComments: true
+            }
+        })
+    ];
 
     return config;
 };

packages/venia-ui/lib/RootComponents/Product/product.js

@@ -61,7 +61,7 @@ class Product extends Component {
 
                     return (
                         <Fragment>
-                            <Title>{`${product.name} - Venia`}</Title>
+                            <Title>{`${product.name} - ${STORE_NAME}`}</Title>
                             <ProductFullDetail
                                 product={this.mapProduct(product)}
                                 addToCart={this.props.addItemToCart}

packages/venia-ui/lib/components/App/__tests__/app.spec.js

@@ -59,6 +59,10 @@ const getAndConfirmProps = (parent, type, props = {}) => {
     return instance;
 };
 
+beforeAll(() => {
+    global.STORE_NAME = 'Venia';
+});
+
 afterAll(() => window.location.reload.mockRestore());
 
 test('renders a full page with onlineIndicator and routes', () => {

packages/venia-ui/lib/components/App/app.js

@@ -123,7 +123,7 @@ const App = props => {
 
     return (
         <HeadProvider>
-            <Title>{'Home Page - Venia'}</Title>
+            <Title>{`Home Page - ${STORE_NAME}`}</Title>
             <Main
                 isMasked={overlay}
                 hasBeenOffline={hasBeenOffline}

packages/venia-ui/static/manifest.json

@@ -1,23 +1,26 @@
 {
-  "name": "Venia",
-  "short_name": "Venia",
-  "start_url": "/",
-  "theme_color": "#ff6334",
-  "display": "standalone",
-  "background_color": "#fff",
-  "description": "Shop the look",
-  "icons": [{
-    "src": "/icons/venia_circle_144.png",
-    "sizes": "144x144",
-    "type": "image/png"
-  },{
-    "src": "/icons/venia_circle_192.png",
-    "sizes": "192x192",
-    "type": "image/png"
-  },{
-    "src": "/icons/venia_circle_512.png",
-    "sizes": "512x512",
-    "type": "image/png"
-  }
-  ]
+    "name": "Venia",
+    "short_name": "Venia",
+    "start_url": "/",
+    "theme_color": "#ff6334",
+    "display": "standalone",
+    "background_color": "#fff",
+    "description": "Shop the look",
+    "icons": [
+        {
+            "src": "/static/icons/venia_circle_144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/venia_circle_192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icons/venia_circle_512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
 }