fix: move to dotenv for environment configs (#35)

Author: patrickmichalina

package-lock.json

@@ -46,6 +46,7 @@
     "@nguniversal/common": "^6.0.0",
     "@nguniversal/express-engine": "^6.0.0",
     "@types/chalk": "^2.2.0",
+    "@types/dotenv": "^4.0.3",
     "@types/favicons": "^5.1.0",
     "@types/iltorb": "^2.0.1",
     "@types/inquirer": "^0.0.42",
@@ -73,6 +74,7 @@
     "ajv": "^6.5.2",
     "chalk": "^2.4.1",
     "consolidate": "^0.15.1",
+    "dotenv": "^6.0.0",
     "favicons": "^5.1.1",
     "fuse-box": "^3.3.0",
     "iltorb": "^2.3.2",

package.json

@@ -36,6 +36,7 @@ import {
 import { load, commands } from 'npm'
 import generateTsConfig from '../generators/tsconfig.gen'
 import generateTsDeclartionFile from '../generators/declarations.gen'
+import generateDotEnv from '../generators/env.gen'
 
 command(
   'create [overwrite]',
@@ -309,6 +310,7 @@ function create(overwriteExisting = false) {
           generateCoreAngular(im.config.fullname),
           generateGitIgnore(path, overwriteExisting),
           generateTsLint(path, overwriteExisting),
+          generateDotEnv(path, overwriteExisting),
           generateFngConfig(path, overwriteExisting),
           generateTsConfig(path, overwriteExisting),
           generateTsDeclartionFile(path, overwriteExisting)

src/commands/create.ts

@@ -13,13 +13,14 @@ import {
 import { resolve } from 'path'
 import { NgProdPlugin } from '../fusebox/ng.prod.plugin'
 import { NgPolyfillPlugin } from '../fusebox/ng.polyfill.plugin'
-import readConfig_ from '../utilities/read-config'
 import { Ng2TemplatePlugin } from 'ng2-fused'
 import { FuseProcess } from 'fuse-box/FuseProcess'
 import { NgAotFactoryPlugin } from '../fusebox/ng.aot-factory.plugin'
-import clearTerminal from '../utilities/clear'
 import { main as ngc } from '@angular/compiler-cli/src/main'
 import { CompressionPlugin } from '../fusebox/compression.plugin'
+import { appEnvironmentVariables } from '../utilities/environment-variables'
+import clearTerminal from '../utilities/clear'
+import readConfig_ from '../utilities/read-config'
 
 command(
   'serve [port][prod][aot][sw]',
@@ -105,7 +106,6 @@ function serve(isProdBuild = false) {
             } as any),
             RawPlugin()
           ],
-
           isProdBuild &&
             QuantumPlugin({
               warnings: false,
@@ -126,7 +126,7 @@ function serve(isProdBuild = false) {
         output: `${serverOutput}/$name.js`,
         plugins: [
           EnvPlugin({
-            FUSING_ANGULAR: JSON.stringify(config.environment)
+            FUSING_ANGULAR: JSON.stringify(appEnvironmentVariables)
           }),
           JSONPlugin(),
           Ng2TemplatePlugin(),

src/commands/serve.ts

@@ -10,14 +10,7 @@ export default function generateFngConfig(path: string, overwrite = false) {
     resolve(path, configPath),
     {
       favicon,
-      fusebox,
-      environment: {
-        name: 'DEVELOPMENT',
-        server: {
-          port: 5000
-        },
-        app: {}
-      }
+      fusebox
     },
     overwrite
   )

src/generators/config.gen.ts

@@ -0,0 +1,11 @@
+import { writeFileSafely_, writeFile_ } from '../utilities/rx-fs'
+import { resolve } from 'path'
+import * as env from '../templates/env.txt'
+
+const configPath = '.env'
+
+export default function generateDotEnv(dir: string, overwrite = false) {
+  return overwrite
+    ? writeFile_(resolve(dir, configPath), env)
+    : writeFileSafely_(resolve(dir, configPath), env)
+}

src/generators/env.gen.ts

@@ -6,7 +6,7 @@ import { AppServerModule } from './server.angular.module'
 import { stat, createReadStream } from 'fs'
 
 const environment = JSON.parse(process.env.FUSING_ANGULAR || '{}')
-const isLocalDevelopmentServer = environment.name === 'DEVELOPMENT'
+const isLocalDevelopmentServer = environment.ENV === 'dev'
 
 // const xhr2 = require('xhr2')
 

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

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

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

@@ -0,0 +1,2 @@
+FNG_ENV=dev
+FNG_PORT=5000

src/templates/env.txt

@@ -0,0 +1,37 @@
+import { config as readDotEnv } from 'dotenv'
+
+export interface AppEnvironmentSettings {
+  readonly PORT: number
+}
+
+interface StringDictionary {
+  readonly [key: string]: string
+}
+
+const newEnv = readDotEnv()
+
+function keysWihoutCorrectPrefix(prefix = 'FNG_') {
+  return function(key: string) {
+    return key.includes(prefix)
+  }
+}
+
+function toFngDictionaryObject(original: StringDictionary, prefix = 'FNG_') {
+  return function(acc: Object, curr: string) {
+    return {
+      ...acc,
+      [curr.replace(prefix, '')]: original[curr]
+    }
+  }
+}
+
+function cleanVars(dict = {}) {
+  return Object.keys(dict)
+    .filter(keysWihoutCorrectPrefix())
+    .reduce(toFngDictionaryObject(dict), {})
+}
+
+export const appEnvironmentVariables = {
+  ...cleanVars(process.env),
+  ...cleanVars(newEnv.parsed)
+} as AppEnvironmentSettings