Raspiblitz Web - a responsive Web UI for the RaspiBlitz

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

• Node.js
• asdf is supported but not required.
• Nix with Flakes enabled (optional, for devenv.sh or NixOS builds)

Update npm dependencies

npm update

Development with devenv.sh

This project supports devenv.sh, a developer environment tool built on Nix.

Setup

1. Install devenv.sh by following the instructions at https://devenv.sh/getting-started/
2. Run devenv shell to enter the development environment
3. Devenv will install the npm dependencies automatically when entering the shell. To change this behaviour, change javascript.npm.install.enable = true; to false and run npm install after entering the shell.

Benefits of using devenv.sh

• Consistent development environment across all contributors
• Automatically installs the correct version of Node.js and other dependencies
• Includes development tools like TypeScript, ESLint, and Nix utilities
• Works on any platform that supports Nix (Linux, macOS, WSL)

Dev workflow

Simple dev setup

npm install
cd backend-mock
npm install
cd ..
npm run dev:local

The npm run dev:local command starts the frontend and the backend mock server.

The backend mock server restarts automatically when you change a file in the backend-mock folder.

Frontend

npm install
npm run 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
npm install
npm run start

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

Testing

Unit tests

npm test

E2E tests

Run tests headless:
npx playwright test

Run test with UI:
npx playwright test --ui

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 npm run start in raspiblitz-web.

Please do not commit the above changes.

Use a external RaspiBlitz as Backend

• (Optional): Make sure asdf is installed
• (Optional): Run asdf install nodejs latest:20
• Install the dependencies with npm 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 npm run start it should now connect to your external RaspiBlitz

Credits & Licenses

Icons

• RaspiBlitz Icon from RaspiBlitz
  • MIT License
• Other icons from Hero Icons & BitcoinDesign Icons
  • MIT License Hero Icons
  • MIT License Bitcoin-Icons
• CSS Loading Spinner from loading.io
  • CC0 License
• ButtonSpinner from SpinKit
  • MIT License

App logos

• BTC RPC Logo from Bitcoin Explorer
  • MIT License
• BTCPay Logo from btcpayserver
  • MIT License
• RTL Logo from RTL
  • MIT License
• Specter Logo from specter-desktop
  • MIT License
• Mempool.space Logo from mempool
  • Mempool.space Trademark Policy
• LNbits Logo from lnbits-legend
  • MIT License
• LND Logo from LightningLabs
  • MIT License (?)
• Core Lightning Logo from Blockstream
  • Blockstream Corporate Brand Guideline
• Alby Logo from Alby media repo
  • License unclear