aragon / your-first-aragon-app

(Aragon 1) Template to help you build your first Aragon application

Your first Aragon app template

🕵️ Find more boilerplates using GitHub | ✨ Official boilerplates

Template to help you build your first Aragon application following the tutorial from hack.aragon

Running your app

To run the app in a browser with front end plus back end hot reloading, simply run npm start.

What's in this boilerplate?

npm Scripts

• postinstall: Runs after installing dependencies.
• build-app: Installs front end project (app/) dependencies.
• start Runs your app inside a DAO.
• compile: Compiles the smart contracts.

Structure

This boilerplate has the following structure:

root
├── app
├ ├── src
├ ├ ├── App.js
├ ├ ├── index.js
├ ├ └── script.js
├ └── package.json
├── contracts
├ └── CounterApp.sol
├── scripts
├ └── buidler-hooks.js
├── arapp.json
├── manifest.json
├── buidler.config.js
└── package.json

• app: Frontend folder. Completely encapsulated, has its package.json and dependencies.
  • src: Source files.
    • App.js: Aragon app root component.
    • index.js: Aragon app entry point.
    • script.sol: Aragon app background script.
  • package.json: Frontend npm configuration file.
• contracts: Smart Constracts folder.
  • CounterApp.sol: Aragon app contract.
• scripts: Scripts folder.
  • buidler-hooks.js: Buidler script hook.
• test: Tests folder.
• arapp.json: Aragon configuration file. Includes Aragon-specific metadata for your app.
• manifest.json: Aragon configuration file. Includes web-specific configurations.
• buidler.config.js: Buidler configuration file.
• package.json: Main npm configuration file.

Libraries

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

your-first-aragon-app's Issues

App not syncing when ran locally

Error in console as follows:

