fix: server reload, race condition and environment variable stubbed (#22)

Author: patrickmichalina

package-lock.json

@@ -61,7 +61,7 @@
     "prettier": "^1.13.5",
     "pretty-quick": "^1.6.0",
     "semantic-release": "^15.6.0",
-    "sinon": "^6.0.0",
+    "sinon": "^6.0.1",
     "tslint": "^5.10.0",
     "tslint-immutable": "^4.6.0",
     "validate-commit-msg": "^2.14.0",
@@ -78,7 +78,7 @@
     "ng2-fused": "^0.5.1",
     "npm": "^6.1.0",
     "rxjs": "^6.2.1",
-    "ts-node": "^6.1.2",
+    "ts-node": "^7.0.0",
     "typescript": "2.7.2",
     "uglify-js": "^3.4.1",
     "yargs": "^11.0.0"

package.json

@@ -6,14 +6,16 @@ import {
   JSONPlugin,
   QuantumPlugin,
   RawPlugin,
-  SassPlugin
+  SassPlugin,
+  EnvPlugin
 } from 'fuse-box'
 import { resolve } from 'path'
 import { NgProdPlugin } from '../fusebox/ng.prod.plugin'
 import { NgPolyfillPlugin } from '../fusebox/ng.polyfill.plugin'
 import { NgCompilerPlugin } from '../fusebox/ng.compiler.plugin'
 import readConfig_ from '../utilities/read-config'
 import { Ng2TemplatePlugin } from 'ng2-fused'
+import { FuseProcess } from 'fuse-box/FuseProcess'
 
 command(
   'serve [port][prod][aot][sw]',
@@ -92,9 +94,6 @@ function serve(isProdBuild = false) {
               uglify: config.fusebox.browser.prod.uglify,
               treeshake: config.fusebox.browser.prod.treeshake,
               bakeApiIntoBundle: 'vendor'
-              // replaceProcessEnv: false,
-              // processPolyfill: true,
-              // ensureES5: true
             })
         ] as any
       })
@@ -107,6 +106,9 @@ function serve(isProdBuild = false) {
         homeDir,
         output: `${serverOutput}/$name.js`,
         plugins: [
+          EnvPlugin({
+            FUSING_ANGULAR: JSON.stringify(config.environment)
+          }),
           JSONPlugin(),
           Ng2TemplatePlugin(),
           ['*.component.html', RawPlugin()],
@@ -131,23 +133,31 @@ function serve(isProdBuild = false) {
         ]
       })
 
+      // tslint:disable-next-line:no-let
+      let prevServerProcess: FuseProcess
+
       fuseBrowser
         .bundle('vendor')
         .watch(watchDir)
         .instructions(` ~ ${browserModule}`)
+        .completed(fn => {
+          fuseServer
+            .bundle('server')
+            .instructions(` > [${config.fusebox.server.serverModule}]`)
+            .completed(proc => {
+              prevServerProcess && prevServerProcess.kill()
+              proc.start()
+              prevServerProcess = proc
+            })
+          fuseServer.run()
+        })
 
       fuseBrowser
         .bundle('app')
         .watch(watchDir)
         .instructions(` !> [${browserModule}]`)
 
-      fuseServer
-        .bundle('server')
-        .watch(watchDir)
-        .instructions(` > [${config.fusebox.server.serverModule}]`)
-        .completed(proc => proc.start())
-
-      fuseServer.run()
+      logInfo('Bundling your application, this may take some time...')
       fuseBrowser.run()
     })
 }

src/commands/serve.ts

