osmcha-frontend

OSMCha is composed by a group of softwares that together has the aim to make it easier to monitor and validate the changes in OpenStreetMap. Learn more …

Production instance: https://osmcha.mapbox.com
Test instance: http://osmcha-django-staging.tilestream.net/

This repository contains the frontend code. Other repositories are:

OSMCha backend code
OSMCha python library is used to analyse the OSM changesets
OSM Compare is used to analyse OSM features
OSM Changeset Viewer is used to display the changeset on the main map

Setting up editor

Prettier

This repository uses prettier to keep the code consistent and formatted. You can config your favourite editor by the following links

Atom users can simply install the prettier-atom package and use Ctrl+Alt+F to format a file (or format on save if enabled).
Visual Studio Code users can Search for Prettier - JavaScript formatter.

Prerequisite

Make sure your node version is 9.1.
Install yarn globally using brew install yarn.
Install watchman globally with brew install watchman.

Local development

yarn start
Open https://localhost:3000/?filters={%22date__gte%22%3A[{%22label%22%3A%222017-05-01%22%2C%22value%22%3A%222017-05-01%22}]}
- The app runs with https; Firefox is recommended since it allows self signed certificates.
- The staging database only has changesets until mid 2017; without the filter you will not see any changesets.

To sign in:

After loading the page in your browser, inspect the request made to social-auth/ and copy the oauth_token;
In other browser tab, access https://www.openstreetmap.org/oauth/authorize?oauth_token=<oauth_token> and give authorization in the OpenStreetMap page that will load;
You will be redirected to a blank page that has a oauth_verifier in the url. Copy the oauth_verifier;
Click on the Sign in button on your local OSMCha instance, paste the oauth_verifier and you will be logged in.

Local testing

Test the application before commiting any changes. If you encounter any error make sure you have watchman installed. Installation Guide.

yarn test

Deploy/Release

There are three stacks to deploy to
yarn deploy:dev deploys it to mapbox.github.io
yarn deploy:staging deploys it to osmcha-django-staging.tilestream.net
yarn deploy:prod deploys it to osmcha.mapbox.com

Run the tests with yarn test
(optional) before deploy, you might want to increment the version number of application.
- We use minor for all non-drastic changes.
- The patch is reserved for minor changes.
- We try to stick to sem-ver.
```
npm version minor
```
Then build the app with the following command.
```
yarn build:<stack>
```
- here stack could be dev, staging, prod. Refer to package.json for more info.
The next step involves deploying the build folder to github. If you get an error like this error: failed to push some refs to 'git' while doing the deploy step. Run rm -rf node_modules/gh-pages/.cache/.
```
yarn deploy:<stack>
```
- here stack could be dev, staging, prod. Refer to package.json for more info.
- oh-pages branch handles the build for staging, prod stacks.
- gh-pages branch handles the build for dev stack.
(optional) If you want to see the new changes on a staging or prod stack. You will need to draft a new github release. The convention is to append -staging or -production or just -server to the current version tag for the server to consume the build and separate concerns.
- for eg. if the version npm module version was v0.16.3.
- draft a github release with a tag v0.16.3-staging. (Note the name spacing)
- supply this version tag to the server.
- Refer to githubs article for creating releases.

Issues and feature requests

If you have any error reports of want to request new features, please read our contribution guide to file an issue.

raphaelBarman/osmcha-frontend