Activate mock

hello-world-mock/.gitignore

@@ -1,6 +1,7 @@
 # begin project specific
 
 environment.dev.ts
+environment.mock.ts
 environment.prod.ts
 
 # ignore all in '.vscode' b/c some vsc config files contain user specific content

hello-world-mock/README.md

@@ -38,10 +38,11 @@ cd hello-world-mock
 yarn
 ```
 
-Create environment files for `devMode` and `prodMode`.
+Create environment files for `devMode`, `mockMode` and `prodMode`.
 
 ```bash
 cp src/environments/environment.ts src/environments/environment.dev.ts
+cp src/environments/environment.ts src/environments/environment.mock.ts
 cp src/environments/environment.ts src/environments/environment.prod.ts
 ```
 
@@ -52,19 +53,33 @@ cp src/environments/environment.ts src/environments/environment.prod.ts
 ### Recommendation
 
 It is recommanded to use a server to get full access of all angular.
+You can do this for example with `yarn serve:mock`.
 For the other options your app should run on a server which you like.
 
 ### Run in devMode
 
+If you want to work with mock data, start the mock in a separate terminal, reachable on [http://localhost:3000/](http://localhost:3000/).
+
+```bash
+# mock, separate terminal
+yarn run:mock
+```
+
 ```bash
 # build, reachable on http://localhost/app/path/to/dist/
 yarn build:dev
+# with mock
+yarn build:mock
 
 # build and starts a server, rebuild after changes, reachable on http://localhost:4200/
 yarn serve:dev
+# with mock
+yarn serve:mock
 
 # build, rebuild after changes, reachable on http://localhost/app/path/to/dist/
 yarn watch:dev
+# with mock
+yarn watch:mock
 ```
 
 ### Package
@@ -90,7 +105,7 @@ ng e2e
 
 All options have to been set in the environment files but some of them do not need to be changed.
 All defaults refer to the environment file (`environment.ts`), they are prepared in devMode (`environment.dev.ts`).
-Change for prodMode the option `production` to `true`.
+Change for prodMode the option `production` to `true` and for mockMode the option `api` to `http://localhost:3000/`.
 
 ### Table of contents
 

hello-world-mock/angular.json

@@ -74,6 +74,20 @@
                   "maximumWarning": "6kb"
                 }
               ]
+            },
+            "mock": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.mock.ts"
+                }
+              ],
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
             }
           }
         },
@@ -88,6 +102,9 @@
             },
             "dev": {
               "browserTarget": "hello-world-mock:build:dev"
+            },
+            "mock": {
+              "browserTarget": "hello-world-mock:build:mock"
             }
           }
         },

hello-world-mock/mock/db.json

@@ -0,0 +1,9 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "username": "hello-world-mock",
+      "password": "hello-world-mock"
+    }
+  ]
+}

hello-world-mock/mock/middleware.js

@@ -0,0 +1,19 @@
+const jwt = require('jsonwebtoken');
+
+module.exports = (req, res, next) => {
+  if (req.method === 'POST' && req.path === '/auth') {
+    if (req.body.username === 'hello-world-mock' && req.body.password === 'hello-world-mock') {
+      res.status(200).json({
+        token: jwt.sign({
+          username: req.body.username,
+        }, 'secretKey', {
+          expiresIn: '1h',
+        })
+      })
+    } else {
+      res.status(400).json({ message: 'Username or password is incorrect.' })
+    }
+  } else {
+    next()
+  }
+}

hello-world-mock/package.json

@@ -21,7 +21,9 @@
     "@angular/cdk": "~9.2.4",
     "@angular/flex-layout": "~9.0.0-beta.31",
     "@angular/material": "~9.2.4",
-    "@auth0/angular-jwt": "~4.0.0"
+    "@auth0/angular-jwt": "~4.0.0",
+    "json-server": "~0.16.1",
+    "jsonwebtoken": "~8.5.1"
   },
   "description": "Example app with default options but useMock: true",
   "devDependencies": {
@@ -56,6 +58,10 @@
     "build:dev": "ng lint && ng build --configuration=dev",
     "serve:dev": "ng serve -o --configuration=dev",
     "watch:dev": "ng build --watch --configuration=dev",
+    "build:mock": "ng lint && ng build --configuration=mock",
+    "run:mock": "json-server mock/db.json --middlewares mock/middleware.js",
+    "serve:mock": "ng serve -o --configuration=mock",
+    "watch:mock": "ng build --watch --configuration=mock",
     "build:prod": "ng lint && ng build --prod"
   },
   "version": "1.0.0-SNAPSHOT"

hello-world-mock/swaaplate.json

@@ -43,7 +43,7 @@
     "title": "Hello world with mock",
     "useDocker": false,
     "useMITLicense": true,
-    "useMock": false
+    "useMock": true
   },
   "server": {
     "backend": "js",