Tutorial-Part-1.md

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"
}

• The id is the dapp's unique identity; change that from skeleton to mydapp (or whatever).
• name is the dapp's user-visible name: change that to My Dapp (or whatever).
• The description is a user-visible by-line describing what the dapp is good for. Change that to My demonstration dapp.
• version is the dapp's version - you can leave this 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 128x128) icon for your dapp. Feel free to move an alternative title.png into the dist directory.

3. 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 - 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'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, so you'll need to enter:

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

For Linux it's $HOME/.local/share/io.parity.ethereum/dapps - in this case you'd want to enter:

# For Linux systems
ln -s $PWD/dist $HOME/.local/share/io.parity.ethereum/dapps/mydapp

For Windows, it's in %APPDATA%/Parity/Ethereum/dapps - here you'd want to enter:

%=For Windows systems=%
mklink /D "%APPDATA%/Parity/Ethereum/dapps/mydapp" "%cd%/dist"

Once you have it linked, you should start (or restart, if already running) Parity and head to the Applications page of Parity Wallet. There you'll 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.

Note: It can happen on older parity versions that firefox is blocking your dApp due to X-Frame-Options. You will see a warning in the development console. We recommend going on 127.0.0.1:8180 to fix the problem.

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

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 ⟶