Error from worker for first-dao(0xa1a7d254552beb05f15522eed93b54441e61d1d9) (loaded from http:////localhost:8001/script.js): undefined Event {isTrusted: true, type: "error", target: Worker, currentTarget: Worker, eventPhase: 2, …}bubbles: falsecancelBubble: falsecancelable: truecomposed: falsecurrentTarget: Worker {onmessage: null, onerror: null}defaultPrevented: falseeventPhase: 0isTrusted: truepath: []returnValue: truesrcElement: Worker {onmessage: null, onerror: null}target: Worker {onmessage: null, onerror: null}timeStamp: 183.0150000168942type: "error"proto: Event
(anonymous) @ VM2149 about:srcdoc:32
error (async)
init @ VM2149 about:srcdoc:29
async function (async)
init @ VM2149 about:srcdoc:23
(anonymous) @ VM2149 about:srcdoc:57

Add dependabot

To be sure we are using the latest dependencies

Mark this repo as a "Template repository" in the repo's "Settings" tab if it isn't already

$npm start not working - same issue both with code from tutorial and branch tutorial_completed

Setup:
I am running Ubuntu 20.04.3 LTS (GNU/Linux 5.10.16.3-microsoft-standard-WSL2 x86_64) under windows WSL 2.

Issue:
This is the code I get both when I run the repo I have copied from "https://hack.aragon.org/docs/tutorial.html" and also branch "tutorial_completed".

Here is the code:
` $ npm start

[email protected] start
buidler start

(node:8906) Warning: Accessing non-existent property 'INVALID_ALT_NUMBER' of module exports inside circular dependency
(Use node --trace-warnings ... to show where the warning was created)
(node:8906) Warning: Accessing non-existent property 'INVALID_ALT_NUMBER' of module exports inside circular dependency
main | Starting Aragon app development...
main | App name: foo
main | App id: 0xf57f57247b9ef2b45da478e1a16f7d563a2a97b75d4fdd3be4dc64fca67bc43a
main | Accounts mnemonic "explain tackle mirror kit van hammer degree position ginger unfair soup bonus"
main | Account 0 private key 0xa8a54b2d8197bc0b19bb8a084031be71835580a01e70a45a13babd16c9bc1563
main | public key 0xb4124cEB3451635DAcedd11767f004d8a28c6eE7
main | Account 1 private key 0xce8e3bda3b44269c147747a373646393b1504bfcbb73fc9564f5d753d8116608
main | public key 0x8401Eb5ff34cc943f096A32EF3d5113FEbE8D4Eb
main | Account 2 private key 0x8716d2701596f51aa39d061a685d5ae5ec946eb2c7adb059d29024b5bb3b02c8
main | public key 0x306469457266CBBe7c0505e8Aad358622235e768
main | Account 3 private key 0x62d7bb725787d84b059eb4950f6eea060d898183250ca3ea673a36b8e113018f
main | public key 0xd873F6DC68e3057e4B7da74c6b304d0eF0B484C7
main | Account 4 private key 0x705df2ae707e25fa37ca84461ac6eb83eb4921b653e98fdc594b60bea1bb4e52
main | public key 0xDcC5dD922fb1D0fd0c450a0636a8cE827521f0eD
main | Account 5 private key 0x6b12b45143fc6c7721d0ffbb9811905e773868376501fd1f46c64bf34ae29991
main | public key 0x27E9727FD9b8CdDdd0854F56712AD9DF647FaB74
main | Account 6 private key 0x33f3f34569f997abb165d6967895d963a2b15ec609efcec844e65b60ee8340c7
main | public key 0x9766D2e7FFde358AD0A40BB87c4B88D9FAC3F4dd
main | Account 7 private key 0x5a013cc48f0a3196b0986fc7a7a9dd320ac75e89e33302a7ff4ea6b9dc4f7b00
main | public key 0xBd7055AB500cD1b0b0B14c82BdBe83ADCc2e8D06
main | Account 8 private key 0x418cc0b07bfef998f577384b185b97ad544204b5be43ac9b3abf16db2012ab5c
main | public key 0xe8898A4E589457D979Da4d1BDc35eC2aaf5a3f8E
main | Account 9 private key 0x698eece6f9915b08b4d1a63958dc4f3996ee5a8d685b29d17c28beab912a77cd
main | public key 0xED6A91b1CFaae9882875614170CbC989fc5EfBF0
main |
backend | Compiling contracts...
(node:8906) Warning: Accessing non-existent property 'INVALID_ALT_NUMBER' of module exports inside circular dependency
(node:8906) Warning: Accessing non-existent property 'INVALID_ALT_NUMBER' of module exports inside circular dependency
All contracts have already been compiled, skipping compilation.
backend | Contracts compiled.

/mnt/c/not-sync/git2/aragon/aragon-tutorial/node_modules/merkle-patricia-tree/node_modules/async/lib/async.js:358
callback(err);
^
Error: Callback was already called.
at /mnt/c/not-sync/git2/aragon/aragon-tutorial/node_modules/merkle-patricia-tree/node_modules/async/lib/async.js:43:36
at WriteStream. (/mnt/c/not-sync/git2/aragon/aragon-tutorial/node_modules/merkle-patricia-tree/node_modules/async/lib/async.js:358:17)
at WriteStream.emit (events.js:375:28)
at WriteStream.destroy (/mnt/c/not-sync/git2/aragon/aragon-tutorial/node_modules/level-ws/level-ws.js:140:8)
at finish (internal/streams/writable.js:670:14)
at processTicksAndRejections (internal/process/task_queues.js:82:21)
`
--------------------------------

` $ node --trace-warnings ...
internal/modules/cjs/loader.js:905
throw err;
^

Error: Cannot find module '/mnt/c/not-sync/git2/aragon/aragon-tutorial/...'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
} `

Error: Callback was already called & circular dependency

I followed the tutorial and try to run npm start, I get a bunch of warnings, then assembly code and then something that looks like compiled js.

(13272 lines not going to post here)v

The errors are

(node:2777365) Warning: Accessing non-existent property 'INVALID_ALT_NUMBER' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:2777365) Warning: Accessing non-existent property 'INVALID_ALT_NUMBER' of module exports inside circular dependency
(node:2777365) Warning: Accessing non-existent property 'INVALID_ALT_NUMBER' of module exports inside circular dependency
(node:2777365) Warning: Accessing non-existent property 'INVALID_ALT_NUMBER' of module exports inside circular dependency

Error: Callback was already called.
    at /home/user/dev/tutorial-aragon/node_modules/merkle-patricia-tree/node_modules/async/lib/async.js:43:36
    at WriteStream.<anonymous> (/home/user/dev/tutorial-aragon/node_modules/merkle-patricia-tree/node_modules/async/lib/async.js:358:17)
    at WriteStream.emit (node:events:365:28)
    at WriteStream.destroy (/home/user/dev/tutorial-aragon/node_modules/level-ws/level-ws.js:140:8)
    at finish (node:interval/streams/writable:726:14)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

Os: manjaro openbox
npm: 7.11.2

Could it have something to do with the following warnings that my language server puts out:

in buidler-hooks.js:
14: File is a CommonJS module; it may be converted to an ES6 module

everywhere where I try to use the @aragon modules
Could not find a declaration file for module '@aragon/

Did the tutorial twice with same outcome each time

Initialize arapp.json when creating from scratch

This is empty: https://github.com/aragon/your-first-aragon-app/blob/master/arapp.json

npm start complains about empty JSON

npm start

> [email protected] start /Users/ms/Stuff/aragon-tutorial
> buidler start

