These assets are being developed for the purpose of having the web UI for ooniprobe and some aspects of the mobile version (mainly the rendering of measurement results).
This UI is also used to present the results inside of the mobile UI.
The OONI web UI is based on the following main components:
- react.js for the rendering of components
- webpack for building and dependency management
- bootstrap to make styling less painful
- custom icons for all apps and design
The dependencies of the web UI are all managed via yarn and they can be
installed with:
yarn install
This requires that you have a recent version of
node and yarn installed.
To install yarn on macOS with brew, you can run brew install yarn. On
Linux systems, you can install yarn using npm: npm install yarn. This
will install yarn locally, so the above command would become
./node_modules/.bin/yarn install.
To improve your development experience better it's recommended that you also install the following browser add-ons:
When developing the web UI you generally use the mocked API endpoints and have live reloading support.
To start the development server do:
npm run start
You can now use the development server on http://localhost:3000.
To build the Web UI to be used by ooniprobe on desktop you should run:
npm run deploy:prod
You will then find the built client inside of the dist/ directory.
To build the mobile assets for the web UI you should run:
npm run compile:mobile
The mobile assets will end up inside of the dist/ directory.
To run the end to end tests you should run:
npm run test
The suite of OONI applications use icons created & maintained by Open Source Design. Currently, the OONI related icons are located in this icons repository :