DApp Tutorial - Wiki Parity Tech Documentation

This is the first part of the Dapp Tutorial.

2nd Part ⟶

This tutorial walks you through making a simple Ethereum-powered, distributed app. By the end of it, you’ll be able to head in to Parity, select your Dapp and see it in action.


Getting Started

1. Spawning a new Dapp

Our dapp will use modern JS technologies; NPM, WebPack 2, React, Babel, ES6, JSX and oo7.

Getting a working set up in Javascript with all of this takes time and patience. We’ll cheat and just clone a repo with it all ready. First, if you don’t have Git, node.js, NPM or Webpack already installed on your system, get them (sudo apt-get install git npm might work on Ubuntu).

Next, clone our conveniently prepared skeleton repository:

git clone https://github.com/paritytech/skeleton mydapp

This will make your a new repo mydapp with everything set up and ready to go. We will cd in to it and remove the origin repository lest it confuse Git:

cd mydapp
git remote rm origin

It’s liberally licensed (Apache 2.0) so you don’t have to worry about open sourcing your own code (though obviously you’ll be enlightened and want to do that anyway :-)). You’re now free to push it out to your own Git repo, if you decide to create one on Github.

The next stage is to get all the dependencies installed. NPM makes this rather easy, but the bundled script makes it even easier! Just run:

./init.sh

This should grab and install all that is required. The next thing to do is to build the final web-ready version of the fledgling dapp. We use webpack for this; it’ll smash everything together and provide you with a single bundle.js for you in the dist path, which our index.html (already there) brings in.

webpack

You now have a basic dapp built. Well done!

2. Configuring its look

While your dapp may well be built, it is not yet easily discoverable. You would have to host it somewhere. This can be done traditionally with a web server but for development, we will use Parity’s in-built hosting.

Parity uses a special “manifest” file called to figure out how to display the entry for your dapp in Parity Wallet. This file is called manifest.json and must be placed in the root of your dapp’s directory, in our case, this is our “build” directory, dist.

Open an editor to edit dist/manifest.json; you’ll see something like:

{
	"id": "skeleton",
	"name": "Skeleton",
	"description": "A skeleton dapp",
	"version": "0.1",
	"author": "Parity Technologies Ltd",
	"iconUrl": "title.png"
}

3. Getting it visible in Parity UI

To get Parity UI to discover your dapp, it needs to be placed into a place that Parity UI will see - its local “dapps” directory. We will make a symbolic link for our dapp’s dist directory (containing all of the ready-built dapp) in Parity UI’s dapp directory.

Parity UI’s directory structure is different depending on your system. For Mac, Parity UI’s local dapp directory sits at $HOME/Library/Application Support/parity-ui/dapps, so you’ll need to enter:

# For Mac systems
ln -s $PWD/dist $HOME/Library/Application\ Support/parity-ui/dapps/mydapp

For Linux it’s $HOME/.config/parity-ui/dapps - in this case you’d want to enter:

# For Linux systems
ln -s $PWD/dist $HOME/.config/parity-ui/dapps/mydapp

For Windows, it’s in %APPDATA%/Local/parity-ui/dapps - here you’d want to enter:

%=For Windows systems=%
mklink /D "%APPDATA%/Local/parity-ui/dapps/mydapp" "%cd%/dist"

Once you have it linked, you should start (or restart, if already running) Parity UI. There you’ll see your new dapp (in an Electron window – screenshots outdated):

image

If all is well, your dapp will be visible just like this. Click it!

image

And there it is - your dapp. For now it’s rather underwhelming with it just displaying a simple message, but in the next part of this series, we will be changing that :-)


2nd Part ⟶