diff options
Diffstat (limited to 'docs/hacking')
| -rw-r--r-- | docs/hacking/uidev.rst | 106 | 
1 files changed, 105 insertions, 1 deletions
| diff --git a/docs/hacking/uidev.rst b/docs/hacking/uidev.rst index 4ada825e..968fa010 100644 --- a/docs/hacking/uidev.rst +++ b/docs/hacking/uidev.rst @@ -3,4 +3,108 @@  Bitmask's Javascript User Interface  ==================================== -(stuff goes here). +Some notes specific to development of the javascript ui interface. For more detail, see ``ui/README.md``. + +Run headless backend in development mode +---------------------------------------- + +Prerequisites:: + +.. note: move this snippet to a common include! + +  sudo apt install build-essential python-dev python-virtualenv \ +                   libsqlcipher-dev libssl-dev libffi-dev + +Install and activate a virtualenv:: + +  cd bitmask-dev +  virtualenv venv +  source venv/bin/activate + +(Refer to the `virtualenv documentation` if you're not using bash/zsh/dash). + +All the subsequent commands assume that you have activated the virtualenv. + +Install all the python dependencies:: + +  make dev-backend + +Run application:: + +  bitmaskd + +.. _`virtualenv documentation`: https://virtualenv.pypa.io/en/stable/userguide/#activate-script + +Run user interface frontend +--------------------------- + +If you want to run the Bitmask user interface, you additionally need the +following: + +Prerequisites:: + +  sudo apt install python-pyqt5  python-pyqt5.qtwebkit + +Install python dependencies:: + +  make dev-all + +Note: even though the UI is in javascript, Qt is used to create a webview +window. + +Run user interface:: + +  bitmask + +The command `bitmask` should be in your path if you have activated the virtual +environment. + +Install Bitmask user interface in development mode +-------------------------------------------------- + +The above instructions will install a python package that contains a pre- +bundled version of the javascript UI. + +If you want to modify the javascript UI, then you need to be able to update the +javascript bundle whenever a javascript or CSS source file changes. To support +this, we build a python package of the javascript UI and install it in +"development mode" so that changes to the contents of the package are reflected +in bitmaskd immediately. + +Prerequisites:: + +  sudo apt install nodejs npm nodejs-legacy + +Next, run ``dev-install``:: + +  cd ui +  make dev-install + +Now you should be able to run the user interface with debugging tools:: + +  bitmaskd +  cd ui +  npm run ui + +This command is the same as running:: + +  chromium-browser "http://localhost:7070/#$(cat ~/.config/leap/authtoken)" + +Firefox does not work as well, because the UI is only tested with webkit-based +browsers. + +Chromium is not the most ideal, however, because it uses a newer webkit than is +available in Qt. Instead, try qupzilla:: + +  sudo apt install qupzilla +  bitmaskd +  qupzilla -ow "http://localhost:7070/#$(cat ~/.config/leap/authtoken)" + +If you make a change to any of the CSS or JS source files, you need to rebuild +the javascript bundle. You can do this continually as files change like so:: + +  cd ui +  node run watch + +The new javascript bundle will be used when you refresh the page so long as +``make dev-install`` was previously run. | 
