TerriaJS · soyarsauce · Jun 24, 2019 · Jun 24, 2019 · Jun 24, 2019 · Jun 24, 2019
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,8 @@ node_modules/
 .idea/
 wwwroot/build/
 wwwroot/doc/
+wwwroot/prerendered/
+wwwroot/index.html
 npm-debug.log
 version.js
 wwwroot/init/nm.json

diff --git a/buildprocess/webpack.config.js b/buildprocess/webpack.config.js
@@ -156,5 +156,88 @@ module.exports = function(devMode, hot) {
         }
     };
     config.resolve.alias['terriajs-variables'] = require.resolve('../lib/Styles/variables.scss');
+
+    // Disable this block if you wish to opt out of pre-rendering
+    if (!devMode) {
+        var configJsonPath = fs.readFileSync(path.resolve(__dirname, '..','wwwroot', 'config.json'), 'utf8');
+        var configJson = json5.parse(configJsonPath);
+        var prerenderRoutes =
+            (configJson &&
+                configJson.initializationUrls &&
+                configJson.initializationUrls.length > 0 &&
+                generateRoutes(configJson.initializationUrls)) ||
+            [];
+        var appBaseUrl =
+            (configJson &&
+                configJson.parameters &&
+                configJson.parameters.appBaseUrl &&
+                configJson.parameters.appBaseUrl.length > 0 &&
+                configJson.parameters.appBaseUrl);
+
+        console.log('The following routes generated from config.json\'s initializationUrls will be prerendered:');
+        console.log(prerenderRoutes);
+
+        if (appBaseUrl) {
+            try {
+                console.log('Attempting to write sitemap with appBaseUrl: ', appBaseUrl);
+                var sitemap = generateTerriaSitemap(appBaseUrl, prerenderRoutes);
+                var sitemapPath = path.resolve(__dirname, '..', 'wwwroot', 'sitemap.xml');
+                fs.writeFileSync(sitemapPath, new Buffer(sitemap));
+                console.log('Wrote out sitemap to: ' + sitemapPath);
+            } catch (e) {
+                console.error("Couldn't generate sitemap?", e);
+            }
+        } else {
+            console.warn("Warning - no appBaseUrl specified, no sitemap will be generated.")
+        }
+      config.plugins = [
+        ...config.plugins,
+        new webpack.DefinePlugin({
+          // styled-component uses CSSOM for rendering styles,
+          // but when pre-rendering, we want all styles to be applied via the DOM instead.
+          // This env variable instructs styled-component to use DOM instead of CSSOM
+          // for applying styles
+          'process.env.SC_DISABLE_SPEEDY': "true",
+        }),
+        new PrerenderSPAPlugin({
+            staticDir: path.resolve(__dirname, '..', 'wwwroot', ),
+            outputDir: path.resolve(__dirname, '..', 'wwwroot', 'prerendered'),
+            indexPath: path.resolve(__dirname, '..', 'wwwroot', 'index.html'),
+            routes: prerenderRoutes,
+            server: {
+              // If a server is running in the default terria port
+              // use it to proxy the following paths
+              proxy: {
+                "/proxyabledomains": {
+                  target: 'http://localhost:3001'
+                },
+                "/proxy": {
+                  target: 'http://localhost:3001'
+                }
+              }
+            },
+            renderer: new Renderer({
+                renderAfterDocumentEvent: 'prerender-end',
+                // If you run out of memory, try a lower value here
+                maxConcurrentRoutes: 12,
+                // headless: false, // set to false for debugging
+                timeout: 5000
+            }),
+            postProcess(context) {
+                // Hide any errors or popups in the rendered page.
+                const bodyTag = "<body>";
+                const catalogzIndexOverride = `
+                    <style id="catalogStyleOverride" type="text/css">
+                        .tjs-explorer-window__modal-wrapper {
+                            z-index:1000000 !important;
+                        }
+                    </style>
+                `;
+                const htmlSplit = context.html.split(bodyTag); // Only one <body> tag so it'll be split into 2
+                context.html = htmlSplit[0] + bodyTag + catalogzIndexOverride + htmlSplit[1];
+                return context;
+            }
+        })];
+    }
     return configureWebpackForTerriaJS(path.dirname(require.resolve('terriajs/package.json')), config, devMode, hot, MiniCssExtractPlugin);
 };
