Frontend website

The website allows users to display their node information to get a more collective view of the status of their various nodes. The website consist out of two pages

• Index : Node health overview linked to a wallet.
• Guides : Provide links to useful guides and Youtube videos. Command troubleshooting commands are also available.

Below are some of the key features to the website:

• Flux price
• Total nodes
• Total nodes per tier (Cumulus, Nimbus and Stratus)
• Wallet amount (Flux and USD)
• Estimated earnings
• Node Overview
• Parallel Assets

Make sure to have the following stuff installed on your machine.

• Node & Yarn (npm can be used too, but yarn is recommended)
• Docker (with BuildKit enabled)
• A Rust toolchain (cargo and rustc, v1.62 or higher)

Verify the installation with these commands:

• Node/Yarn

  node --version
  yarn --version

• Docker

  docker version

  If the output says "Cannot connect to the Docker daemon" (or similar) start the docker service using sudo systemctl enable --now docker and then try again.

• Cargo/Rust

  cargo --version
  rustc --version

  Make sure the version is 1.62 or higher.

The client/ folder contains all the code for frontend app made with React.

• Install the frontend client dependencies

  # This assumes your working directory is the repository's root
  cd client
  yarn install

  Subsequent commands assume that you are still in the client/ directory.

• Run the app:

  yarn start

• Visit http://localhost:3000 in your browser. The app does not use the API wrapper in dev mode, so you do not need to start the server. (See below)

The api/ folder contains a server (written in Rust) that acts as a thin wrapper/proxy in front of the official flux node API.

• Build the server

  # This assumes your working directory is the repository's root
  cd api
  cargo build

  Subsequent commands assume that you are still in the api/ directory.

• Start the server

  cargo run

  This starts server on port 5049. The port can be changed using the APP_API_PORT environment variable. For example: APP_API_PORT=7000 cargo run

In dev mode, the frontend client is configured to not use the API wrapper and instead directly use the official APIs.

To make it use the server in dev mode too, first start the server in another terminal using above steps. Then add the following lines in <REPO_ROOT>/client/.env.development.local (create the file if it doesn't exist).

REACT_APP_FLUXNODE_INFO_API_MODE="proxy"
REACT_APP_FLUXNODE_INFO_API_URL="http://localhost:5049"
REACT_APP_ENABLE_FLUX_NODE_API=false
REACT_APP_SEARCH_BY_ZELID=false

Replace value of REACT_APP_FLUXNODE_INFO_API_URL with the actual url of the API server.

Now you can start the frontend app as usual in a separate terminal. Also make sure the server keeps running.

To revert the change and use the official APIs in dev mode, set the value of REACT_APP_FLUXNODE_INFO_API_MODE back to debug.

• First, enable BuildKit.

• Build the frontend

  # This assumes your working directory is the repository's root
  cd client
  yarn build

• Build the docker image

  # This assumes your working directory is the repository's root
  docker build -t <USERNAME>/<REPOSITORY>:<TAG> .

  Replace <USERNAME>, <REPOSITORY> and <TAG> with your own values.

• Update to Docker repo after testing

docker login

docker tag <REPOSITORY> <USERNAME>/<REPOSITORY>:<TAG>

docker push <USERNAME>/<REPOSITORY>

While running the container, map exposed port 80 of the container to your desired port on host machine. For example.

docker run --rm --name="flux-node-web" -it -p 9000:80 <USERNAME>/<REPOSITORY>:<TAG>

The app would then be available on http://localhost:9000