Index
b'# RSK React + Express JS Box\n\nThis box comes with everything you need to start using [express JS](https://expressjs.com/) to provide API endpoints to smart contracts and a [react app](https://reactjs.org/) to interact with them on [RSK Blockchain](https://developers.rsk.co/rsk/).\nIt includes network configurations for Mainnet, Testnet and the SimpleStorage contract as an example to deploy.\n\n## Requirements\n\n1. [NPM (Node Package Manager)](https://nodejs.org/en/) and \nNode.js are needed, though both are usually installed at once.\n\nGo to [Node.js](https://nodejs.org/en/) if you need to install it.\n\n2. Truffle\n\nInstall Truffle globally:\n\n```shell\nnpm install -g truffle\n```\n\n## Installation\n\n1. Create a new folder.\nFor example, create the folder `rsk-react-express`.\nNavigate to the folder in the terminal.\n\n```shell\nmkdir rsk-react-express\ncd rsk-react-express\n```\n\n2. Run the unbox command. It can take some time, as this will install all necessary dependencies.\n\n```shell\ntruffle unbox rsksmart/rsk-react-express-box\n```\n\nA `client-server` application is generated in the `app` directory.\n\nThis is the result using Windows OS:\n\n\n\n## Development console\n\nTruffle has an interactive console that also spawns a development blockchain. This is very useful for compiling, deploying and testing locally.\n\n3. Run the development console. This command is successful if you see a list of 10 accounts, a mnemonic and the command prompt is now `truffle(develop)>`\n\n```shell\ntruffle develop\n```\n\nYou will now be in the truffle develop REPL with seeded accounts and their associated private keys listed.\n\n```txt\nC:\\RSK\\rsk-next>truffle develop\n\nTruffle Develop started at http://127.0.0.1:8545/\n\nAccounts:\n(0) 0x1056f747cf4bc7710e178b2aeed4eb8c8506c728\n(1) 0x45a71c00382c2898b5d6fae69a6f7bfe6edab80c\n(2) 0x1596384706dc9ac4cca7f50279a4abe591d6c3fe\n(3) 0x9576d0a496b645baa64f22aceb2328e7468d4113\n(4) 0xd431572eef7d77584d944c1809398a155e89f830\n(5) 0x92c111839718fe0800fadccc67068b40b8524a0f\n(6) 0x6da22b5a027146619bfe6704957f7f36ff029c48\n(7) 0x2c3a82d8c3993f8c80dcaf91025437bd057df867\n(8) 0xc43ae7a44f7deb759177b7093f06512a0a9ff5d7\n(9) 0xe61bf00cd7dce248449cfe58f23a4ef7d542bc0b\n\nPrivate Keys:\n(0) f32f32839fe27ad906b63eafb326f26fed95c231e3c5e33c7cdd08f62db63167\n(1) ebef990088f27f6ef13b5e52a77d5dcc5a76862a701908c586d01b6fe93562b3\n(2) 598ccae5e4436fedeb0e798c0d254789c55a63401ebfc3ae8ddde29634ddfcde\n(3) 09934b80f391e0024b8cb00cd73790fdf64c4d0509e144766414fee317cd3f4e\n(4) ac745b84b6574b5738d364b43e0d471c9d5107504acc709c90f6f091b78c751b\n(5) 449654cde095f2349113ef12a93e139b4302bc95adb3619d08adf53dde9b8847\n(6) c217f12a89c352fc70b5f1bd5742314b4fb1bb1e35cb779fdb3c2390106355db\n(7) 1d4c74dfa4e99e161130c18cc63938bb120a128cefbf1b9188efc678bf5722cb\n(8) 0f44e0becf2e090db498a1b747d2a758fcc81fb0241f350d61117a9c6b1fa82e\n(9) 85218c5eec657470dafeb09e6f7101f91d21bfe822fbeeecfc9275f798662a63\n\nMnemonic: virtual valve razor retreat either turn possible student grief engage attract fiber\n\n\xe2\x9a\xa0\xef\xb8\x8f Important \xe2\x9a\xa0\xef\xb8\x8f : This mnemonic was created for you by Truffle. It is not secure.\nEnsure you do not use it on production blockchains, or else you risk losing funds.\n\ntruffle(develop)>\n```\n\n4. Take a look at the smart contract `SimpleStorage.sol`. You can check it out in folder `contracts`.\n\nThis smart contract has:\n\n* A variable `storedData` to store a number\n* A function `get()` to return the number stored at variable `storedData`\n* A function `set()` to change the number stored at variable `storedData`\n\n5. Compile and migrate the smart contract. Note, inside the development console we don\'t preface commands with `truffle`.\n\n> To make sure you\'re in the development console, the command prompt must be `truffle(develop)>`\n\n```shell\ncompile\n```\n\nThe `compile output` should be similar to:\n\n\n\n```shell\nmigrate\n```\n\nAnd the `migrate output` should be similar to:\n\n\n\n6. Running contract tests.\n\nThis Truffle box also comes with the file `TestSimpleStorage.js` for testing the smart contract. You can check it out in the `test` folder.\n\nRun this command in the development console:\n\n```shell\ntest\n```\n\nThis `test output` should be similar to:\n\n\n\nNote the command varies slightly if you\'re in or outside of the development console.\n\n```javascript\n// inside the development console.\ntest\n\n// outside the development console.\ntruffle test\n```\n\n## The application\n\nOur box is a client-server: \n- Server uses `express JS` to interact with the smart contract.\n- Client uses `react` app.\n\n7. Running in development mode\n\nIn another terminal (i.e. not in the truffle develop prompt), go to the `app` directory and run the app in development mode.\n\n> Do not close the other terminal, which is running the Truffle development console, because it is our Blockchain simulator.\n> \n> If you close it and then open it again, you need to deploy / migrate the smart contract again too!\n\n```shell\ncd app\nnpm run dev\n```\n\nThis command executes server and client applications and you can access it in your browser:\n\n- Server: [http://localhost:8080/](http://localhost:8080/)\n- Client: [http://localhost:3000/](http://localhost:3000/)\n\n> Smart contract changes must be manually recompiled and migrated!\n\n**NOTE**: This box is the starting point for the RSK tutorial [using rsk-react-express-box](https://developers.rsk.co/tutorials/truffle-boxes/rsk-react-express-box/).\n\n8. Running the production server\n\nYou can choose to run only the production server. In another terminal (i.e. not in the truffle develop prompt), go to the `app` directory and run the app in production mode.\n\n```shell\ncd app\nnpm start\n```\n\n> If you have `yarn` installed, you can use `yarn start`.\n\nThen go to your browser at [http://localhost:8080/](http://localhost:8080/)\n\n\n\n> When you are running only the production server, for any change you need to stop and run the server again for the updates to take effect!\n\n9. To build the application for production, use the build script in the `app` folder. A production build will be in the `app/dist` folder.\n\n```javascript\nnpm run build\n```\n\nTake a look in the `app/dist` folder:\n\n\n\n## Using RSK networks\n\nThis Truffle box is already configured to connect to both RSK networks: testnet and mainnet. We need only to update few items:\n\n- Setup an account & get R-BTC\n- RSK network gas price\n- Your wallet mnemonic\n- Choose the network in the app\n\n### Setup an account & get R-BTC\n\n- Get an address, learning how works the [account based RSK addresses](https://developers.rsk.co/rsk/architecture/account-based/ "Account based RSK addresses - RSK Developers Portal").\n- For the RSK Testnet, get tR-BTC from [our faucet](https://faucet.testnet.rsk.co/).\n- For the RSK Mainnet, get R-BTC from [an exchange](https://developers.rsk.co/rsk/rbtc/).\n\n### Setup the gas price\n\n**Gas** is the internal pricing for running a transaction or contract. When you send tokens, interact with a contract, send R-BTC, or do anything else on the blockchain, you must pay for that computation. That payment is calculated as gas. In RSK, this is paid in **R-BTC**.\nThe **minimumGasPrice** is written in the block header by miners and establishes the minimum gas price that a transaction should have in order to be included in that block.\n\nTo update the **minimumGasPrice** in our project run this query using cURL:\n\n**Testnet**\n\n```shell\ncurl https://public-node.testnet.rsk.co/ -X POST -H "Content-Type: application/json" \\\n --data \'{"jsonrpc":"2.0","method":"eth_getBlockByNumber","params":["latest",false],"id":1}\' \\\n > .minimum-gas-price-testnet.json\n```\n\n**Mainnet**\n\n```shell\ncurl https://public-node.rsk.co/ -X POST -H "Content-Type: application/json" \\\n --data \'{"jsonrpc":"2.0","method":"eth_getBlockByNumber","params":["latest",false],"id":1}\' \\\n > .minimum-gas-price-mainnet.json\n```\n\nThis query saved the details of latest block to \nfile .minimum-gas-price-testnet.json \nor .minimum-gas-price-mainnet.json, respectively.\n\nIn the `truffle-config.js`, we are reading the parameter `minimumGasPrice` in each json file.\n\nFor more information about the **Gas** and **minimumGasPrice** please go to the [gas page](https://developers.rsk.co/rsk/rbtc/gas/ "Gas - RSK Developers Portal").\n\n### Connect to RSK\n\n1. Copy your mnemonic to `truffle-config.js`\n\n```javascript\n//Put your mnemonic here, be careful not to deploy your mnemonic into production!\nconst mnemonic = \'A_MNEMONIC\';\n```\n\nPlease be aware that we are using `HDWalletProvider` with RSK Networks derivations path:\n- RSK Mainnet dpath: `m/44\xe2\x80\x99/137\xe2\x80\x99/0\xe2\x80\x99/0`\n- RSK Testnet dpath: `m/44\xe2\x80\x99/37310\xe2\x80\x99/0\xe2\x80\x99/0`\n\nFor more information check [RSKIP57](https://github.com/rsksmart/RSKIPs/blob/master/IPs/RSKIP57.md).\n\n2. Run the development console for any RSK network.\n\n```shell\n# Console for Testnet\ntruffle console --network testnet\n\n# Console for Mainnet\ntruffle console --network mainnet\n```\n\n3. Migrate the smart contracts. We will do it running the below commands directly in the terminal, without using the truffle console, this is to show you an alternative.\n\n```shell\ntruffle migrate\n```\n4. Update express JS component. \n\nThe express server uses the [web3.js](https://web3js.readthedocs.io/) library to interact with the blockchain - writing code that reads and writes data from the blockchain with smart contracts.\n\nChoose which RSK network you would like to connect the server to \nand update line 11 of the file `app/src/server/index.js`\n\n**Testnet**\n```js \nconst provider = new Web3.providers.HttpProvider("https://public-node.testnet.rsk.co"); \n```\n\n**Mainnet**\n```js \nconst provider = new Web3.providers.HttpProvider("https://public-node.rsk.co");\n```\n\n5. In a terminal, go to the `app` directory and run the app.\n\nFor example, this command will run the production server:\n\n```shell\ncd app\nnpm start\n```\n\nThen go to your browser at [http://localhost:8080/](http://localhost:8080/)\n\n> Note that when you are connected to an RSK network, you do not need to leave open the Truffle console, because the app is connected via a public node, directly to the network.\n\n## Next steps\n\n- **Go to tutorial**\n\nGo to the tutorial [using rsk-react-express-box](https://developers.rsk.co/tutorials/truffle-boxes/rsk-react-express-box/) to learn more about this project. We covered all the steps with more details, explanations, and images.\n\n- **Find more documentation**\n\nCheck out the [RSK developers portal](https://developers.rsk.co/).\n\n- **Do you have questions?**\n\nAsk in the [RSK chat](https://gitter.im/rsksmart/getting-started).\n'