Merge pull request #157 from oceanprotocol/docs/env

simplify Ocean URIs and env variables, document .env 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,44 @@
+#
+# When none of the following variables are set,
+# Commons will default connecting to Nile
+#
+
+#
+# Connect to Nile
+#
+REACT_APP_NODE_URI="https://nile.dev-ocean.com"
+REACT_APP_AQUARIUS_URI="https://nginx-aquarius.dev-ocean.com"
+REACT_APP_BRIZO_URI="https://nginx-brizo.dev-ocean.com"
+REACT_APP_SECRET_STORE_URI="https://secret-store.dev-ocean.com"
+REACT_APP_FAUCET_URI="https://faucet.nile.dev-ocean.com"
+REACT_APP_BRIZO_ADDRESS="0x4aaab179035dc57b35e2ce066919048686f82972"
+
+#
+# Connect to Duero
+#
+# REACT_APP_NODE_URI="https://duero.dev-ocean.com"
+# REACT_APP_AQUARIUS_URI="https://aquarius.duero.dev-ocean.com"
+# REACT_APP_BRIZO_URI="https://brizo.duero.dev-ocean.com"
+# REACT_APP_SECRET_STORE_URI="https://secret-store.duero.dev-ocean.com"
+# REACT_APP_FAUCET_URI="https://faucet.duero.dev-ocean.com"
+# REACT_APP_BRIZO_ADDRESS="0x9d4ed58293f71122ad6a733c1603927a150735d0"
+
+#
+# Connect to Nile Commons instances
+#
+# REACT_APP_NODE_URI="https://nile.dev-ocean.com"
+# REACT_APP_AQUARIUS_URI="https://aquarius.marketplace.dev-ocean.com"
+# REACT_APP_BRIZO_URI="https://brizo.marketplace.dev-ocean.com"
+# REACT_APP_SECRET_STORE_URI="https://secret-store.marketplace.dev-ocean.com"
+# REACT_APP_FAUCET_URI="https://faucet.nile.dev-ocean.com"
+# REACT_APP_BRIZO_ADDRESS="0x4aaab179035dc57b35e2ce066919048686f82972"
+
+#
+# Connect to Spree (local with Barge)
+#
+# REACT_APP_NODE_URI="htts://localhost:8545"
+# REACT_APP_AQUARIUS_URI="http://aquarius:5000"
+# REACT_APP_BRIZO_URI="http://localhost:8030"
+# REACT_APP_SECRET_STORE_URI="http://localhost:12001"
+# REACT_APP_FAUCET_URI="http://localhost:3001"
+# REACT_APP_BRIZO_ADDRESS="0x00bd138abd70e2f00903268f3db08f2d25677c9e"

client/src/components/atoms/VersionNumbers/index.test.tsx

@@ -118,11 +118,4 @@ describe('VersionNumbers', () => {
             'Could not get version'
         )
     })
-
-    it('minimal component versions in link title, prefixed with `v`', async () => {
-        const { getByTitle } = render(<VersionNumbers minimal />)
-        mockAxios.mockResponse(mockResponse)
-        expect(mockAxios.get).toHaveBeenCalled()
-        await waitForElement(() => getByTitle(/v6.6.6/))
-    })
 })

client/src/components/atoms/VersionNumbers/index.tsx

@@ -5,17 +5,7 @@ import { version } from '../../../../package.json'
 import { version as versionSquid } from '@oceanprotocol/squid/package.json'
 import styles from './index.module.scss'
 
-import {
-    aquariusHost,
-    aquariusPort,
-    aquariusScheme,
-    brizoHost,
-    brizoPort,
-    brizoScheme,
-    faucetHost,
-    faucetPort,
-    faucetScheme
-} from '../../../config'
+import { aquariusUri, brizoUri, faucetUri } from '../../../config'
 
 import VersionTable from './VersionTable'
 import { isJsonString } from './utils'
