Aragon React Boilerplate
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.
To setup use the command
npx create-aragon-app <app-name> react
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.
Make the template work with your app
- Edit the roles defined in the template to configure your DAO as you want!
Run the template
npx aragon run --template Template --template-init @ARAGON_ENS
Running your app
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:httpor
npm run start:http:templatewhich 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.
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.
What's in this boilerplate?
- 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)
- prepare: Installs dependencies of the front-end
- start:app: Starts a development server for your app
- compile: Compiles the smart contracts
- build: Builds the front-end and background script
- test: Runs tests for the contracts
- 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
- lint: Checks the app and the contracts for linting errors
- lint:fix: Fixes the lint errors that can be resolved automatically
- coverage: Runs the tests for the contracts and creates a report
- @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?
The Template will not be published.
Using a different Ethereum account
You can use a different account to interact with you app. Check the documentation.
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>
cid is your content id hash (this will be displayed after publishing).