Building and publishing a "hello world" dapp
This is the most basic dapp development and publishing
tutorial, it covers building, publishing and running a dapp, but does not
include any of the Ethereum blockchain / ETH payments / smart contract
interactions. You need literally zero programming experience to build
and publish your first “hello world” dapp!
1. Dapp browser
The very first thing you’ll need is a dapp browser, like Dappscape. There are quite a few of them already on the market, but, unlike with web browsers, there aren’t yet universal standards. We will use Dappscape in this tutorial, as it supports both downloadable/offline dapps (.dapp files) and publishing to network.
2. Building the dapp using HTML
After you created the “index.html” file, edit it using any text editor (I like Microsoft Visual Studio Code simple and flexible editor). In our example, the dapp will only display “Hello World” on the screen. Here’s the code in the editor:
3. Testing the dapp locally
Run Dappscape and open your dapp using “Open Local Dapp” command in Dappscape.
Find your dapp folder and click the “index.html” file to open the dapp.
And Voilà! The dapp browser displays your “Hello World”.
4. Building your dapp
If you want to easily publish & distribute your dapp (website, forums, emails, USB, etc.), you’ll need to build a .dapp file (which simply the whole dapp folder zipped into a single file with file extension changed to .dapp). Remember, that the dapp folder must contain “index.html” as the main dapp file.
Open “Developer options” command from the Dappscape menu, then choose “Build dapp”. This will open the below Dapp metadata screen where you need to pick you dapp folder (not the “index.html” file, but the whole dapp folder, which will contain “index.html” as the main file, plus all other HTML, CSS, JS, image, etc. files).
When you click “Build dapp”, Dappscape will ask you where to save the created .dapp file, just save any location you want. The build .dapp file contains all dapp resources and can be now distributed across any channels.
5. Publishing the “hello world” dapp
Now that we’ve built the simplest “hello world” dapp, we can publish it on Dappscape. To publish your dapp on Dappscape, go to Menu > Developer Options > Upload dapp. Although you don’t need to pay any publishing/transaction, etc. fees, you will be asked to select one of your ETH accounts that you wish to use to sign the dapp. All dapps hosted on Dappscape are signed by ETH addresses.
Once you click “Upload”, the dapp will be uploaded to Dappscape and available to all Dappscape users by simply entering the dapp name (in our example, “HelloWorld.dapp”).
Let’s test it! Just enter “HelloWorld.dapp” in the Dappscape address bar and here we go, you and all Dappscape users can now enjoy the dapp!