@@ -116,18 +106,14 @@ export default class VersionNumbers extends PureComponent<
     }
 
     private async setAquarius() {
-        const aquarius = await this.getData(
-            aquariusScheme,
-            aquariusHost,
-            aquariusPort
-        )
+        const aquarius = await this.getData(aquariusUri)
         aquarius &&
             aquarius.version !== undefined &&
             this.setState({ aquarius: { isLoading: false, ...aquarius } })
     }
 
     private async setBrizoAndKeeper() {
-        const brizo = await this.getData(brizoScheme, brizoHost, brizoPort)
+        const brizo = await this.getData(brizoUri)
 
         const keeperVersion =
             brizo['keeper-version'] && brizo['keeper-version'].replace('v', '')
@@ -153,7 +139,7 @@ export default class VersionNumbers extends PureComponent<
     }
 
     private async setFaucet() {
-        const faucet = await this.getData(faucetScheme, faucetHost, faucetPort)
+        const faucet = await this.getData(faucetUri)
 
         // backwards compatibility
         isJsonString(faucet) === false &&
@@ -167,9 +153,9 @@ export default class VersionNumbers extends PureComponent<
             this.setState({ faucet: { isLoading: false, ...faucet } })
     }
 
-    private async getData(scheme: string, host: string, port: number | string) {
+    private async getData(uri: string) {
         try {
-            const response = await axios.get(`${scheme}://${host}:${port}`, {
+            const response = await axios.get(uri, {
                 headers: { Accept: 'application/json' },
                 cancelToken: this.signal.token
             })

client/src/config.ts

@@ -1,79 +1,29 @@
 //
 // commons-server connection
 //
-export const serviceScheme = process.env.REACT_APP_SERVICE_SCHEME || 'http'
-export const serviceHost = process.env.REACT_APP_SERVICE_HOST || 'localhost'
-export const servicePort = process.env.REACT_APP_SERVICE_PORT || 4000
+export const serviceUri =
+    process.env.REACT_APP_SERVICE_URI || 'http://localhost:4000'
 
 //
 // OCEAN REMOTE CONNECTIONS
 //
-export const nodeScheme = process.env.REACT_APP_NODE_SCHEME || 'https'
-export const nodeHost = process.env.REACT_APP_NODE_HOST || 'nile.dev-ocean.com'
-export const nodePort = process.env.REACT_APP_NODE_PORT || 443
-
-export const aquariusScheme = process.env.REACT_APP_AQUARIUS_SCHEME || 'https'
-export const aquariusHost =
-    process.env.REACT_APP_AQUARIUS_HOST || 'nginx-aquarius.dev-ocean.com'
-export const aquariusPort = process.env.REACT_APP_AQUARIUS_PORT || 443
-
-export const brizoScheme = process.env.REACT_APP_BRIZO_SCHEME || 'https'
-export const brizoHost =
-    process.env.REACT_APP_BRIZO_HOST || 'nginx-brizo.dev-ocean.com'
-export const brizoPort = process.env.REACT_APP_BRIZO_PORT || 443
+export const nodeUri =
+    process.env.REACT_APP_NODE_URI || 'https://nile.dev-ocean.com'
+export const aquariusUri =
+    process.env.REACT_APP_AQUARIUS_URI || 'https://nginx-aquarius.dev-ocean.com'
+export const brizoUri =
+    process.env.REACT_APP_BRIZO_URI || 'https://nginx-brizo.dev-ocean.com'
 export const brizoAddress =
     process.env.REACT_APP_BRIZO_ADDRESS ||
     '0x4aaab179035dc57b35e2ce066919048686f82972'
-
-export const parityScheme = process.env.REACT_APP_PARITY_SCHEME || 'https'
-export const parityHost =
-    process.env.REACT_APP_PARITY_HOST || 'nile.dev-ocean.com'
-export const parityPort = process.env.REACT_APP_PARITY_PORT || 443
-
-export const secretStoreScheme =
-    process.env.REACT_APP_SECRET_STORE_SCHEME || 'https'
-export const secretStoreHost =
-    process.env.REACT_APP_SECRET_STORE_HOST || 'secret-store.dev-ocean.com'
-export const secretStorePort = process.env.REACT_APP_SECRET_STORE_PORT || 443
-
-export const faucetScheme = process.env.REACT_APP_FAUCET_SCHEME || 'https'
-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
+export const secretStoreUri =
+    process.env.REACT_APP_SECRET_STORE_URI ||
+    'https://secret-store.dev-ocean.com'
+export const faucetUri =
+    process.env.REACT_APP_FAUCET_URI || 'https://faucet.nile.dev-ocean.com'
 
 //
 // APP CONFIG
 //
+export const verbose = true
 export const analyticsId = 'UA-60614729-11'

client/src/context/UserProvider.tsx

@@ -3,7 +3,7 @@ import Web3 from 'web3'
 import { Logger, Ocean, Account } from '@oceanprotocol/squid'
 import { User } from '.'
 import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean'
-import { nodeHost, nodePort, nodeScheme } from '../config'
+import { nodeUri } from '../config'
 import MarketProvider from './MarketProvider'
 
 const POLL_ACCOUNTS = 1000 // every 1s
@@ -81,11 +81,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
             ocn: 0
         },
         network: '',
-        web3: new Web3(
-            new Web3.providers.HttpProvider(
-                `${nodeScheme}://${nodeHost}:${nodePort}`
-            )
-        ),
+        web3: new Web3(new Web3.providers.HttpProvider(nodeUri)),
         account: '',
         ocean: {} as any,
         requestFromFaucet: () => requestFromFaucet(''),

client/src/ocean.ts

@@ -2,42 +2,22 @@ import { Ocean, Logger } from '@oceanprotocol/squid'
 import Web3 from 'web3'
 
 import {
-    aquariusHost,
-    aquariusPort,
-    aquariusScheme,
-    brizoHost,
-    brizoPort,
-    brizoScheme,
+    aquariusUri,
+    brizoUri,
     brizoAddress,
-    faucetHost,
-    faucetPort,
-    faucetScheme,
-    nodeHost,
-    nodePort,
-    nodeScheme,
-    parityHost,
-    parityPort,
-    parityScheme,
-    secretStoreHost,
-    secretStorePort,
-    secretStoreScheme,
+    faucetUri,
+    nodeUri,
+    secretStoreUri,
     verbose
 } from './config'
 
 export async function provideOcean(web3provider: Web3) {
-    const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`
-    const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
-    const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}`
-    const parityUri = `${parityScheme}://${parityHost}:${parityPort}`
-    const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}`
-
     const config = {
         web3provider,
         nodeUri,
         aquariusUri,
         brizoUri,
         brizoAddress,
-        parityUri,
         secretStoreUri,
         verbose
     }
@@ -58,7 +38,7 @@ export interface FaucetResponse {
 
 export async function requestFromFaucet(account: string) {
     try {
-        const url = `${faucetScheme}://${faucetHost}:${faucetPort}/faucet`
+        const url = `${faucetUri}/faucet`
         const response = await fetch(url, {
             method: 'POST',
             headers: {

client/src/routes/Publish/Files/index.tsx

@@ -6,7 +6,7 @@ import ItemForm from './ItemForm'
 import Item from './Item'
 import styles from './index.module.scss'
 
-import { serviceHost, servicePort, serviceScheme } from '../../../config'
+import { serviceUri } from '../../../config'
 import cleanupContentType from '../../../utils/cleanupContentType'
 
 interface File {
@@ -68,16 +68,13 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
         }
 
         try {
-            const response = await fetch(
-                `${serviceScheme}://${serviceHost}:${servicePort}/api/v1/urlcheck`,
-                {
-                    method: 'POST',
-                    body: JSON.stringify({ url: value }),
-                    headers: {
-                        'Content-Type': 'application/json'
-                    }
+            const response = await fetch(`${serviceUri}/api/v1/urlcheck`, {
+                method: 'POST',
+                body: JSON.stringify({ url: value }),
+                headers: {
+                    'Content-Type': 'application/json'
                 }
-            )
+            })
             res = await response.json()
             file.contentLength = res.result.contentLength
             file.contentType = res.result.contentType