DEV Community

williblue
williblue

Posted on • Edited on

How To Get Your Dapp Started with Hyperverse - Easy!

Take your web development to the next level. Start building right away with Hyperverse (formerly known as DappStarter) with these simple steps here:

1. Choose Blockchain Technology

Enter dappstarter.decentology.com and choose the desired blockchain technology you want to build with. Hyperverse provides a wide selection of blockchain technologies; Flow, Solana, Avalanche, Conflux, Ethereum, and Polygon. For this guide, we will choose Flow Blockchain.

Blockchains

2. Choose Blockchain Language

Normally, blockchains have one or multiple languages. Choose the programming language you want to write your smart contract with. Flow blockchain only has one programming language and that is Cadence.

Blockchain languages

If you want to build on Flow blockchain Decentology has a great Bootcamp introduction to Flow’s Cadence programming language. The Bootcamp is called Fast Floward and you can find videos and exercises here.

Decentology is also planning to do Fast Floward 2 course in the future. Join their Discord to keep up with the news or ask any questions here.

The Decentology team and community are very kind and helpful. Write or talk about your idea(s) and ask them for the possibilities about building on Hyperverse and more. They will support your journey along the way.

3. Choose Framework

Choose the framework for the client app you want to make use of. Hyperverse offers frameworks between Vanilla or React.

Frameworks

4. Choose Smart Contract Features

Hyperverse provides 5 different pre-coded dapps with various features that you can build on top. Choose from simple ballot voting with IPFS integration to Pack NFT with Admin and Marketplace smart contracts. Choose the one that is closest to your dapp idea or the one that you are curious to see!

Smart Contract Features

If none of the above foundations match your needs you can also write smart contract from scratch.

This guide will choose Fast Floward as smart contact features.

5. Create A Dapp Name

Enter your preferred dapp name.

Dapp Customization

6. Create Your Dapp

Before you are able to download your dapp. Click Login and Sign up to Hyperverse with Apple, GitHub, Google, or email.

Sign in Hyperverse

After logging in you will be redirected back to the Hyperverse page. The page where we filled out the dapp customization earlier.

Now click on the 'Create Dapp' button and Hyperverse will create the dapp for you!

Create Dapp

Your dapp is now created in Decentology’s Github. You can now clone your dapp to your computer either with the link that Hyperverse provides or download the zip file.

Dapp created

7. Clone Dapp To Your Folder [macOS]

This guide will clone the dapp with git clone. Choose any folder you want to clone your dapp to. Right-click on the desired folder and click on New Terminal at Folder

New Terminal at Folder

Use git clone command. git clone [insert link to the repository]

git clone

Enter the cloned repository with cd command. cd [name of the cloned repository]
Please note that the repository’s name normally is quite random and you can change it if you like.

cd the folder

8. Install Yarn On Your Cloned Repository

Simply run yarn. This will install all the dependencies that your dapp needs to be able to run on your computer.

Install yarn

9. Start Running Dapp

Run yarn start and then allow the terminal to access control the web browser that you are using.

Yarn start

Your dapp will now be displayed on your localhost where you can see the client preview.

For Troubleshooting:

If you experience EACCES: permission denied issue. Try to run sudo yarn test first and then sudo yarn start.

If it is still not working make sure that you have the latest version of Flow, yarn, npm, and node. Otherwise, feel free to ask for help on Decentology discord.

If you later run into this error message:

Error: Required port [5002] is currently in use
error Command failed with exit code 1.

Run sudo pkill node and try to yarn start again.

If runs properly. It should looks like this! 🙌
Dappiness

Visual Testing with UI Harness

Hyperverse offers awesome features called UI Harness which is a UI interface to test your smart contract code out! This become very handy as you can ask anyone to test your code without looking into the code itself! It can also give others an idea of what kind of dapp you are trying to build.

UI Harness select module

You can create multiple UI Harness modules. For example, you can create different modules to test on localhost (emulator) or on Flow testnet. Pretty convenience, huh!

Action cards

Smart Contracts Location

You can find the smart contracts files that are pre-coded in dapp repository > packages > dapplib > contracts.

Good luck and enjoy exploring and learning with Hyperverse! Be one of the first web developers to create next-generation internet! Learn more about Decentology and Hyperverse here.

Top comments (0)