1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00

Merge pull request #180 from oceanprotocol/initial-update-of-react-tutorial

(PR) Update the React App Tutorial
This commit is contained in:
Troy McConaghy 2019-03-19 12:04:50 +01:00 committed by GitHub
commit 4c29cd4d8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -7,11 +7,16 @@ description: This tutorial shows how you can build a basic [React](https://react
- `Node.js` >= 10 is installed. You can check using `node -v` - `Node.js` >= 10 is installed. You can check using `node -v`
- `npm` >= 5.2 is installed. You can check using `npm -v` - `npm` >= 5.2 is installed. You can check using `npm -v`
- Do the tutorial to [Set Up Azure Storage](/tutorials/azure-for-brizo/).
- Use a browser with [MetaMask](https://metamask.io/) and some Ether in your account. See the tutorial about [getting Ether and Ocean Tokens for testnets](/tutorials/get-ether-and-ocean-tokens/).
- Git clone the [oceanprotocol/barge](https://github.com/oceanprotocol/barge) repository, then in that directory: - Git clone the [oceanprotocol/barge](https://github.com/oceanprotocol/barge) repository, then in that directory:
- Edit the `brizo.env` file and set all `AZURE_`... values. - (Optional) If you want to use Azure Storage or Amazon S3 storage, then go through the tutorials to set those up: [Azure](/tutorials/azure-for-brizo/) or [Amazon](/tutorials/amazon-s3-for-brizo/). Note that if you're using Azure Storage, you must edit the `barge/brizo.env` file and set all `AZURE_`... values.
- Run `./start_ocean.sh --no-pleuston --local-kovan-node`. This runs several Ocean services locally, including a local Parity Ethereum node connected to the Kovan Testnet. - Use Barge to run a local Spree Testnet:
```bash
export KEEPER_VERSION=v0.8.6
./start_ocean.sh --latest --no-pleuston --local-spree-node
```
- [Get some Spree Ether](/tutorials/get-ether-and-ocean-tokens/#get-ether-for-a-local-spree-testnet) in a local account managed by MetaMask.
## New Create React App ## New Create React App
@ -68,6 +73,8 @@ After those steps you should see this, and MetaMask should have asked you to all
![React App 02](images/react-app-02.png) ![React App 02](images/react-app-02.png)
![React App 03](images/react-app-03.png) ![React App 03](images/react-app-03.png)
Note: If you see an error like `inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.` in your `console.log`, don't worry about it. It's a MetaMask thing.
## Create Ocean instance ## Create Ocean instance
Now that we are successfully connected with Web3, we can set up our Ocean instance. Now that we are successfully connected with Web3, we can set up our Ocean instance.