Skip to content

OpenObservatory/ooni-wui

Repository files navigation

OONI Web UI assets

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.

Development instructions for OONI web UI

The OONI web UI is based on the following main components:

Setup

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.

Usage

To improve your development experience better it's recommended that you also install the following browser add-ons:

Development server

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.

Building Web UI

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.

Building mobile UI

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.

Testing

To run the end to end tests you should run:

npm run test

Custom Icons

The suite of OONI applications use icons created & maintained by Open Source Design. Currently, the OONI related icons are located in this icons repository :