main     | Starting Aragon app development...
An unexpected error occurred:

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at readArapp (/Users/ms/Stuff/aragon-tutorial/node_modules/@aragon/buidler-aragon/src/utils/arappUtils.ts:15:15)
    at Object.getAppEnsName (/Users/ms/Stuff/aragon-tutorial/node_modules/@aragon/buidler-aragon/src/utils/arappUtils.ts:23:17)
    at SimpleTaskDefinition.config_1.task.addFlag.addFlag.setAction [as action] (/Users/ms/Stuff/aragon-tutorial/node_modules/@aragon/buidler-aragon/src/tasks/start-task.ts:34:30)
    at Environment._runTaskDefinition (/Users/ms/Stuff/aragon-tutorial/node_modules/@nomiclabs/buidler/src/internal/core/runtime-environment.ts:190:35)
    at Environment.run (/Users/ms/Stuff/aragon-tutorial/node_modules/@nomiclabs/buidler/src/internal/core/runtime-environment.ts:115:17)
    at main (/Users/ms/Stuff/aragon-tutorial/node_modules/@nomiclabs/buidler/src/internal/cli/cli.ts:151:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `buidler start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ms/.npm/_logs/2020-04-01T13_44_00_046Z-debug.log

/**
 * Reads and parses an arapp.json file.
 * @return AragonAppJson
 */
export function readArapp(): AragonAppJson {
  return JSON.parse(fs.readFileSync(arappPath, 'utf-8'))
}

Start using shrinkwrap

As discussed with @lkngtn it would be great to lock dependencies for the tutorial. Only update them when we update the tutorial.

Same as we have in the aragonCLI now: aragon/aragon-cli#477

Update to use new aragonCLI version

We also need to update the tutorial to guide users to first install IPFS globally with the new command aragon ipfs install

BDLR502: Couldn't download compiler versions list. Please check your connection or use local version 0.6.8

Followed the tutorial met a problem
Here is the log
Last login: Fri Feb 5 15:11:45 on ttys001
huangshaohao@huangshaohaodeMacBook-Air ~ % cd foo
huangshaohao@huangshaohaodeMacBook-Air foo % npm start

[email protected] start /Users/huangshaohao/foo
buidler start

main | Starting Aragon app development...
main | App name: foo
main | App id: 0xf57f57247b9ef2b45da478e1a16f7d563a2a97b75d4fdd3be4dc64fca67bc43a
main | Accounts mnemonic "explain tackle mirror kit van hammer degree position ginger unfair soup bonus"
main | Account 0 private key 0xa8a54b2d8197bc0b19bb8a084031be71835580a01e70a45a13babd16c9bc1563
main | public key 0xb4124cEB3451635DAcedd11767f004d8a28c6eE7
main | Account 1 private key 0xce8e3bda3b44269c147747a373646393b1504bfcbb73fc9564f5d753d8116608
main | public key 0x8401Eb5ff34cc943f096A32EF3d5113FEbE8D4Eb
main | Account 2 private key 0x8716d2701596f51aa39d061a685d5ae5ec946eb2c7adb059d29024b5bb3b02c8
main | public key 0x306469457266CBBe7c0505e8Aad358622235e768
main | Account 3 private key 0x62d7bb725787d84b059eb4950f6eea060d898183250ca3ea673a36b8e113018f
main | public key 0xd873F6DC68e3057e4B7da74c6b304d0eF0B484C7
main | Account 4 private key 0x705df2ae707e25fa37ca84461ac6eb83eb4921b653e98fdc594b60bea1bb4e52
main | public key 0xDcC5dD922fb1D0fd0c450a0636a8cE827521f0eD
main | Account 5 private key 0x6b12b45143fc6c7721d0ffbb9811905e773868376501fd1f46c64bf34ae29991
main | public key 0x27E9727FD9b8CdDdd0854F56712AD9DF647FaB74
main | Account 6 private key 0x33f3f34569f997abb165d6967895d963a2b15ec609efcec844e65b60ee8340c7
main | public key 0x9766D2e7FFde358AD0A40BB87c4B88D9FAC3F4dd
main | Account 7 private key 0x5a013cc48f0a3196b0986fc7a7a9dd320ac75e89e33302a7ff4ea6b9dc4f7b00
main | public key 0xBd7055AB500cD1b0b0B14c82BdBe83ADCc2e8D06
main | Account 8 private key 0x418cc0b07bfef998f577384b185b97ad544204b5be43ac9b3abf16db2012ab5c
main | public key 0xe8898A4E589457D979Da4d1BDc35eC2aaf5a3f8E
main | Account 9 private key 0x698eece6f9915b08b4d1a63958dc4f3996ee5a8d685b29d17c28beab912a77cd
main | public key 0xED6A91b1CFaae9882875614170CbC989fc5EfBF0
main |
backend | Compiling contracts...
Compiling...
backend | BDLR502: Couldn't download compiler versions list. Please check your connection or use local version 0.6.8
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: buidler start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/huangshaohao/.npm/_logs/2021-02-05T07_35_22_969Z-debug.log
huangshaohao@huangshaohaodeMacBook-Air foo %