Added improved support for development env (server side + client side), Readme updated

Author: meetdave3

README.md

@@ -24,9 +24,12 @@ After cloning, run `npm install`
 
 ## Development server
 
-Run `ng serve` 
+Run `npm run start` to spin the front end Angular 
+Run `npm run dev` to start the Node server in development mode
 
-Navigate to `http://localhost:4200/`. 
+Navigate to `http://localhost:3015/`. 
+
+You can now seamlessly see your changes reflect in realtime everytime you save your file.
 
 ## Code scaffolding
 

package.json

@@ -4,12 +4,12 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --aot",
     "build": "ng build --prod",
     "tsc": "tsc -w",
     "nodemon": "nodemon dist/server/server.js",
     "dev": "tsc && npm run post-dev",
-    "post-dev": "concurrently \"tsc -w\" \"nodemon dist/server/server.js\"",
+    "post-dev": "concurrently \"tsc -w\" \"NODE_ENV=dev nodemon dist/server.js\"",
     "prod": "ng build --prod --aot && tsc && npm run post-prod",
     "post-prod": "node dist/server/server.js",
     "test": "ng build --prod --aot && tsc",

server.ts

@@ -19,27 +19,29 @@ const app = express();
 const PORT = process.env.PORT || 3015;
 const DIST_FOLDER = join(process.cwd(), 'dist');
 
-// Our index.html we'll use as our template
-const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
-
-// * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.js');
-
-const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
-
-app.engine('html', (_, options, callback) => {
-  renderModuleFactory(AppServerModuleNgFactory, {
-    // Our index.html
-    document: template,
-    url: options.req.url,
-    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
-    extraProviders: [
-      provideModuleMap(LAZY_MODULE_MAP)
-    ]
-  }).then(html => {
-    callback(null, html);
+if (process.env.NODE_ENV !== 'dev') {
+  // Our index.html we'll use as our template
+  const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
+
+  // * NOTE :: leave this as require() since this file is built Dynamically from webpack
+  const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.js');
+
+  const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
+
+  app.engine('html', (_, options, callback) => {
+    renderModuleFactory(AppServerModuleNgFactory, {
+      // Our index.html
+      document: template,
+      url: options.req.url,
+      // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
+      extraProviders: [
+        provideModuleMap(LAZY_MODULE_MAP)
+      ]
+    }).then(html => {
+      callback(null, html);
+    });
   });
-});
+}
 
 app.use('/api', api);
 app.set('view engine', 'html');