document env variables usage

README.md

@@ -25,6 +25,7 @@ If you're a developer and want to contribute to, or want to utilize this marketp
 - [🏄 Get Started](#-get-started)
   - [🏖 Remote Ocean: Nile](#-remote-ocean-nile)
   - [🐳 Use with Barge](#-use-with-barge)
+  - [⛵️ Environment Variables](#️-environment-variables)
 - [👩‍🔬 Testing](#-testing)
 - [✨ Code Style](#-code-style)
 - [🛳 Production](#-production)
@@ -70,7 +71,22 @@ cd barge
 ./start_ocean.sh --latest --no-pleuston --local-spree-node
 ```
 
-Modify `./client/src/config.ts` to use those local connections.
+Modify `./client/src/config.ts` or set environment variables to use those local connections.
+
+### ⛵️ Environment Variables
+
+The `./client/src/config.ts` file is setup to prioritize environment variables for setting each Ocean component endpoint.
+
+By setting environment variables, you can easily switch between Ocean networks the commons client connects to, without directly modifying `./client/src/config.ts`. This is helpful e.g. for local development so you don't accidentially commit changes to the config file.
+
+For local development, you can use a `.env.local` file. There's an example file with the most common network configurations preconfigured:
+
+```bash
+cp client/.env.local.example client/.env.local
+
+# uncomment the config you need
+vi client/.env.local
+```
 
 ## 👩‍🔬 Testing
 

client/.dockerignore

@@ -1 +1,2 @@
 node_modules
+.env.local

client/.env.local.example

@@ -0,0 +1,48 @@
+#
+# When none of the following variables are set,
+# Commons will default connecting to Nile
+#
+
+#
+# Connect to Duero
+#
+REACT_APP_NODE_HOST="duero.dev-ocean.com"
+REACT_APP_AQUARIUS_HOST="aquarius.duero.dev-ocean.com"
+REACT_APP_BRIZO_HOST="brizo.duero.dev-ocean.com"
+REACT_APP_SECRET_STORE_HOST="secret-store.duero.dev-ocean.com"
+REACT_APP_FAUCET_HOST="faucet.duero.dev-ocean.com"
+REACT_APP_PARITY_HOST=$REACT_APP_NODE_HOST
+REACT_APP_BRIZO_ADDRESS="0x9d4ed58293f71122ad6a733c1603927a150735d0"
+
+#
+# Connect to Nile Commons instances
+#
+# REACT_APP_NODE_HOST="nile.dev-ocean.com"
+# REACT_APP_AQUARIUS_HOST="aquarius.marketplace.dev-ocean.com"
+# REACT_APP_BRIZO_HOST="brizo.marketplace.dev-ocean.com"
+# REACT_APP_SECRET_STORE_HOST="secret-store.marketplace.dev-ocean.com"
+# REACT_APP_FAUCET_HOST="faucet.nile.dev-ocean.com"
+# REACT_APP_PARITY_HOST=$REACT_APP_NODE_HOST
+
+#
+# Connect to Spree (local with Barge)
+#
+# REACT_APP_NODE_SCHEME="http"
+# REACT_APP_NODE_HOST="localhost"
+# REACT_APP_NODE_PORT=8545
+# REACT_APP_AQUARIUS_SCHEME="http"
+# REACT_APP_AQUARIUS_HOST="aquarius"
+# REACT_APP_AQUARIUS_PORT=5000
+# REACT_APP_BRIZO_SCHEME="http"
+# REACT_APP_BRIZO_HOST="localhost"
+# REACT_APP_BRIZO_PORT=8030
+# REACT_APP_PARITY_SCHEME=$REACT_APP_NODE_SCHEME
+# REACT_APP_PARITY_HOST=$REACT_APP_NODE_HOST
+# REACT_APP_PARITY_PORT=$REACT_APP_NODE_PORT
+# REACT_APP_SECRET_STORE_SCHEME="http"
+# REACT_APP_SECRET_STORE_HOST="localhost"
+# REACT_APP_SECRET_STORE_PORT=12001
+# REACT_APP_FAUCET_SCHEME="http"
+# REACT_APP_FAUCET_HOST="localhost"
+# REACT_APP_FAUCET_PORT=3001
+# REACT_APP_BRIZO_ADDRESS="0x00bd138abd70e2f00903268f3db08f2d25677c9e"

client/src/config.ts

@@ -41,36 +41,6 @@ export const faucetHost =
     process.env.REACT_APP_FAUCET_HOST || 'faucet.nile.dev-ocean.com'
 export const faucetPort = process.env.REACT_APP_FAUCET_PORT || 443
 
-//
-// OCEAN LOCAL CONNECTIONS
-// e.g. when running with barge
-//
-/*
-export const nodeScheme = 'http'
-export const nodeHost = 'localhost'
-export const nodePort = 8545
-
-export const aquariusScheme = 'http'
-export const aquariusHost = 'aquarius'
-export const aquariusPort = 5000
-
-export const brizoScheme = 'http'
-export const brizoHost = 'localhost'
-export const brizoPort = 8030
-export const brizoAddress = '0x00bd138abd70e2f00903268f3db08f2d25677c9e'
-
-export const parityScheme = 'http'
-export const parityHost = 'localhost'
-export const parityPort = 8545
-
-export const secretStoreScheme = 'http'
-export const secretStoreHost = 'localhost'
-export const secretStorePort = 12001
-
-export const faucetScheme = 'http'
-export const faucetHost = 'localhost'
-export const faucetPort = 3001
-*/
 export const verbose = true
 
 //