Hello world

In this tutorial you will learn the basics of creating a MiniDapp. Creating your very first MiniDapp is a great way to get started with building on Minima as it will give you a good understanding of the Minima ecosystem and how to interact with it.

Please read through and complete the pre-requisites before starting the tutorial.

Tutorial Repo
BeginnerMDSJSHTML

Hello world

Create your first MiniDapp that displays the latest block number

Pre - requisites

There are no special hardware requirements for building a MiniDapp.

You will need:

A laptop or server with the command line interface open A code editor, for example VS Code

and Java installed

To check if you already have Java installed type java -version in your Terminal/CLI


The minima.jar java file downloaded

Start a single test node

Starting a node with -genesis will start your own private test chain from the genesis (first) block with 1 billion coins to spend.


  • Create a new folder called minima and copy the minima.jar into that folder.
  • Copy the path to the folder
  • Open a new command line interface and cd into that folder - Enter the following:
Termianl
java -jar minima.jar -data minidata -basefolder minidata -genesis -test -nop2p -mdsenable -mdspassword [INSERT PASSWORD]

Replace INSERT PASSWORD with a custom password for the test node.


You will notice the minidata folder has been created in your minima folder. This will start a node on the default ports of 9001-5.

You should see the node starting up. You can type commands directly into the console, try entering balance to check your balance.


  • Type help for the full list of Minima commands.
  • Access your MiniDapp hub by going to https://127.0.0.1:9003
  • Accept the security warning and login with the password you set above

Start a second test node

We create a second node to test transactions between two nodes, note that we will need to:


  • remove the genesis parameter,
  • change the data and base folders,
  • add the port parameter to start it on a different port,
  • add the connect 127.0.0.1:9001 parameter to connect this node to the genesis node.

Node 2


  • Open a new command line window and cd into the folder where the minima.jar is located.
  • Enter the following command:
Termianl
  java -jar minima.jar -data minidata2 -basefolder minidata2 -test -nop2p -mdsenable -port 10001 -connect 127.0.0.1:9001 -mdspassword [INSERT NODE2 PASSWORD]

Replace INSERT PASSWORD with a custom password for the test node.

Optionally set a port of your choice, we use 10001 here

When you see Connected attempt success to 127.0.0.1:9001 in the logs, this confirms that the two nodes are connected.


You now have two nodes up and running that are connected to each other!

That's it, let's get started!

Intro

In this beginner tutorial, we will walk through how to create a very simple MiniDapp that shows the current block number.


You will learn how to:


  • Create your MiniDapp configuration file
  • Give your MiniDapp an icon
  • Create a basic user interface and use mds.js to show the current block number and update it whenever there is a new block
  • Package your MiniDapp
  • Install your MiniDapp onto your node

Step 1 - Config file


The dapp.conf file is the configuration file where we provide the MiniDapp metadata in JSON format which will be required by the MiniDapp Hub later.


  • Start by creating a new folder called helloworld.
  • In your code editor, create a new file called dapp.conf and add the following JSON:
dapp.conf
{
  "name": "Hello World",
  "icon": "favicon.ico",
  "version": "1.0",
  "description": "My Hello World MiniDapp"
}

Save the file in the helloworld folder. That's your config file done!


Step 2 - Icon


Now choose an icon for your MiniDapp, save an image with the name favicon.ico in the helloworld folder with your dapp.conf file.


Your folder should now contain two files:

dapp.conf
favicon.ico

Step 3 - Basic interface


Next, we will create a simple webpage which will be the home page of your MiniDapp. We will download and use the mds.js library to run a command that returns the current block number.


  • Downlaod the the latest version of mds.js from here and save it in the helloworld folder.
  • Create a new file in your code editor and copy and paste the following HTML code, or alternatively, create your own basic html page.

If you are comfortable with CSS styling you can also go ahead and create a .css file for your html file.


index.html
<html>
  <head>
    <!--   The MINIMA MDS JavaScript Library -->
    <script type="text/javascript" src="mds.js"></script>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <title>Hello World</title>
  </head>
  <body>
    <style></style>

    <h2>Hello World!</h2>
    <p>Current Block: <span id="block-id"></span></p>

    <script type="text/javascript">
      // Initiate current block variable
      let currentBlock
      //Init Minima API
      MDS.init(function (msg) {
        //Listens for the initial inited event
        if (msg.event === "inited") {
          //Once MDS is ready call the block command
          MDS.cmd("block", function (res) {
            //Get the current block number from response
            currentBlock = res.response.block
            //Display current block nuber on page
            document.getElementById("block-id").innerText = currentBlock
          })
        }
        //Listens for NEWBLOCK event
        if (msg.event === "NEWBLOCK") {
          //Run the block command
          MDS.cmd("block", function (res) {
            //Update the current block number
            currentBlock = res.response.block
            //Display current block number on page
            document.getElementById("block-id").innerText = currentBlock
          })
        }
      })
    </script>
  </body>
</html>

  • Save the file as index.html in your helloworld folder.

Step 4 - Package and install your MiniDapp


The final step is to zip up your MiniDapp and install it onto your node.

You should now have a folder structure that looks like this:

dapp.conf
favicon.ico
index.html
mds.js
styling.css (optional)

  • Open your helloworld folder and select all the contents and send them to a zip file.(DO NOT ZIP THE helloworld FOLDER ITSELF)
  • Name the zip folder helloworld.mds.zip
  • Log into your MiniDapp Hub at https://127.0.0.1:9003 and click on the + button to install your MiniDapp.
  • Select your helloworld.mds.zip file and click install

Alternatively, from the Minima Terminal, run the command:

Terminal
mds action:install file:C:Usersyournamehelloworld.mds.zip

Example: mds action:install file:C:\Users\yourname\helloworld.mds.zip

Now you can open your MiniDapp Hub and see your MiniDapp installed.

Congratulations! You have created your first MiniDapp!

Join the conversation