Workshop session 6 4 deploy to cloud heroku

.env.sample

@@ -0,0 +1,5 @@
+NODE_ENV = development
+PORT = 4050
+MONGODB_URI = mongodb://localhost/productmart
+MONGOOSE_DEBUG = true
+JWT_SECRET=1580d64d-b71f-43d5-8e3b-02330b63175e

.gitignore

@@ -44,3 +44,7 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+
+#environment
+.env

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Client Debug",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}",
+      "preLaunchTask": "npm: serve"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Server Debug",
+      "port": 9229,
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run-script", "debug"]
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Both Debug",
+      "configurations": ["Server Debug", "Client Debug"]
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "workbench.colorCustomizations": {
+        "titleBar.activeBackground": "#c183cf",
+        "titleBar.inactiveBackground": "#c183cf99",
+        "titleBar.activeForeground": "#15202b",
+        "titleBar.inactiveForeground": "#15202b99"
+    }
+}

.vscode/tasks.json

@@ -0,0 +1,45 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "server:watch",
+      "problemMatcher": []
+    },
+    {
+      "type": "npm",
+      "script": "serve",
+      "isBackground": true,
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "focus": true,
+        "panel": "dedicated",
+        "showReuseMessage": true,
+        "clear": false
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": {
+        "owner": "typescript",
+        "source": "ts",
+        "applyTo": "closedDocuments",
+        "fileLocation": ["relative", "${cwd}"],
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "Compiled |Failed to compile"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

@@ -1,9 +1,10 @@
 # PRODUCT MART _an angular app on MEAN stack_
 
-Welcome to `product mart` this is an Angular App where we are using Angular Material to develop pages and we are making this app from the scratch to learn angular.
-
+Welcome to `product mart` this is an Angular App where we are using Angular Material to develop pages and we are making this app from the scratch to **learn** angular.
+[Live Application DEMO](https://online-shope-ecommerce-ws.herokuapp.com/home)
 This course is introduction to `MEAN` stack step by step.
 The `MEAN` stack uses `Mongo`, `Express`, `Angular` and `Node` for simple and scalable fullstack js applications
+
 - [x] M = MONGO DB
 - [x] E = EXPRESS
 - [x] A = ANGULAR
@@ -15,15 +16,23 @@ Below are our learning checklist. We will cover one by one each topic while maki
 Please follow all of my teaching videos here in YouTube.
 
 - [x] ~~_Environment ( node, npm , expressjs, vscode )_~~ [2019-04-06]
-- [x] ~~_Angular CLI_~~ [2019-04-06]
-- [ ] Use Case (Display User List)
-- [ ] Integrate with Angular Material
-- [ ] Use Components from Angular Material
+- [x] ~~_Angular CLI_~~ [2019-04-06]\*\*\*\*
+- [x] ~~_Use Case (Display User List)_~~ [2019-04-12]
+- [x] ~~_Integrate with Angular Material_~~ [2019-04-12]
+- [x] ~~_Use Components from Angular Material_~~ [2019-04-12]
+- [x] ~~_Host application in local server ( express.js)_~~ [2019-04-12]
+- [x] ~~_Serve the data from local server_~~ [2019-04-12]
+- [ ] adding login/logout feature
+- [ ] adding register feature
+- [ ] creating restful api server
+- [ ] consuming restful api in Auth service
+- [ ] installing mongo db
+- [ ] Configuring mongoose in Angular App
+- [ ] Integrating Restful API with mongo db
+- [ ] Deploy prod code to Cloud Platform
+  - [ ] Heroku
+- [ ] Create ToolBar Component
 - [ ] Organize Project (shared and core module, feature module)
-- [ ] Host application in local server ( express.js)
-- [ ] Serve the data from local server
-- [ ] Integrate app with Mongo DB.
-- [ ]
 
 ## Learning Materials
 
@@ -45,3 +54,9 @@ Run `ng build` to build the project. The build artifacts will be stored in the `
 ## Angular CLI
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.
+
+## Getting Started.
+
+git clone
+npm i
+cp .env.sample .env

angular.json

@@ -60,7 +60,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "product-mart:build"
+            "browserTarget": "product-mart:build",
+            "proxyConfig": "proxy.conf.json"
           },
           "configurations": {
             "production": {