Code Monkey home page Code Monkey logo

mybonk-ui's Introduction

Raspiblitz Web - a responsive Web UI for the RaspiBlitz

Raspiblitz Dashboard

In collaboration with Bitcoin Design.

Images of the WebUI can be found at raspiblitz-web-progress

Built with React & Tailwind CSS.

Translations

If you want to bring the Raspiblitz WebUI to other languages, please help us translate it via Weblate :)

Big thanks to our translators, which you can find in this README.

Development

Dependencies

Update npm dependencies

yarn upgrade-interactive

If you notice several versions of a dep in the yarn.lock-file:

yarn dedupe

Further info: https://dev.to/arcanis/yarn-2-2-dedupe-faster-lighter-ha5#dedupe-command

Dev workflow

Frontend

yarn install
yarn start

Backend

For the backend, there currently exist three options:

  • Use an existing RaspiBlitz
    • Easy to setup, but needs a RaspiBlitz
  • Using the provided Mock backend
    • Easy to setup, but limited data
  • Using blitz_api with Polar
    • Some changes needed for local development
    • Possibly more data (depending on your ln setup :) )
Mock backend

See backend-mock folder

Open another terminal

cd backend-mock
yarn install
yarn start

Then go to http://localhost:3000 and use the password password.

Blitz API

This guide uses Polar for easier development, but you can also use a real lightning node.

  • Download Polar and run it.
    • Create at least one bitcoin and one lightning node.
  • Clone the blitz_api and install the dependencies.
    • In addition, you will need redis installed for blitz_api to work.
  • Create a .env file (see .env_sample in blitz_api) and copy the bitcoin and ln info into it.
    • Important: When definining shell_script_path you need to define a directory where a folder called config.scripts and a file called blitz.debug.sh reside in. Otherwise blitz_api may not work (used on the RaspiBlitz for logging)
  • Make the following change in blitz_api:
    • In main/app/main.py, change the prefix_format from /v{major} to /api/v{major}.
  • Change the BACKEND_SERVER value in vite.config.ts to your local blitz_api installation.

Now you can start the blitz_api and run yarn start in raspiblitz-web.

Please do not commit the above changes.

Use a external RaspiBlitz as Backend

  • (Optional): Make sure nvm is installed.
  • (Optional): Run nvm install 18 or if already installed nvm use
  • Install yarn on a fresh nvm: npm install --global yarn
  • Install the dependencies with yarn install
  • Change the BACKEND_SERVER value in vite.config.ts to your local RaspiBlitz - for example if your RaspiBlitz is running on local IP 192.168.1.123 then change the value to http://192.168.1.123:80
  • with yarn start it should now connect to your external RaspiBlitz

Credits & Licenses

Icons

App logos

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.