Create a Flux dApp – Windows 10 or 11 Guide

Contents

Prerequisites

Windows 10 or 11
WSL 2 (Windows Subsystem for Linux – Ubuntu)
Stop / Disable any previously installed web servers on your system
An account on https://hub.docker.com/ (Docker Username aka Docker ID)
A terminal (Such as Windows Powershell)
A Code Editor such as VS Code, Atom or Notepad++
Zelcore Wallet and Zelcore ID https://zelcore.io/
Supported Browser for ZelCore Wallet: Chrome / Edge / Brave

Guide to Creating a Flux dApp

Install Basic Tools

Download and install WSL 2 ( Windows Subsystem for Linux )
Click on START and type in POWERSHELL
Click on RUN AS ADMINISTRATOR
When the command line opens type in:

WSL ––install -d ubuntu

Restart computer
Open up the newly installed program UBUNTU and follow the instructions for the first time install. E.G: it may ask for a new username, password etc
When the command prompt comes up, type: sudo apt update
Download and install Docker Desktop by following these steps:
- https://www.docker.com/products/docker-desktop
- Open Docker and skip the tutorial
- Sign in to Docker (top right) and create a Docker account if you don’t have one already
- Click on SETTINGS > RESOURCES > WSL INTEGRATION > Checkmark both options
- Enable integration with my default WSL distro
- Ubuntu
- Click Apply & Restart
Create a folder somewhere on your computer called noderank … E.G: C:\noderank
In that new folder, create a file called index.html and save the following:

< html >
< head >
  < meta   name = "viewport"   content = "width=device-width, initial-scale=1" >
  < title >Node Rank</ title >
  < script   src = " https://code.jquery.com/jquery-3.6.0.min.js " ></ script >
  < script >
  function getNodeStats (){

    if ( $ ( "#node_ip" ). val ())
    {
      var settings = {
                "cache" :   false ,
                "dataType" :  "jsonp",
                "async" :   true ,
                "crossDomain" :   true ,
                "url" :  " https://explorer.flux.zelcore.io/api/fluxnode/listfluxnodes/ " + $ ( "#node_ip" ). val () ,
                "method" :  "GET",
                "headers" :  {
                    "accept" :  "application/json",
                    "Access-Control-Allow-Origin" : "*"
          }
      }
      $ . ajax (settings). done ( function  (data) {
          if (data. result [ 0 ]. ip   ==   $ ( "#node_ip" ). val ()) {
            $ ( "#rank" ). text ( "#" + data. result [ 0 ]. rank );
            $ ( "#time_to_front" ). text ( Math . round (data. result [ 0 ]. rank   *   2  / 60 ) +   " hrs" );
         }
      });
    }
  }

  </ script >
</ head >
< body >

< h1 >Flux Node Rank</ h1 >
< p >< label >Node IP</ label > < input   type = "text"   id = "node_ip" > < button   onclick = "getNodeStats()" >Go</ button ></ p >

< table   width = "300" >
  < tr >
    < td   width = "130" >Queue Position</ td > < td   id = "rank" ></ td >
  </ tr >
  < tr >
    < td >Time to Front</ td > < td   id = "time_to_front" ></ td >
  </ tr >
</ table >
</ body >
</ html >

Create a new file in the same folder called Dockerfile (no file extension, ensure uppercase D) and add the following:

FROM nginx:alpine
COPY . /usr/share/nginx/html

Click on START, type in the following, then click the result

\\wsl$

When Windows Explorer opens up, navigate to the following folder:
- Ubuntu-20.4 (or whatever version was installed)
- home
- [username] (name specified during WSL install)
Go back to the original C:\noderank folder with the 2 files and copy/paste them to the folder above
Reopen the Ubuntu Terminal and type in the following chain of commands
Now open Docker Desktop and click on IMAGES, then click RUN next to the newly created IMAGE
Enter 80 for the PORT and click RUN
The process is successful if the green running icon appears next to the randomly named CONTAINER. In this example: stoic_archimedes means there is a locally running web server.
Open a browser and navigate to http://127.0.0.1/ The Node Rank app should be visible.
Enter your Flux Node IP address (if you have one, if not, either purchase a 1,000 Flux Node, or use the sample Flux Node IP provided)
Go back to Docker Desktop and click DELETE on the container, then click CONFIRM
Now reopen the Ubuntu Terminal, make sure to be in the noderank directory, and type the following:
Now type the following… changing DOCKER_USER for the username created during registration of the Docker account
Go back to the Ubuntu Terminal and type in:
Head over to https://hub.docker.com/repositories and verify if it has been pushed.

Updated on June 11, 2024

Prerequisites

Guide to Creating a Flux dApp

Install Basic Tools

Related Articles