Fix Multi Env Templates (#45)

* fix: removing need for multi-env html templates

* fix: updating config to new context

* fix: rename template script, adding hardcoded paths to context, refactoring to use context in webpack configs

* fix: removing forced https

* fix: remove debug

* minor refactor to seperate directories from files

packages/cli/config/webpack.config.common.js

@@ -100,7 +100,7 @@ module.exports = (context) => {
       ),
 
       new HtmlWebpackPlugin({
-        template: path.join(context.scratchDir, 'index.html'),
+        template: path.join(context.scratchDir, context.indexPageTemplate),
         chunksSortMode: 'dependency'
       })
     ]

packages/cli/config/webpack.config.develop.js

@@ -48,12 +48,12 @@ module.exports = (context) => {
     plugins: [
       // new webpack.HotModuleReplacementPlugin(),
       new FilewatcherPlugin({
-        watchFileRegex: [`/${context.userWorkspace}/`], 
+        watchFileRegex: [`/${context.userWorkspace}/`],
         onReadyCallback: () => { 
           console.log(`Now serving Development Server available at http://${host}:${port}`);
         },
         // eslint-disable-next-line no-unused-vars
-        onChangeCallback: async () => {
+        onChangeCallback: async (path) => {
           rebuild();
         },
         usePolling: true,
@@ -64,17 +64,30 @@ module.exports = (context) => {
         fileName: 'manifest.json',
         publicPath
       }),
-      // TODO magic string paths (index.html)
       new HtmlWebpackPlugin({
-        filename: 'index.html',
-        template: path.join(context.scratchDir, 'index.dev.html'),
-        publicPath
+        template: path.join(context.scratchDir, context.indexPageTemplate),
+        spaIndexFallbackScript: `
+          <script>
+          (function(){
+              var redirect = sessionStorage.redirect;
+              delete sessionStorage.redirect;
+              if (redirect && redirect != location.href) {
+              history.replaceState(null, null, redirect);
+              }
+          })();
+          </script>
+        `
       }),
-      // TODO magic string paths (404.html)
       new HtmlWebpackPlugin({
-        filename: '404.html',
-        template: path.join(context.scratchDir, '404.dev.html'),
-        publicPath
+        filename: context.notFoundPageTemplate,
+        template: path.join(context.scratchDir, context.notFoundPageTemplate),
+        spaIndexFallbackScript: `
+          <script>
+            sessionStorage.redirect = location.href;
+          </script>
+      
+          <meta http-equiv="refresh" content="0;URL='${publicPath}'"></meta>
+        `
       })
     ]
   });

packages/cli/config/webpack.config.prod.js

@@ -16,9 +16,9 @@ module.exports = (context) => {
 
     plugins: [  
       new HtmlWebpackPlugin({
-        filename: '404.html',
-        template: path.join(context.scratchDir, '404.html'),
-        publicPath: configWithContext.output.publicPath
+        filename: context.notFoundPageTemplate,
+        template: path.join(context.scratchDir, context.notFoundPageTemplate),
+        publicPath: configWithContext.publicPath
       })
     ]
 

packages/cli/lib/init.js

@@ -3,6 +3,7 @@ const path = require('path');
 const greenwoodWorkspace = path.join(__dirname, '..');
 const defaultTemplateDir = path.join(greenwoodWorkspace, 'templates/');
 const defaultSrc = path.join(process.cwd(), 'src');
+const scratchDir = path.join(process.cwd(), './.greenwood/');
 
 const userWorkspace = fs.existsSync(defaultSrc)
   ? defaultSrc
@@ -25,11 +26,13 @@ module.exports = initContexts = async() => {
       const context = {
         userWorkspace,
         pagesDir,
-        scratchDir: path.join(process.cwd(), './.greenwood/'),
+        scratchDir,
         templatesDir,
         publicDir: path.join(process.cwd(), './public'),
         pageTemplate: 'page-template.js',
-        appTemplate: 'app-template.js'
+        appTemplate: 'app-template.js',
+        indexPageTemplate: 'index.html',
+        notFoundPageTemplate: '404.html'
       };
 
       // TODO allow per template overrides
@@ -49,8 +52,8 @@ module.exports = initContexts = async() => {
           'See https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/templates/app-template.js');
         }
       }
-      if (!fs.existsSync(context.scratchDir)) {
-        fs.mkdirSync(context.scratchDir);
+      if (!fs.existsSync(scratchDir)) {
+        fs.mkdirSync(scratchDir);
       }
       resolve(context);
     } catch (err) {

packages/cli/lib/scaffold.js

@@ -86,25 +86,17 @@ const writeRoutes = async(compilation) => {
 };
 
 // eslint-disable-next-line no-unused-vars
-const setupIndex = async(compilation) => {
+const setupIndex = async({ context }) => {
   return new Promise(async (resolve, reject) => {
-    const context = compilation.context;
-    let indexHtml = 'index.html';
-    let notFoundHtml = '404.html';
-    let devIndexHtml = 'index.dev.html';
-    let devNotFoundHtml = '404.dev.html';
-
     try {
-
-      // create redirect 404 pages for lit-redux-router + SPA fallback for development
-      if (process.env.NODE_ENV === 'development') {
-        fs.copyFileSync(path.resolve(context.templatesDir, devNotFoundHtml), path.join(context.scratchDir, devNotFoundHtml));
-        fs.copyFileSync(path.resolve(context.templatesDir, devIndexHtml), path.join(context.scratchDir, devIndexHtml));
-      }
-
-      fs.copyFileSync(path.resolve(context.templatesDir, notFoundHtml), path.join(context.scratchDir, notFoundHtml));
-      fs.copyFileSync(path.resolve(context.templatesDir, indexHtml), path.join(context.scratchDir, indexHtml));
-
+      fs.copyFileSync(
+        path.join(context.templatesDir, context.indexPageTemplate), 
+        path.join(context.scratchDir, context.indexPageTemplate)
+      );
+      fs.copyFileSync(
+        path.join(context.templatesDir, context.notFoundPageTemplate), 
+        path.join(context.scratchDir, context.notFoundPageTemplate)
+      );
       resolve();
     } catch (err) {
       reject(err);

packages/cli/lib/serialize.js

@@ -26,7 +26,7 @@ module.exports = serializeBuild = async (compilation) => {
         port: PORT,
         https: false,
         directory: compilation.context.publicDir,
-        spa: 'index.html'
+        spa: compilation.context.indexPageTemplate
       });
 
       await runBrowser(compilation);

packages/cli/templates/404.html

@@ -6,7 +6,8 @@
 
   <title>404 - Not Found</title>
 
-
+  <%= htmlWebpackPlugin.options.spaIndexFallbackScript %>
+
 </head>
 
 <body>

packages/cli/templates/index.html

@@ -31,6 +31,8 @@
 
     <!-- Web Components poyfill for Firefox -->
     <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.7/webcomponents-bundle.js"></script>
+
+    <%= htmlWebpackPlugin.options.spaIndexFallbackScript %>
 
     <style>
       * {
@@ -49,4 +51,4 @@
     <eve-app></eve-app>
 
   </body>
-</html>
+</html>