Light client feature (#888)

* Change to https * Change port and remove ssl * Point authority to alicloud * Fix route to subscriptions * Remove sync info polling * Change to ssl protocols * Change authority and subs route * Change authority to puti; * Disable loading screen * 878 insight path (#889) * Use node env to determine env * Remove cross env module * Add is prod func check in config * Fix order * Fix getting escrow result * Comment out loader (#895) * Update version * Publish script (#896) * Add publish script * Add publish command * Change script name * Remove publish script * Host switching (#897) * Add dynamic routes based on isProduction * Update readme * Fix path for localhost graphql * Fix WSS route (#904) * Fix routes for direct access to server * Update version * Add prod and dev ports * 921 network env (#922) * Add build script wrapper for mainnet and inject env * Add other scripts for other chains * Remove duplicate script * Use env vars in routes * Add start scripts for all env * Fix comments * Update version * Update readme * Update readme * Remove unused var
bodhiproject · Sep 5, 2018 · 160ccd1 · 160ccd1
1 parent 2c39843
commit 160ccd1
Show file tree

Hide file tree

Showing 18 changed files with 141 additions and 159 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ ReactJS frontend that interacts with the Bodhi backend services
 - [Node](https://nodejs.org/en/) version greater than 8.6.0
 - [Yarn](https://yarnpkg.com/lang/en/) or [npm](https://www.npmjs.com/) version greater than 6.0.0
 
-### download
+### Install
 ```bash
 $ git clone https://github.com/bodhiproject/bodhi-ui.git
 $ cd bodhi-ui
@@ -30,111 +30,81 @@ $ yarn upgrade    // this is important
 $ npm install
 ```
 
-### to use
-
-1. Start the app
-  `yarn start` 
-  After the compiled process completed successfully, it will show success commands & redirect to the http://localhost:3000/ of browser where you will find the login screen of the app.
-2. To create an Optimized Product Build of the app, you need to run a build command in you terminal at app root.
-  `yarn build`
-
-## Development
-
-### Prepare Database data
-
-#### Importing
-
-1. Use `which mongo` find mongo install directory, in which you will also find a mongorestore executable.
+### Development Environment
+To run the development server, run the corresponding run script and the API will point to the remote server with the correct port. After compilation, it will show success commands & automatically redirect to the browser. Any code changes will be observed and will hot reload.
+```bash
+// Mainnet chain
+$ yarn start:mainnet
 
-2. `mongorestore --db <dbname> topics.json`
-  bodhi-ui use "bodhiapi" as <dbname>, if you use other name you need to go to bodhi-graphql/src/db/index.js to update it.
-  This command will create a table with file name 'topics' in database <dbname>.
+// Testnet chain
+$ yarn start:testnet
 
-### Exporting
+// Regtest chain - very fast block mining, can also mine blocks with API call
+$ yarn start:regtest
+```
 
-1. Use `which mongo` to find mongo install directory, in which you will also find a mongodump executable.
+### Production Build
+To create an optimized production build of the app, you need to run a build command in you terminal at app root. Use the build command specific to the chain you want to point to. The build output files will be in `/build`.
+```bash
+// Mainnet chain
+$ yarn build:mainnet
 
-2. `mongodump --db bodhiapi --collection <colleciton_name> --out - > <output_path>/<filename>.bson` Note that filename is best to be same as collection name for the ease of importing.
+// Testnet chain
+$ yarn build:testnet
 
+// Regtest chain - very fast block mining, can also mine blocks with API call
+$ yarn build:regtest
+```
 
-## Coding
+## Standards
 
 ### Javascript Standard
 
 [![Airbnb Javascript Style Guide](https://camo.githubusercontent.com/546205bd8f3e039eb83c8f7f8a887238d25532d5/68747470733a2f2f7261772e6769746861636b2e636f6d2f746f6d656b77692f6a6176617363726970742f393566626638622f6261646765732f6269672e737667)](https://github.com/airbnb/javascript)
 
-### to do style checking
+### Linting
 
 ```bash
-npm run lint:fix    // get sweet link checking and fixing
-npm run lint        // to see whats wrong
+$ npm run lint:fix    // get sweet link checking and fixing
+$ npm run lint        // to see whats wrong
 ```
 
-### Responsive Layout
-
-There are 2 ways to achieve responsive layout
-
-1. Using React layout in js, for example use medium={4} to set column width and showOnlyFor={Breakpoints.SMALL} to set visible option on different devices
-
-  ```js
-    <Row>
-      <Column small={6} medium={4}>
-        <Callout color={Colors.SECONDARY}>
-          <Block showOnlyFor={Breakpoints.SMALL}>On a small screen, I have gutters!</Block>
-          <Block showOnlyFor={Breakpoints.MEDIUM}>On a medium screen, I have gutters!</Block>
-          <Block showFor={Breakpoints.LARGE}>On a large screen, I have no gutters!</Block>
-        </Callout>
-      </Column>
-    </Row>
-  ```
-
-2. Using Sass mixin defined in app/containers/app/index.scss. Media query variables are defined with the same value as those in Foundation. Usage example:
-
-  ```css
-    .some-class{
-      @include breakpoint(small) {
-          height: 20%;
-      }
-      @include breakpoint(medium) {
-          height: 40%;
-      }
-    }
-  ```
-
 ## Localization
+`react-intl` is used for localization.
 
-for most of the text, use
-
-  ```js
-  <FormattedMessage
-      id='app.greeting'
-      description='Greeting to welcome the user to the app'
-      defaultMessage='Hello, {name}!'
-      values={{
-          name: 'Eric'
-      }}
-  />
+### Using FormattedMessage
+- Try to use FormattedMessage whenever possible.
+- `id` should match the id in the JSON file with all the strings.
+- Put the default text inside `defaultMessage`.
+- Dynamic variables can be declared in the `values` property.
+```js
+<FormattedMessage
+  id='app.greeting'
+  description='Greeting to welcome the user to the app'
+  defaultMessage='Hello, {name}!'
+  values={{
+    name: 'Eric'
+  }}
+/>
 ```
 
-put the default text inside defaultMessage, also you can put the variables within `{}` like the example.
-For string inside placeholder or previous method can not handle, define messages in the top of the file using `defindMessages`
-
+### Using formatMessage
+- For use with inline strings like string templates.
+- Define messages at the top of the file using `defineMessages`.
 ```js
-  const messages = defineMessages({
-      greeting: {
-          id: 'app.greeting',
-          defaultMessage: 'Hello, {name}!',
-          description: 'Greeting to welcome the user to the app',
-      },
-  });
+const messages = defineMessages({
+  greeting: {
+    id: 'app.greeting',
+    defaultMessage: 'Hello, {name}!',
+  },
+});
+
+const localizedMessage = this.props.intl.formatMessage(messages.greeting, { { name: 'Eric' }});
+// localizedMessage = 'Hello, Eric!'
 ```
 
-Then put `this.props.intl.formatMessage(messages.greeting, { {name: 'Eric'}})` at the place where you want to put the text, also support variables by putting variables within `{}`
-
-Run `npm run build:langs`
-
-update the translated string in the corresponding language file
-
-The language file is in `./src/languageProvider/locales`
+### Run Language Script
+1. Run `npm run build:langs`
+2. Update the newly translated strings in the corresponding language file. The language file is in `./src/languageProvider/locales`.
 
-## [LGPL-3.0 License](https://github.com/bodhiproject/bodhi-ui/blob/master/LICENSE)
+**[LGPL-3.0 License](https://github.com/bodhiproject/bodhi-ui/blob/master/LICENSE)**
diff --git a/config/env.js b/config/env.js
@@ -77,8 +77,12 @@ function getClientEnvironment(publicUrl) {
         OS_USERNAME: os.userInfo().username,
         OS_PLATFORM: os.platform(),
         OS_ARCH: os.arch(),
+        API_HOSTNAME: process.env.API_HOSTNAME,
+        API_PORT: process.env.API_PORT,
       }
     );
+  console.log('Environment Vars:\n', raw);
+
   // Stringify all values so we can feed into Webpack DefinePlugin
   const stringified = {
     'process.env': Object.keys(raw).reduce((env, key) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bodhi-ui",
-  "version": "0.9.0",
+  "version": "1.0.4",
   "dependencies": {
     "@material-ui/core": "^1.2.2",
     "@material-ui/icons": "^1.1.0",
@@ -84,7 +84,6 @@
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.1",
     "copy-webpack-plugin": "^4.5.1",
-    "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
     "dotenv": "4.0.0",
     "enzyme": "^3.4.1",
@@ -122,9 +121,12 @@
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
-    "start": "cross-env REACT_APP_ENV=dev node scripts/start.js",
-    "start:prod": "cross-env REACT_APP_ENV=prod node scripts/start.js",
-    "build": "node scripts/build.js",
+    "start:mainnet": "node scripts/start-mainnet.js",
+    "start:testnet": "node scripts/start-testnet.js",
+    "start:regtest": "node scripts/start-regtest.js",
+    "build:mainnet": "node scripts/build-mainnet.js",
+    "build:testnet": "node scripts/build-testnet.js",
+    "build:regtest": "node scripts/build-regtest.js",
     "test": "jest",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

diff --git a/scripts/build-mainnet.js b/scripts/build-mainnet.js
@@ -0,0 +1,6 @@
+// Set mainnet env vars
+process.env.API_HOSTNAME = 'puti.io';
+process.env.API_PORT = 8989;
+
+// Run build script
+require('./build');
diff --git a/scripts/build-regtest.js b/scripts/build-regtest.js
@@ -0,0 +1,6 @@
+// Set regtest env vars
+process.env.API_HOSTNAME = 'test.puti.io';
+process.env.API_PORT = 5555;
+
+// Run build script
+require('./build');
diff --git a/scripts/build-testnet.js b/scripts/build-testnet.js
@@ -0,0 +1,6 @@
+// Set testnet env vars
+process.env.API_HOSTNAME = 'dev.puti.io';
+process.env.API_PORT = 6767;
+
+// Run build script
+require('./build');
diff --git a/scripts/start-mainnet.js b/scripts/start-mainnet.js
@@ -0,0 +1,6 @@
+// Set mainnet env vars
+process.env.API_HOSTNAME = 'puti.io';
+process.env.API_PORT = 8989;
+
+// Run start script
+require('./start');
diff --git a/scripts/start-regtest.js b/scripts/start-regtest.js
@@ -0,0 +1,6 @@
+// Set regtest env vars
+process.env.API_HOSTNAME = 'test.puti.io';
+process.env.API_PORT = 5555;
+
+// Run start script
+require('./start');
diff --git a/scripts/start-testnet.js b/scripts/start-testnet.js
@@ -0,0 +1,6 @@
+// Set testnet env vars
+process.env.API_HOSTNAME = 'dev.puti.io';
+process.env.API_PORT = 6767;
+
+// Run start script
+require('./start');
diff --git a/src/config/app.js b/src/config/app.js
@@ -1,4 +1,5 @@
 module.exports = {
+  isProduction: () => process.env.NODE_ENV === 'production',
   intervals: { // in MS
     syncInfo: 5000,
     tooltipDelay: 300,
@@ -17,6 +18,6 @@ module.exports = {
   debug: {
     // Set to false if in test environment and Insight API is down
     // and loading screen is blocking the view.
-    showAppLoad: true,
+    showAppLoad: false,
   },
 };
diff --git a/src/network/graphql/mutations.js b/src/network/graphql/mutations.js
@@ -3,8 +3,9 @@ import _ from 'lodash';
 
 import client from './';
 import { TYPE, getMutation, isValidEnum } from './schema';
+import { isProduction } from '../../config/app';
 
-if (process.env.REACT_APP_ENV === 'dev') {
+if (!isProduction()) {
   window.mutations = '';
 }
 
@@ -46,7 +47,9 @@ class GraphMutation {
 
   async execute() {
     const mutation = this.build();
-    if (process.env.REACT_APP_ENV === 'dev') {
+
+    // Post mutation to window
+    if (!isProduction()) {
       window.mutations += `\n${mutation}`;
     }
 

diff --git a/src/network/graphql/queries.js b/src/network/graphql/queries.js
@@ -4,12 +4,12 @@ import gql from 'graphql-tag';
 import client from './';
 import GraphParser from './parser';
 import { TYPE, isValidEnum, getTypeDef } from './schema';
+import { isProduction } from '../../config/app';
 
-if (process.env.REACT_APP_ENV === 'dev') {
+if (!isProduction()) {
   window.queries = '';
 }
 
-
 class GraphQuery {
   constructor(queryName, type) {
     this.queryName = queryName;
@@ -117,7 +117,9 @@ class GraphQuery {
 
   async execute() {
     const query = this.build();
-    if (process.env.REACT_APP_ENV === 'dev') {
+
+    // Post query to window
+    if (!isProduction()) {
       window.queries += `\n${query}`;
     }