Web client for Meedan Check, a collaborative media annotation app
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docker/production use a symlink instead of a mv op Jan 30, 2018
localization Update l10n + fix error message Dec 12, 2018
log Another pass of eslint #4996 Mar 5, 2017
scripts Fix Firefox SyntaxError: illegal character on development env Dec 7, 2018
src Update l10n + fix error message Dec 12, 2018
test #7138 Fix integration test; l10n files Dec 12, 2018
webpack Ticket #7160: Code Coverage (#357) Oct 23, 2018
.babelrc Copy relay.json during build time #4946 Apr 27, 2017
.dockerignore Production dockerfile fixes #4946 May 2, 2017
.eslintrc Updating .eslintrc Jul 26, 2018
.gitignore Ticket #7160: Code Coverage (#357) Oct 23, 2018
.travis.yml Use develop branch for Check API on Travis Dec 12, 2018
Dockerfile Update dev environment May 3, 2017
Gemfile #5765 Add Gemfile and update docs Jun 16, 2017
Gemfile.lock #5765 Add Gemfile and update docs Jun 16, 2017
Guardfile #5765 Remove changes unrelated to this ticket Jun 15, 2017
LICENSE Initial commit Jun 4, 2016
README.md Remove node-sass, style-lint, postcss, sass-graph and Sass build scri… Oct 13, 2017
config-build.js.example Parameterize transifex project name Dec 12, 2017
config-server.js.example Revert "Revert "Merging with develop and fixing conflict"" Jul 11, 2017
config.js.example #6577 geolocation search Jul 6, 2018
docker-entrypoint.sh Also install modules when building first time Aug 18, 2017
gulpfile.babel.js Better build error log [skip ci] May 23, 2018
package.json Ticket #7060 - add validation for invite members form and apply Karim… Nov 8, 2018

README.md

Check Web

Travis

Verify breaking news online.

Overview

This is the web client of Check.

Dependencies

Installation

With Docker

If you are just getting started, you probably want to install the full Check stack with Docker.

Using Dev mode

The dev mode build (npm run build:dev.) is intended to be used instead of the existing "full build" (npm run build) during local development. The dev mode reduces build time primarily by enabling webpack's watch feature, which uses caching and auto-rebuilding. It also disables sourcemaps by default.

  • Run npm run build:dev.
  • This runs the compiler. It monitors for changes, automatically triggering a rebuild. Press Ctrl+C to stop.
  • The script is defined in package.json — it uses both gulp and webpack

Dev mode with LiveReload

In dev mode can optionally use guard-livereload for cross-browser live-reloading, as configured in check-web/Guardfile.

  • Run npm run build:dev per above.
  • Install the LiveReload browser extension
  • Install Guard and Guard-livereload gems with bundler: bundle install
  • Run guard: cd check-app/check-web && bundle exec guard
  • Open localhost:3333 and turn on the browser extension (click it).
  • You should see "Browser connected" in the Guard window.
  • When you save a .js file, build:dev rebuilds, then Guard notices the new bundle and triggers LiveReload. The page automatically refreshes and reflects your js changes.

Installation without Docker

  • Copy config.js.example to config.js and define your runtime configurations
  • Copy config-build.js.example to config-build.js and define your build-time configurations (optional)
  • Copy config-server.js.example to config-server.js and define your server configurations
  • npm install
  • npm run build
  • SERVER_PORT=3333 npm run publish (which basically serves the contents from build/web)
  • Open your browser and go to http://localhost:3333
  • For better debugging, set your NODE_ENV environment variable to development instead of production.

Localization

Translations are managed in Transifex. All the contents are stored in the localization directory which contains the following subfolders:

  • localization/react-intl: Contains the files extracted by babel-plugin-react-intl (localizable strings)
  • localization/transifex: Contains the files above, but converted to Transifex JSON format
  • localization/translations: Contains the translations files downloaded from Transifex plus a translations.js file which concatenates all of them in a single JSON file used by react-intl

By default, the application is displayed in the browser's language using the files from localization directory. If you want to work with other language or you want to exchange files with Transifex, you need to:

  • Add a locale entry to your config.js. This is the locale for Check. If not present, falls back to browser locale.
  • Copy config-build.js.example to config-build.js (if you don't have it yet) and add your Transifex user and password. If not present, instead of getting translations from Transifex and sending strings to it, it will use the static files at localization.

Then you can use npm run transifex:upload and npm run transifex:download to upload and download translations, respectively.

Testing

Integration tests

Running

  • Compile the code with npm run build
  • Copy test/config.yml.example to test/config.yml and set the configurations
  • Copy test/config.js.example to test/config.js and set the configurations
  • Start chromedriver and the application (SERVER_PORT=3333 npm run publish)
  • Run npm run test:integration

Writing

  • Use API calls (instead of using Selenium) to create all test data you need before the real thing that the test is testing
  • Tag the test with one of the existing tags

Unit tests

  • Run npm run test:unit

Missing tests

If you don't have time to implement an integration test for your feature, please add a pending test for that, like this:

it "should do whatever my feature expects" do
  skip("Needs to be implemented")
end

In order to implement a pending unit test, do this:

it("should do whatever my unit expects");

Notes and tips

  • Run npm install babel-register -g if you face errors related to babel-register
  • Remove your node_modules directory if you face errors related to npm install