Asch Dapp Helloworld

Architecture

This Dapp consists of two parts:

1. The Backend part: This is the Dapp running on the sidechain.
   • The Dapp is normally running on your localnet on your machine on port 4096 (http://localhost:4096).
   • The Dapp is identified with an unique Id (e.g. a7ef9cd0707fe94f583334d434e39570113a43e3647c8ee730bf21ec2fe08c87) and can be accessed via http://localhost:4096/api/dapps/a7ef9cd0707fe94f583334d434e39570113a43e3647c8ee730bf21ec2fe08c87/some_endpoint
   • You get the unique Id after installing the Dapp on the localnet.
2. The Frontend part:
   • This is the Vue.js frontend in the development folder.
   • The Vue.js frontend can be started with the command npm run dev and runs on http://localhost:8080.

Install Backend

To install the backend part of the Dapp on your localnet follow very carefully the the instructions in Tutorial.

After the tutorial you should have a folder structure like this.

root
└───asch
        app.js
        aschd
        ...
    └───dapps
        └───<dapp Id>
               README.md
               config.json
               dapp.json
               genesis.json
               init.js
           └───contract
                   domain.js
           └───interface
                   domain.js
                   helloworld.js
           └───model
                   domain.js
           └───development
                   Vue.js Frontend
                   ...
                   ...

Check environment

Be sure to have the asch-dapp installed in your localnet (tutorial). Normally the localnet is running on http://localhost:4096. If the this Dapp was successfully installed, then you should see a directory with a long name in asch/dapps/<long Id>.

Open your browser and type http://localhost:4096/api/dapps/<dapp Id>/transactions, now you should get some JSON response. First step is done. The Dapp functions as our backend. Now we need something we can interact with, a webapp. Now let's start the local development server and get the frontend part up and running.

Start local frontened server

In the asch/dapps/<dapp Id>/development folder is a demo Vue.js project. The Vue.js frontend runs usually on http://localhost:8080 it access our dapp on http://localhost:4096/api/dapps/<dappId>/.

Change directory to the development folder.

cd development

Install all packages.

npm install.

To start the web server.

npm run dev.

You need to set your <dapp Id> in development/config/dev.env.js so that the web frontend can access the sidechain.

Test Frontend

Now open your browser and type http://localhost:8080 to access the webapp. If everything was configured correct, you should see no errors in the browser-console.

Use the Dapp

In order to use all functionality of the dapp, you need to deposit XAS to your dapp.

# Locate your asch-cli folder
# Run
asch-cli dapps --deposit

---

Help

If something is not working for you. Don't hesitate, create a issue on aschplatform/asch-dapp-helloworld and we will very soon help you.