Are you ready to create the next great decentralized application and disrupt with us on Web 3.0? Let's go!
WSL ––install -d ubuntuThe following will appear after typing the command:
This will update the core system ahead of the new installs coming up
This guide explains how to create a simple html / javascript dApp:
|
< 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 > |
FROM nginx:alpine COPY . /usr/share/nginx/html*The purpose of this file is to instruct Docker what type of image to create. In this example we're installing an Nginx web server on the Alpine Linux distribution.
Now that we have the files we need (index.html and Dockerfile) we're going to copy them to the Ubuntu file system within Windows, ready to Dockerize them (add them to a Docker Image). The Docker Image is what we'll push to Flux.
\\wsl$
\\wsl.localhost\Ubuntu-20.04\home\username
\\wsl.localhost\Ubuntu-20.04\home\username\noderank
NOTE: If the expected output doesn't appear, close the Ubuntu Terminal, reopen and try again
[email protected]:~$ dir noderank [email protected]:~$ cd noderank [email protected]:~/noderank$ sudo docker build -t noderank .
When running the docker build command it may ask for the password that was created during WSL install
If the docker build command was successful, something like this will appear:
[email protected]:~/noderank$ sudo docker build -t noderank . [+] Building 2.4s (7/7) FINISHED => [internal] load build definition from Dockerfile => => transferring dockerfile: 92B => [2/2] COPY . /usr/share/nginx/html => exporting to image => => exporting layers => => writing image sha256:b69c071a02f4a066e98744cc7562447235ea => => naming to docker.io/library/noderank [email protected]:~/noderank$
This sample app queries the list of live Flux Nodes and shows the current position of the Flux Node using the IP address and calculates the estimated time to the front of the queue.
The next step is to push the Docker Image to the Docker Hub.
This does not delete the IMAGE, just the CONTAINER.
Think of the CONTAINER as the VPS (Server); and think of the IMAGE as the operating system, software and files. In this example, Flux is the Container and the dApp is the Image.
sudo docker login
Note: If it's not in the noderank directory, type in CD /home/username/noderank (replace username with the one you created during WSL install).
You may be asked for your Ubuntu WSL password (otherwise known as the Root / Sudo Password); and you may be asked for your Docker username and password.
Consider upgrading your password security by keeping your Docker password in a credentials store: https://docs.docker.com/engine/reference/commandline/login/#credentials-store
Correct execution will yield the following:
[email protected]:~/noderank$ sudo docker login [sudo] password for username: Login with your Docker ID to push and pull images from Docker Hub. If you don't have a Docker ID, head over to https://hub.docker.com to create one. Username: docker_user Password: Login Succeeded Logging in with your password grants your terminal complete access to your account. [email protected]:~/noderank$
sudo docker tag noderank docker_user/noderank:latest
The newly tagged IMAGE in Docker Desktop should appear.
sudo docker push docker_user/noderankExpected outcome will show something like this:
[email protected]:~/noderank$ sudo docker push docker_user/noderank Using default tag: latest The push refers to repository [docker.io/smartico/noderank] 99524b48e93e: Pushed 6fda88393b8b: Mounted from library/nginx a770f8eba3cb: Mounted from library/nginx 318191938fd7: Mounted from library/nginx 89f4d03665ce: Mounted from library/nginx 67bae81de3dc: Mounted from library/nginx 8d3ac3489996: Mounted from library/nginx latest: digest: sha256:1ce5bc6e3a003c0e63ba718807f543 [email protected]:~/noderank$
Make a note of the Docker Hub Repository (E.G: smartico/noderank) as it needs to be entered into the section Install Docker Image further down. This is where Flux will pull the dApp Image from
This guide demonstrates how to create a simple HTML/ JavaScript dApp:
|
< 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 > |
FROM nginx:alpine COPY . /usr/share/nginx/htmlNote: The purpose of this file is to instruct Docker what type of image to create. In this example, it is installing an Nginx web server on the Alpine Linux distribution.
With the new files in place (index.html and Dockerfile) the next step is to Dockerize them (add them to a Docker Image). The Docker Image is what we'll push to Flux.
computer:~ username$ cd Desktop/noderank computer:noderank username$ sudo docker build -t noderank .
computer:noderank username$ sudo docker build -t noderank . [+] Building 2.4s (7/7) FINISHED => [internal] load build definition from Dockerfile => => transferring dockerfile: 92B => [2/2] COPY . /usr/share/nginx/html => exporting to image => => exporting layers => => writing image sha256:b69c071a02f4a066e98744cc7562447235ea => => naming to docker.io/library/noderank computer:noderank username$
This sample app queries the list of live Flux Nodes and shows the current position of the Flux Node using the IP address and calculates the estimated time to the front of the queue
The Docker Image is now ready to be pushed to Docker Hub:
Note: This does not delete the IMAGE, just the CONTAINER. Think of the CONTAINER as the VPS (Server); and think of the IMAGE as the operating system, software and files. In this case, Flux is the Container and the dApp is the Image.
sudo docker login
Note: If not in the noderank directory, type CD /users/username/desktop/noderank (replace username with your mac login username).
The Mac login password may be requested here; as might the Docker Hub username and password.
Consider upgrading the password security by keeping the Docker password in a credentials store: https://docs.docker.com/engine/reference/commandline/login/#credentials-store
If this step has worked this message will appear
computer:noderank username$ sudo docker login [sudo] password for username: Login with your Docker ID to push and pull images from Docker Hub. If you don't have a Docker ID, head over to https://hub.docker.com to create one. Username: docker_user Password: Login Succeeded Logging in with your password grants your terminal complete access to your account. computer:noderank username$
sudo docker tag noderank docker_user/noderank:latestThe newly tagged IMAGE in Docker Desktop will appear
sudo docker push docker_user/noderank
Successful execution of step 4 will return this:
computer:noderank username$ sudo docker push docker_user/noderank Using default tag: latest The push refers to repository [docker.io/smartico/noderank] 99524b48e93e: Pushed 6fda88393b8b: Mounted from library/nginx a770f8eba3cb: Mounted from library/nginx 318191938fd7: Mounted from library/nginx 89f4d03665ce: Mounted from library/nginx 67bae81de3dc: Mounted from library/nginx 8d3ac3489996: Mounted from library/nginx latest: digest: sha256:1ce5bc6e3a003c0e63ba718807f543 computer:noderank username$
Make a note of the Docker Hub Repository (E.G: smartico/noderank) as it will be needed in the section Install Docker Image below ... This is where Flux will pull the dApp Image from.
Before you can register an App, you are required to submit it for approval to be whitelisted.
Please submit a request on https://discord.io/runonflux in the #deploy_dapp_runonflux_info channel
|
App Name |
Name of your dApp which will form part of the URL |
|
App Desc. |
Description that will appear in the Global Apps List. |
|
Owner |
Your Zel ID |
A component is essentially a single Docker Image. Therefore it is possible to have multiple components in the same App and have them talk to each other through their component name.
|
Repository |
Docker Hub Image Namespace |
|
Environment |
Environment Variables: a place to store your sensitive data (mysql password) so that they’re not hardcoded in your app files. |
|
Run Command |
Array of strings of Commands |
|
Directory |
Data folder that is shared by application to App volume E.G: /tmp |
|
Public Port(s) |
Array of Ports on which application will be available |
|
Domain(s) |
Array of strings of Domains managed by Flux Domain Manager (FDM). Length must correspond to available ports. Use empty strings for no domains E.G: [“”] or [“noderank.com”]
If you use a custom domain for the app, please create a DNS CNAME record at the domain host and point it to the Flux Domain (noderank.app.runonflux.io) |
|
Private Port(s) |
Container Ports - Array of ports which the container has |
|
Instances |
Number of Flux Nodes you want your app replicated on. The more instances selected, the more traffic your App can handle. It is recommended starting off with the minimum of three. Each Instance above three carries a cost depending on the hardware selected. |
|
CPU |
Processors:
From 0.1 to 7 vCore |
|
RAM |
Memory:
From 100 to 28,000 MB |
|
SSD |
Storage:
From 1 to 565 GB |
It might take a short while for the Block to get mined before accessing the app
Example: https://noderank.app.runonflux.io
Note: Do not leave the Register Your App page open for too long with no activity, otherwise it will timeout and you may have to repeat the entire process again.
As the app is tested and evolves, changes will need to be pushed to the live Flux App. Here are the steps to push it from a local machine to the Flux Network.
If a few hours is too long to wait for the changes to propagate globally across the Flux network (I.E: https://noderank.app.runonflux.io ) follow these steps to soft redeploy to just one Node.
You can point a custom domain of your choice such as yourdapp.com to your Flux Dapp via a Flux Domain Name (FDN) - yourdapp.app.runonflux.io. It is recommended to use CloudFlare; and you only need to add a CNAME record.
If you did not add a custom domain during your initial dApp setup, adding it afterwards will incur a very small Flux charge, as your app change submission has to be sent to the Flux network to be mined and confirmed.
That's it from the Flux side, now we need to configure your custom domain at your host and Cloudflare.
Note: In the example use case, CloudFlare's role is to act as a middleman between the domain name company (E.G: godaddy.com) and the Flux network, forwarding traffic to the Flux dApp.
