Aragon React Kit Boilerplate

🕵️ Find more boilerplates using GitHub | ✨ Official boilerplates

React boilerplate for Aragon applications.

This boilerplate also includes a fully working example app, complete with a background worker and a front-end in React (with Aragon UI).

Usage

Kit support requires using the Aragon CLI with a version greater than 4.1.0.

npm install -g @aragon/cli
aragon init app react-kit

Make the kit work with your app

• In order for the kit to work properly, it needs to know what the name of your app is. Replace app in this line with the name of your app in the arapp.json file (e.g. myapp for myapp.aragonpm.eth)

• Edit the roles defined in the kit to configure your DAO as you want!

Run the kit

aragon run --kit Kit --kit-init @ARAGON_ENS

Running your app

Using HTTP

Running your app using HTTP will allow for a faster development process of your app's front-end, as it can be hot-reloaded without the need to execute aragon run every time a change is made.

• First start your app's development server running npm run start:app, and keep that process running. By default it will rebuild the app and reload the server when changes to the source are made.

• After that, you can run npm run start:aragon:http or npm run start:aragon:http:kit which will compile your app's contracts, publish the app locally and create a DAO. You will need to stop it and run it again after making changes to your smart contracts.

Changes to the app's background script (app/script.js) cannot be hot-reloaded, after making changes to the script, you will need to either restart the development server (npm run start:app) or rebuild the script npm run build:script.

Using IPFS

Running your app using IPFS will mimic the production environment that will be used for running your app. npm run start:aragon:ipfs will run your app using IPFS. Whenever a change is made to any file in your front-end, a new version of the app needs to be published, so the command needs to be restarted.

What's in the box?

npm Scripts

• start or start:aragon:ipfs: Runs your app inside a DAO served from IPFS
• start:aragon:http: Runs your app inside a DAO served with HTTP (hot reloading)
• start:aragon:ipfs:kit: Creates a DAO with the Kit and serves the app from IPFS
• start:aragon:http:kit: Creates a DAO with the Kit and serves the app with HTTP (hot reloading)
• start:app: Starts a development server for your app
• compile: Compile the smart contracts
• build: Builds the front-end and background script
• build:app: Builds the front-end
• build:script: Builds the background script
• test: Runs tests for the contracts
• publish:patch: Release a patch version to aragonPM (only frontend/content changes allowed)
• publish:minor: Release a minor version to aragonPM (only frontend/content changes allowed)
• publish:major: Release a major version to aragonPM (frontend and contract changes)
• versions: Check the currently installed versions of the app

Libraries

• @aragon/os: Aragon interfaces
• @aragon/client: Wrapper for Aragon application RPC
• @aragon/ui: Aragon UI components (in React)

Publish

This app has 3 environments defined in arapp.json:

Prerequisites:

• ENS Registry address

Note: the default environment which points to localhost does not have an ENS Registry address specified because the @aragon/cli will default the value to 0xB9462EF3441346dBc6E49236Edbb0dF207db09B7 (the ENS Registry pre-deployed on the local development chain).

Introduction to environments

Environments are defined in arapp.json, for example staging points to:

• an ENS registry (0x314159265dd8dbb310642f98f50c066173c1259b)
• an APM registry (open.aragonpm.eth)
• an APM repository (app)
• an Ethereum network (rinkeby)
• an Ethereum websockets provider (wss://rinkeby.eth.aragon.network/ws - to read from the blockchain)

The rinkeby network is further defined in truffle.js, and has:

• an Ethereum provider (to write to the blockchain):
  • an address (https://rinkeby.infura.io)
  • an Ethereum Account (0xb4124cEB3451635DAcedd11767f004d8a28c6eE7) (which is the first account generated from the DEFAULT_MNEMONIC variable, to use a different account see here)

Major version: content + contract

Command:

npm run publish:major -- --environment staging

This will:

1. build the app's frontend (the output lives in dist)
2. compile the app's contract (the output lives in build)
3. publish the app to the staging environment.

Sample output:

 > aragon apm publish major "--environment" "staging"

 ✔ Successfully published app.open.aragonpm.eth v1.0.0:
 ℹ Contract address: 0xE636bcA5B95e94F749F63E322a04DB59362299F1
 ℹ Content (ipfs): QmR695Wu5KrHNec7pRP3kPvwYihABDAyVYdX5D5vwLgxCn
 ℹ Transaction hash: 0x3d752db29cc106e9ff98b260a90615921eb32471425a29ead8cbb830fb224d8

Note: the contract location is defined in arapp.json under path. Note: you can also deploy a major version with only frontend changes by passing --only-content.

Minor/patch version: content only

Command:

npm run publish:patch -- --environment staging

This will:

1. build the app's frontend (which lives in dist)
2. publish the app to the staging environment.

Sample output:

 ✔ Successfully published app.open.aragonpm.eth v1.1.1:
 ℹ Contract address: 0xE636bcA5B95e94F749F63E322a04DB59362299F1
 ℹ Content (ipfs): QmUYv9cjyNVxCyAJGK2YXjkbzh6u4iW2ak81Z9obdefM1q
 ℹ Transaction hash: 0x57864d8efd8d439008621b494b19a3e8f876a8a46b38475f9626802f0a1403c2

Check published versions

Command:

npm run versions -- --environment staging

Sample output:

 ℹ app.open.aragonpm.eth has 4 published versions
 ✔ 1.0.0: 0xE636bcA5B95e94F749F63E322a04DB59362299F1 ipfs:QmR695Wu5KrHNec7pRP3kPvwYihABDAyVYdX5D5vwLgxCn
 ✔ 1.1.0: 0xE636bcA5B95e94F749F63E322a04DB59362299F1 ipfs:QmSwjUZFpv2c2e9fLoxtgFrAsAmBN4DyQGJp4RcqQcW3z3
 ✔ 1.1.1: 0xE636bcA5B95e94F749F63E322a04DB59362299F1 ipfs:QmUYv9cjyNVxCyAJGK2YXjkbzh6u4iW2ak81Z9obdefM1q
 ✔ 2.0.0: 0x74CBbbC932d7C344FCd789Eba24BfD40e52980c9 ipfs:Qmadb3hzwLDKtb93fF367Vg1epkdsLZF4dhpapNYynjgZF

Using a different Ethereum account

To deploy from a different account, you can:

• define a ~/.aragon/mnemonic.json file

  {
      "mnemonic": "explain tackle mirror kit ..."
  }
  

  or
• define a ~/.aragon/${network_name}_key.json file, for example: ~/.aragon/rinkeby_key.json

  {
      "keys": [
          "a8a54b2d8197bc0b19bb8a084031be71835580a01e70a45a13babd16c9bc1563"
      ]
  }
  

Licensing

Note that the Kit contract has a special requirement on licensing because it includes contract dependencies that are licensed as GPL-3.0-or-later. This is the only file in your project that is required to be licensed this way, and you are free to choose a different license for the rest of the project.