Implemented Server Side Rendering using Angular Universal (SEO Friendly)

README.md

@@ -2,42 +2,43 @@
 
 [![Build Status](https://travis-ci.com/meetdave3/Angular6-Node.js-TypeScript.svg?branch=master)](https://travis-ci.com/meetdave3/Angular6-Node.js-TypeScript)
 
-This project is a starter project with Node at the backend (fully written in TypeScript) and Angular 6 at the frontend.
+This project is a starter project with Node at the backend (fully written in TypeScript) and Angular 6 on the client side. 
 
 This repo shall allow you to instantly get started with a full stack project in place. Just connect it with your favorite database and you're good to go.
 
 ## Repo Features 
 
-- [x] Angular 6.0.0
+- [x] Angular 6.0.9
 - [x] Bootstrap
 - [x] Lazy Loaded Routes
 - [x] Angular Material
-- [x] PWA
+- [x] PWA Ready
 - [x] Server Side TypeScript
 - [x] Node.js API
 - [x] Production Ready Build
+- [x] Server Side Rendering (Angular Universal)
 
 ## Setup
 
 After cloning, run `npm install`
 
 ## Development server
 
-Run `ng build --watch` 
+Run `ng serve` 
 
-After the --watch build, `npm run dev` for a dev server. Navigate to `http://localhost:3000/`. 
-
-The app will automatically reload if you change any of the source files. (Server side as well as client side)
+Navigate to `http://localhost:4200/`. 
 
 ## Code scaffolding
 
 Run `ng g c component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Production Build
 
-First run `ng build --prod` to build the project
+Run `npm run build:ssr && npm run serve:ssr` to build the project
+
+Compiles the boiler application and spins up a Node Express to serve the Boiler Universal application on http://localhost:3000
 
-Then, `npm run prod` to start the node server for production. The build artifacts will be stored in the `dist/` directory. 
+`npm run build:prerender && npm run serve:prerender` - Compiles your application and prerenders your application's files, spinning up a demo http-server so you can view it on http://localhost:8080 Note: To deploy your static site to a static hosting platform you will have to deploy the dist/browser folder, rather than the usual dist
 
 ## Running unit tests
 

angular.json

@@ -11,7 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist",
+            "outputPath": "dist/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
@@ -48,6 +48,24 @@
             }
           }
         },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "src/tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {