DApps Delivery Guide

The guide covers the delivery process of DApps.

Web2 epoch

We use to use DevOps tools and Internet infrastructure for Web Apps delivery. Everybody knows a number of hosting providers and domain name providers, including CI/CD services that allow achieving our needs in Web App delivery. In the guide, we would cover how we can use Web2 infrastructure and tools for Web3 applications.

Web3 epoch

Web3 is our nearest future which is still under construction.

Delivery tools

GitHub and GitHub Actions

GitHub provides hosting for software development version control using Git. GitHub is the largest host of source code in the world [1].

A decentralized application (DApp, dApp, Dapp, or dapp) is a computer application that runs on a distributed computing system. DApps have been popularized by distributed ledger technologies (DLT) such as the Ethereum Blockchain, where DApps are often referred to as smart contracts.

Many DApps are open-sourced, most of them are hosted in GitHub. That is why it is important to have proper tooling for delivering DApps.

GitHub Actions enables everyone to create custom software development life cycle (SDLC) workflows directly in the GitHub repository.

Since GitHub introduced Actions, a single commit is needed to create a pipeline for a DApp. You do not need to use 3rd party services for that anymore.

Basic Pipeline for a DApp

Step 1: Create pipeline

Open GitHub repository -> Actions -> New Workflow -> Set up a workflow yourself

Step 2: Modify pipeline

1. Define a trigger of the pipeline (e.g. only on master branch):

   on:
     push:
       branches:
       - master
   

2. Leave the definition of the job and run environment:

   jobs:
     build:
       runs-on: ubuntu-latest
   

3. Define prep-steps:

   steps:
     - uses: actions/checkout@v2
   
     - name: Setup Node
       uses: actions/setup-node@v1
       with:
         node-version: '10.x'
   
     - run: npm ci
   
     - run: npm run build
   

Then you need to commit your main.yml by pressing Start commit button.

Fleek

Fleek is a service that allows launch and maintains fast, modern websites hosted on IPFS.

Take a look on documentation

Hosting

We used to deploy Web Apps in hosting services. DApps can and should be deployed in decentralised storage.

IPFS

InterPlanetary File System (IPFS) is a protocol and peer-to-peer network for storing and sharing data in a distributed file system. IPFS uses content-addressing to uniquely identify each file in a global namespace connecting all computing devices.

IPFS allows users to not only receive but host content, in a similar manner to BitTorrent. As opposed to a centrally located server, IPFS is built around a decentralized system of user-operators who hold a portion of the overall data, creating a resilient system of file storage and sharing. Any user in the network can serve a file by its content address, and other peers in the network can find and request that content from any node who has it using a distributed hash table (DHT).

Upload to IPFS

There is a GitHub Action which allows to upload a DApp to IPFS on Marketplace.

Input parameters:

Parameter	Required	Service	Description
path	Yes		Directory’s path to upload.
service	No		Type of target service to upload. Supported services [ipfs, pinata, infura]. Default ipfs
timeout	No		Request timeout. Default 60000 (1 minute)
verbose	No		Level of verbosity [false - quiet, true - verbose]. Default false
host	No	ipfs	IPFS host. Default ipfs.komputing.org
port	No	ipfs	IPFS host’s port. Default 443
protocol	No	ipfs	IPFS host’s protocol. Default https
headers	No	ipfs	IPFS headers as json object. Default {}
pinataKey	Yes*	pinata	Pinata Api Key. Required for pinata service.
pinataSecret	Yes*	pinata	Pinata Secret Api Key. Required for pinata service.
pinataPinName	No	pinata	Human name for pin.

In order to use it, you need to add step to main.yml:

- uses: aquiladev/ipfs-action@v0.1.1
  id: upload
  with:
    path: ./build

There will be a build artifact on a runner after steps (usually in directory build or dist). You need to pass the directory as a path parameter.

The step will have hash output — it is needed for later use. Token ${{ steps.upload.outputs.hash }} can be used in next steps where upload is the id of current step.

Upload to IPFS Pinata pinning service

The same GitHub Action allows to upload a DApp to Pinata pinning service. Pinata simplifies immutable data with simple IPFS API and toolkit.

In order to use it, you need to add step to main.yml:

- uses: aquiladev/ipfs-action@v0.1.3
  id: pinata
  with:
    path: ./build
    service: pinata
    pinataKey: ${{ secrets.PINATA_KEY }}
    pinataSecret: ${{ secrets.PINATA_SECRET }}
    pinataPinName: {pin_name}

The output of the upload action is similar to the previous example.

Ethereum Swarm

Swarm - Decentralised data storage and distribution: Swarm is a peer to peer data sharing network in which files are addressed by the hash of their content. Similar to Bittorrent, it is possible to fetch the data from many nodes at once and as long as a single node hosts a piece of data, it will remain accessible everywhere. This approach makes it possible to distribute data without having to host any kind of server - data accessibility is location independent. Other nodes in the network can be incentivised to replicate and store the data themselves, obviating the need for hosting services when the original nodes are not connected to the network.

Upload to Swarm

There is a GitHub Action which allows to upload a DApp to Swarm on Marketplace.

In order to use it, you need to add step to main.yml:

- uses: aquiladev/swarm-action@v0.1
  id: upload
  with:
    path: ./build

There will be a build artifact on a runner after steps (usually in directory build or dist). You need to pass the directory as a path parameter.

The step will have hash output — it is needed for later use. Token ${{ steps.upload.outputs.hash }} can be used in next steps where upload is the id of current step.

Domain names

ENS

Ethereum Name Service (ENS), a distributed, open, and extensible naming system based on the Ethereum blockchain. It maps human-readable names like alice.eth to machine-readable identifiers such as Ethereum addresses, content hashes, and metadata.

The GitHub Action allows updating .eth name during pipeline execution.

Registering .ETH name

This shortened guide will give you instructions of how to register a new .ETH name. For more detaild take a look at this step-by-step tutorial for registering .ETH name.

Step 1: Open your Ethereum-enabled browser

On desktop, this could be Chrome with the extension MetaMask, or the browser Brave with MetaMask (which comes built-in) enabled.

Step 2: Navigate to the ENS Manager

In your browser, go to app.ens.domains

Step 3: Search for your desired .eth name

Step 4: Start the registration process

Click the blue Request To Register button on the bottom right. A box should pop up from MetaMask asking you to confirm the transaction. Click the Confirm button to confirm it.

Step 5: Wait

The waiting period is required to ensure another person hasn’t tried to register the same name

Step 6: Finish registration

Once your wait time is over, orange text will appear that says Click register to move to the 3rd step. Click the blue next to it that says Register.

Step 7: Set Relosver

After registration is completed you need to set Resolver.

Setup pipeline with .ETH update

Requirements

1. Before setting up a pipeline the ENS name should be configured, it should have a resolver. Take a look on prev section.
2. Basic pipeline should be configured with step which provides IPFS hash

Pipeline step

Open and add the step to main.yml:

- uses: aquiladev/ddns-action@v0.1.1
  with:
    mnemonic: ${{ secrets.MNEMONIC }}
    rpc: ${{ secrets.RPC }}
    name: ddns-action.eth
    contentHash: ${{ steps.upload.outputs.hash }}

Parameters

• ${{ secrets.MNEMONIC }} is a secret. The mnemonic phrase is needed for wallet recovery of an account which owns ENS name. It can be a private key of the account as well
• ${{ secrets.RPC }} is a secret. RPC is a URL of Ethereum Mainnet node
• ddns-action.eth - ENS name which you want to update
• ${{ steps.upload.outputs.hash }} is content hash. It came from upload to IPFS step

Secrets

In order to manage sercerts in a repository you need to open Settings -> Secrets

Pipeline

Eventually pipeline should look like:

name: CI
on:
  push:
    branches:
    - master

jobs:
  build:
    runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v2

  - name: Setup Node
    uses: actions/setup-node@v1
    with:
      node-version: '10.x'

  - run: npm ci

  - run: npm run build

  - name: Upload to IPFS
    uses: aquiladev/ipfs-action@v0.1.2-alpha
    id: upload
    with:
      path: ./build

  - name: Update ENS
    uses: aquiladev/ddns-action@v0.1.1
    with:
      mnemonic: ${{ secrets.MNEMONIC }}
      rpc: ${{ secrets.RPC }}
      name: ddns-action.eth
      contentHash: ${{ steps.upload.outputs.hash }}

Run pipeline

The pipeline will run immediately after commit (if you committed to master branch)

You can open all pipeline runs and check outputs

How to access a DApp with .ETH name?

After a successful run of the pipeline, you should be able to access your updated DApp, but it takes some time on IPFS side to resolve newly uploaded content.

Check ENS record

In order to check updated IPFS hash in ENS, you need to open https://app.ens.domains

Access DApp

The easiest way to open your DApp through http://eth.link

CNS

Unstoppable Domains launching domain names on blockchain technology. The domain names can be used for both payments and websites. A domain name can’t be taken down by the players that typically participating in the domain name system. Hence, the name Unstoppable Domains. Another value is that It can replace your cryptocurrency addresses with one single human-readable name.

Unstoppable Domains provides .crypto (aka CNS) domain names for the entire crypto community.

The GitHub Action allows updating .crypto name during pipeline execution.

Registering a .CRYPTO Name

This shortened guide will give you instructions of how to register a new .CRYPTO name. For more detaild take a look at this step-by-step tutorial for registering .CRYPTO name.

Step 1: Open your Ethereum-enabled browser

On desktop, this could be Chrome with the extension MetaMask, or the browser Brave with MetaMask (which comes built-in) enabled.

Step 2: Navigate to the Unstoppable Domains web site

In your browser, go to unstoppabledomains.com

Step 3: Pass sign up process

Step 4: Search for your desired .crypto name

Login and search for .crypto name

Step 5: Checkout

Add .crypto name to a cart and go to Checkout page. Choose a suitable payment type and complete payment

Step 6: Connect Wallet to your account

Go to Account Settings page and click Add wallet button. You need to connect your MetaMask account to the web site in an appeared popup.

Step 7: Claim your domain name

Go to My Domains page, select domain name and click Claim

The process takes time, there is manual approval. You will need to wait for a while.

Step 8: Manage domain name

After all you will be able to manage your domains. Go to My Domains page and click Manage button for the domain name.

Step 9: Set Resolver

In order to do this, you need to add at least one cryptocurrency address (e.g. owner of the name).

Setup pipeline with .CRYPTO update

Requirements

1. Before setting up a pipeline the CNS name should be configured, it should have a resolver. Take a look on prev section
2. Basic pipeline should be configured with step which provides IPFS hash

Pipeline step

Open and add the step to main.yml:

- uses: aquiladev/ddns-action@v0.1.1
  with:
    mnemonic: ${{ secrets.MNEMONIC }}
    rpc: ${{ secrets.RPC }}
    name: ddns-action.crypto
    contentHash: ${{ steps.upload.outputs.hash }}

Parameters

• ${{ secrets.MNEMONIC }} is a secret. The mnemonic phrase is needed for wallet recovery of an account which owns CNS name. It can be a private key of the account as well
• ${{ secrets.RPC }} is a secret. RPC is a URL of Ethereum Mainnet node
• ddns-action.crypto - CNS name which you want to update
• ${{ steps.upload.outputs.hash }} is content hash. It came from upload to IPFS step

Secrets

In order to manage sercerts in a repository you need to open Settings -> Secrets

Pipeline

Eventually pipeline should look like:

name: CI
on:
  push:
    branches:
    - master

jobs:
  build:
    runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v2

  - name: Setup Node
    uses: actions/setup-node@v1
    with:
      node-version: '10.x'

  - run: npm ci

  - run: npm run build

  - name: Upload to IPFS
    uses: aquiladev/ipfs-action@v0.1.2-alpha
    id: upload
    with:
      path: ./build

  - name: Update CNS
    uses: aquiladev/ddns-action@v0.1.1
    with:
      mnemonic: ${{ secrets.MNEMONIC }}
      rpc: ${{ secrets.RPC }}
      name: ddns-action.crypto
      contentHash: ${{ steps.upload.outputs.hash }}

Run pipeline

The pipeline will run immediately after commit (if you committed to master branch)

You can open all pipeline runs and check outputs

How to access a DApp with .CRYPTO name?

Check CNS record

In order to check updated IPFS hash in CNS, you need to open My Domains page, click Manage button for the domain name. Then you need to open Website tab.

Access DApp

1. You should install Chrome Extension. The Extension allows Chrome browser to handle .crypto domain names.
2. Type .crypto (e.g. ddns-action.crypto) domain name in Chrome browser and you will be redirected to the DApp

References

1. ENS update automation
2. CNS update automation
3. DApp’s pipeline (IPFS + ENS)

Contents:

Keyword Index, Search Page