Spawning a new Dapp

The dapp will use modern JS technologies: NPM, Webpack2, React, Babel, ES6, JSX and oo7.

Clone a skeleton repo from parity:

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

This will make your a new repo with everything ready.

cd in to it and remove the origin repository lest it confuse Git.

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.)

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

1
./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 fledling dapp. We use webpack for this.

1
webpack

You now have a basic dapp built.

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, thi sis our ‘build’ directory, dist.

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

1
2
3
4
5
6
7
8
{
  "id": "skeleton",
  "name": "Skeleton",
  "description": "A skeleton dapp",
  "version": "0.1",
  "author": "parity Technologies Ltd",
  "iconUrl": "title.png"
}

  • The id is the dapp’s unique identity: change that from skeleton to mydapp

  • The name is the dapp’s user-visible name: change that to My Dapp

  • The description is a user-visible by-line describing what the dapp is good for.

  • version is the dapp’s version - you can leave that at 0.1 for now.

  • You can change the author to your name.

  • The iconUrl is the path(within dist) to a square(best to make it 128 x 128) icon for your dapp.

Getting it visible in Parity

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

Parity’s directory structure is different depending on your system.

For Mac, Parity’s local dapp directory sits at $HOME/Library/Application Support/io.parity.ethereum/dapps

Once you have it linked, you should start(or restart, if already running) Parity and head to the Application Page of Parity Wallet. There you will see your new dapp:

Note: If you are not running npm start in parity/src/js to have a development instance your URL is likely localhost:8180 instead of port 3000.