Git Product home page Git Product logo

osmcha-frontend's Introduction

osmcha-frontend

CircleCI

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 โ€ฆ

This repository contains the frontend code. Other repositories are:

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

  1. Install asdf version manager
  2. asdf install to install the required tools from .tool-versions
  3. yarn install (brew install yarn if required).

Local development

  1. yarn start
  2. Open https://localhost:3000?filters=%7B%22date__gte%22%3A%5B%7B%22label%22%3A%222020-04-01%22%2C%22value%22%3A%222020-04-01%22%7D%5D%7D of e.g. changeset#91638199
    • The app runs with https; Firefox is recommended since it allows self signed certificates.
    • The staging database does not have all the changesets that production has, therefore the filter is needed.

To also edit the part of the UI that is provided by the OSM Changeset Viewer

Checkout https://github.com/osmlab/changeset-map in a sibling folder.

In ./changeset-map:

  1. yarn link
  2. yarn build --watch

In ./osmcha-frontend

  1. yarn link "changeset-map"
  2. yarn start

Edits in both projects will result in a rebuild and reload the browser.

When finished, reset "osmcha-frontend" back to the npm version of "changeset-map" with yarn add changeset-map@latest

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 (currently broken)
  • yarn deploy:staging deploys it to staging.osmcha.org
  • yarn deploy:prod deploys it to osmcha.org
  1. Run the tests with yarn test

  2. (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
  3. 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.
  4. 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.
  5. (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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.