ottodevs / aragon-react-boilerplate

React boilerplate for Aragon applications

Aragon React Boilerplate

🕵️ Find more boilerplates using GitHub | ✨ Official boilerplates

React boilerplate for Aragon applications.

This boilerplate includes a fully working example app, complete with a background worker and a front-end in React (with Aragon UI). Also comes with a DAO Template which will allow for using your app to interact with other Aragon apps like the Voting app. You can read more about DAO Template here.

Usage

To setup use the command create-aragon-app:

npx create-aragon-app <app-name> react

Structure

This boilerplate has the following structure:

root
├── app
├ ├── src
├ └── package.json
├── contracts
├ ├── CounterApp.sol
├ └── Template.sol
├── migration
├── test
├── arapp.json
├── manifest.json
├── truffle.js
└── package.json

• app: Frontend folder. Completely encapsulated, has its own package.json and dependencies.
  • src: Source files.
  • package.json: Frontend npm configuration file.
• contracts: Smart Constracts folder.
  • CounterApp.sol: Aragon app contract example.
  • Template.sol: Aragon Template to deploy a fully functional DAO.
• migrations: Migrations folder.
• test: Tests folder.
• arapp.json: Aragon configuration file. Includes Aragon-specific metadata for your app.
• manifest.json: Aragon configuration file. Includes web-specific configurations.
• truffle.js: Truffle configuration file.
• package.json: Main npm configuration file.

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:http or npm run start:http:template 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.

Using IPFS

Running your app using IPFS will mimic the production environment that will be used for running your app. npm run start: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.

Make the template work with your app

• Edit the roles defined in the Template on the arrap.json file to configure your DAO as you want!

Run the template

npm run start:ipfs:template

What's in this boilerplate?

npm Scripts

• prepare: Installs dependencies of the front-end
• start or start:ipfs: Runs your app inside a DAO served from IPFS
• start:http: Runs your app inside a DAO served with HTTP (hot reloading)
• start:ipfs:template: Creates a DAO with the Template and serves the app from IPFS
• start:http:template: Creates a DAO with the Template and serves the app with HTTP (hot reloading)
• start:app: Starts a development server for your app
• build: Builds the front-end and background script
• lint: Checks the app and the contracts for linting errors
• lint:fix: Fixes the lint errors that can be resolved automatically
• compile: Compiles the smart contracts
• test: Runs tests for the contracts
• coverage: Runs the tests for the contracts and creates a report
• publish:patch: Releases a patch version to aragonPM (only frontend/content changes allowed)
• publish:minor: Releases a minor version to aragonPM (only frontend/content changes allowed)
• publish:major: Releases a major version to aragonPM (frontend and contract changes)
• versions: Checks the currently installed versions of the app

Libraries

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

What you can do with this boilerplate?

Using a different Ethereum account

You can use a different account to interact with you app. Check the documentation.

Publish

You can publish you app on aragonPM. See how in our publish guide.

Note
The Template will not be published.

Propagate content

You can propagate the content of your app on IPFS. Learn more in our troubleshooting guide or use the aragon ipfs propagate command:

npx aragon ipfs propagate <cid>

Where cid is your content id hash (this will be displayed after publishing).