@@ -0,0 +1,37 @@
+import { Plugin, BundleProducer } from 'fuse-box'
+import { gzipSync } from 'zlib'
+
+// tslint:disable:no-class
+// tslint:disable:no-this
+// tslint:disable:no-if-statement
+// tslint:disable:no-object-mutation
+// tslint:disable:readonly-keyword
+const defaults: GzipPluginOptions = {
+  enabled: true
+}
+
+export interface GzipPluginOptions {
+  enabled?: boolean
+  fileTest?: string
+}
+
+export class GzipPluginClass implements Plugin {
+  constructor(public opts: GzipPluginOptions = defaults) {
+    this.opts = {
+      ...defaults,
+      ...opts
+    }
+  }
+  producerEnd?(producer: BundleProducer): any {
+    return Promise.all(
+      Array.from(producer.bundles).map(bundle => {
+        const zipThis = bundle[1].context.source.getResult().content
+        const zipped = gzipSync(zipThis, { level: 9 })
+        return bundle[1].context.output.writeCurrent(zipped)
+      })
+    )
+  }
+}
+
+export const GzipPlugin = (options?: GzipPluginOptions) =>
+  new GzipPluginClass(options)

src/fusebox/gzip.plugin.ts

@@ -29,7 +29,8 @@ export const ANGULAR_UNIVERSAL_DEPS = {
 export const ANGULAR_UNIVERSAL_DEV_DEPS = {
   '@types/compression': '^0.0.36',
   '@types/cookie-parser': '^1.4.1',
-  '@types/express': '^4.16.0'
+  '@types/express': '^4.16.0',
+  reload: '^2.3.0'
 }
 
 export const ANGULAR_UNIVERSAL_EXPRESS_DEPS = {

src/generators/deps.const.ts

@@ -5,8 +5,9 @@ import { resolve } from 'path'
 import { ngExpressEngine } from '@nguniversal/express-engine'
 import { AppServerModule } from './server.angular.module'
 import { stat, writeFile } from 'fs'
-// import * as config from '../../fusing-angular.json'
 
+const environment = JSON.parse(process.env.FUSING_ANGULAR || '{}')
+const isLocalDevelopmentServer = environment.name === 'DEVELOPMENT'
 // const minifyHTML = require('express-minify-html')
 // const xhr2 = require('xhr2')
 
@@ -31,14 +32,20 @@ const publicDir = `${dir}/public`
 //   }
 // }
 
+isLocalDevelopmentServer && require('reload')(expressApp)
+
 expressApp.use(cookieParser())
 expressApp.use(compression())
 
-expressApp.use('/favicon.ico', (req, res) => res.sendStatus(204)) // TODO: FAVICONS
-expressApp.use('/js', express.static(`${publicDir}/js`, { fallthrough: false }))
+expressApp.set('x-powered-by', false)
+expressApp.set('etag', false)
 expressApp.set('view engine', 'html')
+
 expressApp.engine('html', ngExpressEngine({ bootstrap: AppServerModule }))
 
+expressApp.use('/favicon.ico', (req, res) => res.sendStatus(204)) // TODO: FAVICONS
+expressApp.use('/js', express.static(`${publicDir}/js`, { fallthrough: false, etag: false }))
+
 const virtualIndex = (req: express.Request,
   res: express.Response, document: string, path = `${publicDir}/index.html`) => {
 
@@ -71,6 +78,7 @@ expressApp.get('**', (req, res) => {
     <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)

src/templates/core/server/server.app.ts.txt

@@ -1,8 +1,9 @@
 import { createServer } from 'http'
 import { expressApp } from './server.app'
 
+const config = JSON.parse(process.env.FUSING_ANGULAR || '{}')
 const server = createServer(expressApp)
 
-server.listen(5000, () => {
-  console.log('Angular Universal Server listening')
+server.listen(config.server.port, () => {
+  console.log(`Angular Universal server listening on port: ${config.server.port}`)
 })

src/templates/core/server/server.ts.txt

@@ -33,9 +33,15 @@ export interface FuseBoxConfig {
   readonly verbose: boolean
 }
 
+export interface EnvironmentConfig {
+  readonly server: any
+  readonly app: any
+}
+
 export interface FusingAngularConfig {
   readonly favicon: FaviconConfig
   readonly fusebox: FuseBoxConfig
+  readonly environment: EnvironmentConfig
 }
 
 export default function readConfig_() {