diff --git a/entry.js b/entry.js
@@ -16,7 +16,20 @@ function loadMainScript() {
 }
 
 function createLoader() {
-    const loaderDiv = document.createElement('div');
+    // We only want this briefly so the explorer-window modal can be displayed
+    // until we load in other modal-like-things like disclaimer windows,
+    // but also other notification windows like error messages
+    // So, reset it back to app defaults after
+    let catalogzIndexOverride = document.createElement('style');
+    catalogzIndexOverride.setAttribute('type', 'text/css');
+    catalogzIndexOverride.innerHTML = `
+        .tjs-explorer-window__modal-wrapper {
+            z-index:10000 !important;
+        }
+    `;
+    document.body.appendChild(catalogzIndexOverride);
+
+    let loaderDiv = document.createElement('div');
     loaderDiv.classList.add("loader-ui");
     const loaderGif = document.createElement('img');
     loaderGif.src = globeGif;
@@ -38,10 +51,25 @@ function createLoader() {
         loadMainScript().catch(() => {
             // Ignore errors and try to show the map anyway
         }).then(() => {
-            loaderDiv.classList.add('loader-ui-hide');
-            setTimeout(()=> {
-                document.body.removeChild(loaderDiv);
-            }, 2000);
+            // loaderDiv.classList.add('loader-ui-hide');
+            // setTimeout(()=> {
+            //     document.body.removeChild(loaderDiv);
+            // }, 2000);
+          const removeLoaderElements = () => {
+              if (loaderDiv) {
+                  document.body.removeChild(loaderDiv);
+                  loaderDiv=null;
+              }
+              if (catalogzIndexOverride) {
+                  document.body.removeChild(catalogzIndexOverride);
+                  catalogzIndexOverride=null;
+              }
+          };
+          loaderDiv.classList.add('loader-ui-hide');
+          loaderDiv.addEventListener('transitionend', removeLoaderElements);
+          // also fallback with setTimeout here
+          // so we can remove the elements anyway in case of transitionend event failure
+          setTimeout(removeLoaderElements, 2000);
         });
     });
 }

diff --git a/gulpfile.js b/gulpfile.js
@@ -41,17 +41,30 @@ gulp.task('write-version', function(done) {
     done();
 });
 
-gulp.task('build-app', gulp.series('check-terriajs-dependencies', 'write-version', function buildApp(done) {
+gulp.task('render-index', function renderIndex(done) {
+  var ejs = require('ejs');
+  var JSON5 = require('json5');
+  var serverConfig = JSON5.parse(fs.readFileSync('devserverconfig.json', 'utf8'));
+
+  var index = fs.readFileSync('wwwroot/index.ejs', 'utf8');
+  var baseHrefFromConfig = serverConfig.baseHref;
+  var indexResult = ejs.render(index, { baseHref: baseHrefFromConfig || "/"});
+
+  fs.writeFileSync(path.join('wwwroot', 'index.html'), indexResult);
+  done();
+});
+
+gulp.task('build-app', gulp.parallel('render-index', gulp.series('check-terriajs-dependencies', 'write-version', function buildApp(done) {
     var runWebpack = require('terriajs/buildprocess/runWebpack.js');
     var webpack = require('webpack');
     var webpackConfig = require('./buildprocess/webpack.config.js')(true);
 
     checkForDuplicateCesium();
 
     runWebpack(webpack, webpackConfig, done);
-}));
+})));
 
-gulp.task('release-app', gulp.series('check-terriajs-dependencies', 'write-version', function releaseApp(done) {
+gulp.task('release-app', gulp.parallel('render-index', gulp.series('check-terriajs-dependencies', 'write-version', function releaseApp(done) {
     var runWebpack = require('terriajs/buildprocess/runWebpack.js');
     var webpack = require('webpack');
     var webpackConfig = require('./buildprocess/webpack.config.js')(false);
@@ -61,9 +74,13 @@ gulp.task('release-app', gulp.series('check-terriajs-dependencies', 'write-versi
     runWebpack(webpack, Object.assign({}, webpackConfig, {
         plugins: webpackConfig.plugins || []
     }), done);
+})));
+
+gulp.task('watch-render-index', gulp.series('render-index', function watchRenderIndex() {
+  return gulp.watch(['wwwroot/index.ejs', 'devserverconfig.json'], gulp.series('render-index'));
 }));
 
-gulp.task('watch-app', gulp.series('check-terriajs-dependencies', function watchApp(done) {
+gulp.task('watch-app', gulp.parallel('watch-render-index', gulp.series('check-terriajs-dependencies', function watchApp(done) {
     var fs = require('fs');
     var watchWebpack = require('terriajs/buildprocess/watchWebpack');
     var webpack = require('webpack');
@@ -73,7 +90,7 @@ gulp.task('watch-app', gulp.series('check-terriajs-dependencies', function watch
 
     fs.writeFileSync('version.js', 'module.exports = \'Development Build\';');
     watchWebpack(webpack, webpackConfig, done);
-}));
+})));
 
 gulp.task('copy-terriajs-assets', function() {
     var terriaWebRoot = path.join(getPackageRoot('terriajs'), 'wwwroot');