inject 10.0.2.2 for Android platform by default, to make test on Andr…

…oid much easier, upgrade several dependencies (#64)

README.md

@@ -14,7 +14,7 @@
 | Android                  | <img src="./images/demo-android-0.png" alt="Android Preview" width="200"/><img src="./images/demo-android-1.png" alt="Android Preview" width="200"/><img src="./images/demo-android-2.png" alt="Android Preview" width="200"/>   |
 | iOS                      | <img src="./images/demo-ios-0.png" alt="iOS Preview" width="200"/><img src="./images/demo-ios-1.png" alt="iOS Preview" width="200"/><img src="./images/demo-ios-2.png" alt="iOS Preview" width="200"/>   |
 
-**This project built a blog app for all platforms in TypeScript.**
+**This project built a real blog app for all platforms in TypeScript.**
 
 TypeScript is a typed super set of JavaScript.
 If you are new to TypeScript it is highly recommended to become familiar with it first before proceeding.
@@ -138,19 +138,40 @@ mongod
 yarn start
 ```
 
-Finally, navigate to [http://localhost:3000](http://localhost:3000) and you should see the template being served and rendered locally!
+Finally, navigate to [http://localhost:3000](http://localhost:3000) and you should see the blog page being served and rendered locally!
 
 ## Start the mobile apps
 
-First of all, you need to get the IP address (either global IP or LAN IP) of your development server. Then modify the constant `HOST_NAME_DEV` in [client/core/src/models/HostUrl.ts](client/core/src/models/HostUrl.ts) with the IP address you got.
-
-Then `yarn start` will also start the react-native project using expo-cli.
+The command `yarn start` will also start the react-native project using expo-cli.
 So you can navigate to [http://localhost:19002](http://localhost:19002) and you will see the Expo DevTool page.
 From that page you can easily start your app for both Android and iOS by clicking corresponding buttons.
 
 For more detail of prerequisite please refer to [Installation](https://docs.expo.io/versions/v34.0.0/introduction/installation/) of Expo document.
+
 Briefly speaking, you should prepare for devices you would like to debug on.
 
+[TODO] Elaborate this part.
+
+## Optional: Test your app on other device in the same LAN
+
+By default the request url connect client and service are `http://localhost`, i.e. you can only test client and service in the same server/PC/Mac.
+
+To test your app in LAN, you can do following before enter command `yarn start`.
+
+1. Get the IP address (either global IP or LAN IP) of your development server. 
+2. Modify the constant `HOST_NAME_DEV` in [client/core/src/models/HostUrl.ts](client/core/src/models/HostUrl.ts) with the IP address you got.
+
+## Optional: Test with OTP sending
+
+This project implement the auth service, as well as account verification by sending OTP to user's registered email account.
+
+By default the account verification is turned off since SMTP transporter is not configured with account and password.
+
+To test this part of functionality, you can:
+
+1. add your email account and password to [server/config/smtp-transporter.ts](server/config/smtp-transporter.ts).
+2. change the flag to `true` in [client/core/src/shared/constants.ts](client/core/src/shared/constants.ts).
+
 # Motivation
 
 Up to 2020, React is the most popular front-end framework.
@@ -624,9 +645,11 @@ You can also integrate [React DevTools](https://github.com/facebook/react-devtoo
 
 After you run the command `yarn start` or `yarn debug`, you can visit [http://localhost:19002](http://localhost:19002) using Chrome. This is the home page of Expo debugging tool.
 
-For detail of how to debugging **please refer to [Expo debugging document](https://docs.expo.io/versions/v35.0.0/workflow/debugging/)**.
+For detail of how to debugging **please refer to [Expo debugging document](https://docs.expo.io/versions/v36.0.0/workflow/debugging/)**.
 Briefly speaking you will have similar experience as debugging on website client, they are both using Chrome.
 
+[TODO] This part will be elaborated.
+
 ## Debugging server
 
 Debugging is one of the places where VS Code really shines over other editors. Node.js debugging in VS Code is easy to setup and even easier to use.
@@ -976,9 +999,11 @@ You can follow the steps below to adapt the app you just deployed on Azure to a
 
 ## Deploy the mobile apps
 
-Please refer to [Expo publishing documents](https://docs.expo.io/versions/v35.0.0/workflow/publishing/) for detail steps.
+Please refer to [Expo publishing documents](https://docs.expo.io/versions/v36.0.0/workflow/publishing/) for detail steps.
 Expo managed the deployment process sophisticatedly for you.
 
+[TODO] This part will be elaborated.
+
 ## Summary of deployment
 
 From this part we can see that deploy a Typescript-MERN-starter project to Azure is very easy.

client/App.tsx

@@ -1,11 +1,14 @@
 // Need manually add Intl polyfill for react-native app
 import "intl";
+
+// See https://github.com/expo/expo/issues/6536 for the following issue.
 (Intl as any).__disableRegExpRestore();
 
 import "intl/locale-data/jsonp/en";
 import "intl/locale-data/jsonp/zh";
 
 import React from "react";
+import { Platform } from "react-native";
 import { Root } from "native-base";
 import { NativeRouter } from "react-router-native";
 import { AppLoading } from "expo";
@@ -21,7 +24,6 @@ import { AsyncStorage } from "react-native";
 import { setHostUrl } from "./core/src/shared/fetch";
 import { HOST_URL_DEV, HOST_URL_PROD } from "./core/src/models/HostUrl";
 import * as Localization from "expo-localization";
-
 import { SET_LOCALE } from "./core/src/actions/common";
 
 interface Props {}
@@ -30,7 +32,16 @@ interface States {
 }
 
 if (__DEV__) {
-    setHostUrl(HOST_URL_DEV);
+    // Android Emulator cannot access http://locahost on the same server
+    // But we can inject http://10.0.2.2 for such requirement
+    let hostUrl: string = HOST_URL_DEV;
+    const localHostUrl: string = "localhost";
+    if (hostUrl.match(localHostUrl) && Platform.OS === "android") {
+        hostUrl = hostUrl.replace(localHostUrl, "10.0.2.2");
+        setHostUrl(hostUrl);
+    } else {
+        setHostUrl(HOST_URL_DEV);
+    }
 } else {
     setHostUrl(HOST_URL_PROD);
 }

client/core/package.json

@@ -10,18 +10,18 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-avatar-editor": "^11.0.7",
-    "react-intl": "^3.6.2",
+    "react-intl": "^3.11.0",
     "react-redux": "7.1.3",
-    "react-router": "4.3.0",
-    "react-router-dom": "4.3.0",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
     "react-tiny-fab": "^3.2.0",
     "react-toastify": "^5.3.2",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
     "semantic-ui-react": "^0.88.1",
     "shelljs": "^0.8.1",
-    "typescript": "^3.7.2",
+    "typescript": "^3.7.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@toast-ui/react-editor": "^1.0.1",
     "@types/http-proxy-middleware": "^0.19.3",
@@ -30,8 +30,8 @@
     "@types/react-redux": "^7.1.5",
     "@types/react-avatar-editor": "^10.3.4",
     "@types/react-dom": "^16.9.4",
-    "@types/react-router": "^5.0.3",
-    "@types/react-router-dom": "^4.3.5",
+    "@types/react-router": "^5.1.4",
+    "@types/react-router-dom": "^5.1.3",
     "@types/react-toastify": "^4.0.2",
     "@types/shelljs": "^0.8.5"
   },