Skip to content

Latest commit

 

History

History
161 lines (103 loc) · 4.22 KB

README.md

File metadata and controls

161 lines (103 loc) · 4.22 KB
Raw

Fluxnode Website

Frontend website

Application Overview

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.

Main Features

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

Development and Building

Tools

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.

Starting the app

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)

Starting the server

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

Using the server

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.

Deployment Steps (using Docker)

  • 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