Hello all,
as we (@philipp.chain and me) were building more and more aepps we noticed that most of them had a very similar structure and since we hate repetition we build a basic boilerplate for aepps. If anyone wants to build their own aepp (with vue.js) we recommend you give it a try (its also great for hackathons). We will use this for suitable future aepp projects as well and keep it updated.
All development is open source , the source code can be found here found at kenodressel/aepp-boilerplate . We might move it to the aeternity github repo in the future.
Features
- fully customizable but transparent build pipeline
- has base-aepp and static client integration
- enforces vue best pratices
- cypress integration testing
-
aepp-sdk-js and aepp-components are already integrated with a minimal footprint
Future plans
- Minimum maintenance will be to keep up to date with the SDK & other aeternity integrations.
- We are planning to integrate a full RPC wallet search (AEX-2 compatible)
- Writing a how to get started guide
- Use cypress for unit testing as well (low prio)
Feedback
Any feedback, wishes and other comments are always welcome, lets use this forum post as gathering of those.
Thank you and have fun!
4 Likes
Have you thought about using a @vue/cli as a base? It implements a modular approach, plugins that configure stuff like e2e testing or pwa mode can be easily added into an existing project through the cli interface.
@davidyuk initially we were using @vue/cli, but there were some issues with the build process where we needed to add so much configuration that we decided to use a manual webpack setup, @Ardobras can elaborate.
Hello, excellent initiative!. Thank’s for sharing.
Y have running the app, but I suppose it needs additional configuration to make it work.
So far I have defined the public and private key derived from the testnet as variable in a .env file at the root of the application to make them available in the initClient() function, also I have added a contract id as a constant in the aeternity.js, however with this parameters the client cannot be initialized.
¿What could I’m missing to make it work?
Thank you!
Yes we had some major issues getting all dependecies compiled correctly to comply with the es5 or lower requiresments that we had. Since we lifted this a while ago I am keen to give it a shot again. It should make the config for the boilerplate significantly less daunting for beginners.
1 Like
You dont need any config setup to get the boilerplate working. Of course you will need an identity provieder. If you choose to, you can use environment variables (note: .env files are not picked up automatically) to set a fixed public and private key for your local testing setup but we encourage the use of the base-aepp in which you can simply navigate to localhost:8081 and it should ask for permission to read the account information.
About the contract id. I guess you mean an address? Note it should start with ct_ and you would also need to supply an interface or the contract source for the SDK to compile the ACI.
Hope that helps 
1 Like
Awesome. Thanks for putting this together.
We will soon post a wallet agnostic script which allows the aepp provider to specify the list of wallets they would like to support (or do nothing and make use of the default wallet provider list) and the user picks which wallet they have (or would like to download) from the ones the aepp dev supports.
In theory this approach should work with the aepp dev not know anything much about the wallets. It would be great to get your feedback on using it in combination with your boilerplate.
I will post here when it’s ready for your feedback.
1 Like
We had a similar problem with some packages and we have solved it by this param. The most complicated thing that I did with @vue/cli is to make a custom setup of handling svgs for icons. I have spent some time understanding how chainWebpack interface works, but after that, we can update @vue/cli without manual syncing of webpack configuration how we were doing it ~year ago.
I have checked @vue/cli documentation and found one more option for this boilerplate: it may be done as preset for cli.
The benefit of this approach is that the developer will be able to choose settings that cli asks on project creation like to choose CSS pre-processor, linter, test runner, to use TypeScript and so on.
This is fantastic. We should add it to the upcoming “for developers” website and maybe also fork it into the public aeternity github repo?
3 Likes
This sounds really cool. Will definietly check vue-cli again, the preset option sounds very good!
Yes we should! Will you do it? 
when will this website be released?
This month for sure. It is basically ready.
Quick update:
We did some investigations into vue-cli. It turned out to be not the great improvement we hoped for which is why we decided against merging it. Further details can be found in the pr: Use vue-cli instead of custom pipeline by kenodressel · Pull Request #7 · kenodressel/aepp-boilerplate · GitHub
We also added a full testing suite to allow for users to easily integration their aepps. Including executing actions on the blockchain. More details on this here: adds basic integration testing and ci by kenodressel · Pull Request #6 · kenodressel/aepp-boilerplate · GitHub
There is also a PR for AEX-2 waiting to be merged but since the wallets don’t support it, its not in the master yet. When base-aepp and waellet catch up we will update and merge the branch. Meanwhile feel free to play with it: adds aex-2 wallet discovery file by kenodressel · Pull Request #10 · kenodressel/aepp-boilerplate · GitHub
5 Likes