fix: bundle and expose index.pug (#34)

Author: patrickmichalina

package-lock.json

@@ -72,12 +72,14 @@
     "@angular/compiler-cli": "^6.1.0-beta.3",
     "ajv": "^6.5.2",
     "chalk": "^2.4.1",
+    "consolidate": "^0.15.1",
     "favicons": "^5.1.1",
     "fuse-box": "^3.3.0",
     "iltorb": "^2.3.2",
     "inquirer": "^6.0.0",
     "ng2-fused": "^0.5.1",
     "npm": "^6.1.0",
+    "pug": "^2.0.3",
     "rxjs": "^6.2.1",
     "ts-node": "^7.0.0",
     "tslint": "^5.10.0",

package.json

@@ -7,7 +7,8 @@ import {
   QuantumPlugin,
   RawPlugin,
   SassPlugin,
-  EnvPlugin
+  EnvPlugin,
+  WebIndexPlugin
 } from 'fuse-box'
 import { resolve } from 'path'
 import { NgProdPlugin } from '../fusebox/ng.prod.plugin'
@@ -80,6 +81,18 @@ function serve(isProdBuild = false) {
           isAotBuild && NgAotFactoryPlugin(),
           Ng2TemplatePlugin(),
           ['*.component.html', RawPlugin()],
+          WebIndexPlugin({
+            title: 'test',
+            bundles: ['app', 'vendor'],
+            path: 'js',
+            target: '../index.html',
+            template: resolve('src/app/index.pug'),
+            engine: 'pug',
+            locals: {
+              pageTitle: 'FUSING ANGULAR',
+              isLocalDev: !isProdBuild
+            }
+          }),
           NgProdPlugin({ enabled: isProdBuild }),
           NgPolyfillPlugin(),
           [
@@ -92,6 +105,7 @@ function serve(isProdBuild = false) {
             } as any),
             RawPlugin()
           ],
+
           isProdBuild &&
             QuantumPlugin({
               warnings: false,

src/commands/serve.ts

@@ -4,7 +4,8 @@ import {
   appRoutingModuleTemplate,
   appSharedModuleTemplate,
   appComponentCssTemplate,
-  appComponentHtmlTemplate
+  appComponentHtmlTemplate,
+  appIndex
 } from '../templates/core/app'
 import { writeFile_, mkDirAndContinueIfExists_ } from '../utilities/rx-fs'
 import { forkJoin } from 'rxjs'
@@ -57,7 +58,8 @@ export function generateCoreAngularApp(projectDir: string, universal = true) {
         ),
         writeFile_(`${baseDir}/app.component.ts`, appComponentTemplate),
         writeFile_(`${baseDir}/app.component.css`, appComponentCssTemplate), // TODO: write component generator function instead
-        writeFile_(`${baseDir}/app.component.html`, appComponentHtmlTemplate)
+        writeFile_(`${baseDir}/app.component.html`, appComponentHtmlTemplate),
+        writeFile_(`${baseDir}/index.pug`, appIndex)
       ])
     ),
     flatMap(() =>

src/generators/angular-core.gen.ts

@@ -1,4 +1,4 @@
-// apply global styles here
+/* apply global styles here */
 
 app-root {
 

src/templates/core/app/app.component.css.txt

@@ -0,0 +1,12 @@
+doctype html
+html(lang="en")
+  head
+    title= pageTitle
+    base(href="/")
+    meta(charset="utf-8")
+    meta(name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0")
+  body
+    app-root
+    | $bundles
+    if isLocalDev
+      script(src="/reload/reload.js")

src/templates/core/app/index.pug.txt

@@ -5,6 +5,7 @@ import * as appRoutingModuleTemplate from './app.routing.module.ts.txt'
 import * as appComponentCssTemplate from './app.component.css.txt'
 import * as appComponentHtmlTemplate from './app.component.html.txt'
 import * as homeComponentTemplate from './home.component.ts.txt'
+import * as appIndex from './index.pug.txt'
 
 export {
   appModuleTemplate,
@@ -13,5 +14,6 @@ export {
   appRoutingModuleTemplate,
   homeComponentTemplate,
   appComponentCssTemplate,
-  appComponentHtmlTemplate
+  appComponentHtmlTemplate,
+  appIndex
 }

src/templates/core/app/index.ts

@@ -3,7 +3,7 @@ import * as cookieParser from 'cookie-parser'
 import { resolve } from 'path'
 import { ngExpressEngine } from '@nguniversal/express-engine'
 import { AppServerModule } from './server.angular.module'
-import { stat, writeFile, createReadStream } from 'fs'
+import { stat, createReadStream } from 'fs'
 
 const environment = JSON.parse(process.env.FUSING_ANGULAR || '{}')
 const isLocalDevelopmentServer = environment.name === 'DEVELOPMENT'
@@ -25,6 +25,7 @@ expressApp.use(cookieParser())
 expressApp.set('x-powered-by', false)
 expressApp.set('etag', false)
 expressApp.set('view engine', 'html')
+expressApp.set('views', publicDir)
 
 expressApp.engine('html', ngExpressEngine({ bootstrap: AppServerModule }))
 
@@ -76,42 +77,11 @@ expressApp.get('/js**', (req, res) => {
   }
 })
 
-const virtualIndex = (req: express.Request,
-  res: express.Response, document: string, path = `${publicDir}/index.html`) => {
-
-  const resolvedPath = resolve(path)
-  stat(resolvedPath, (err, stats) => {
-    if (err) {
-      writeFile(resolvedPath, '', err => {
-        virtualIndex(req, res, document, path)
-      })
-    } else {
-      res.render(resolvedPath, {
-        req,
-        res,
-        document
-      })
-    }
-  })
-}
-
 expressApp.get('**', (req, res) => {
-  const document = `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Fusing Angular</title>
-    <base href="/">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <body>
-    <app-root></app-root>
-    <script src="/js/vendor.js"></script>
-    <script src="/js/app.js"></script>
-    ${isLocalDevelopmentServer ? '<script src="/reload/reload.js"></script>' : ''}
-  </body>
-</html>`
-  virtualIndex(req, res, document)
+  return res.render('index', {
+    req,
+    res
+  })
 })
 
 // app.use('/ngsw.json', express.static(`${dir}/ngsw.json`, staticOptions))