Skip to main content

Local Environment

Start building on the Hyperverse in 15 minutes or less.

How to set up your local environment

When building on the Hyperverse, you have the option to set up your local environment using create-next-app or by cloning the Hyperverse monorepo. Check that you have the correct system requirements then choose from the options below to get started.

info

See Ethereum UI to build dApps using the Hyperverse without using code.

System Requirements

→
Using create-next-app
#using-create-next-app
→
Using the Hyperverse Monorepo
#using-the-hyperverse-monorepo

Using create-next-app

Follow the steps below to get your app up and running using create-next-app. View the HyperverseStarterDapp on GitHub or How to Get Hooked Up to the Hyperverse From Scratch blog post for more detail.

Initialize React Next App

npx create-next-app example-dapp --ts

Change ito the project folder

cd example-dapp

Install the Hyperverse

yarn add @decentology/hyperverse

Install Blockchain Package

yarn add @decentology/hyperverse-ethereum

Update _app.tsx file

Open your _app.tsx file and replace it with the following code.

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { initialize, Provider, Network } from "@decentology/hyperverse/react";
import { Ethereum } from "@decentology/hyperverse-ethereum/react";
// import { Metis } from '@decentology/hyperverse-metis/react';
// import { Flow } from '@decentology/hyperverse-flow/react';
// import { Algorand } from '@decentology/hyperverse-algorand/react';

function MyApp({ Component, pageProps }: AppProps) {
  const hyperverse = initialize({
    blockchain: Ethereum,
    network: Network.Testnet,
    modules: [],
  });
  return (
    <Provider initialState={hyperverse}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

The code above defaults to the Ethereum network but you can change it to any other available blockchain.

Run the development server

yarn dev

You may now view your running application on localhost:3000.

Using the Hyperverse Monorepo

Use the Hyperverse Monorepo to view the project source code and start building your application.

Clone the repo

git clone https://github.com/decentology/hyperverse-mono

Choose your module

Navigate to your preferred module within the Hyperverse Monorepo.

Ethereum Example

cd hyperverse-mono/apps/ethereum/tribes

Flow Example

cd hyperverse-mono/apps/flow/tribes

Algorand Example

cd hyperverse-mono/apps/algorand/web
info

Learn more about each blockchain and set up your wallet to help you get started.

Install project dependencies

yarn

Run the development server

yarn dev

View the application

Open http://localhost:3000 in your browser to view your application.

1

Example: Tribes Module

info

Interesting in developing with the Tribes application? Learn more

Here are some links and locations of files related to the tribes mobule:

  • Rinkeby Etherscan of the contract
  • Contract code found in the repo
  • useTribe hook which is what allows us to interact and transact with the contract
info

Join us on Discord view the Forum for support using the Hyperverse.