Skip to content

bikehopper/bikehopper-ui

Repository files navigation

BikeHopper UI

BikeHopper is a navigation app for everything but cars. It gives you directions that include riding a bike, taking transit, or both. We're developing and testing in the San Francisco Bay Area, California, but in principle it could be used anywhere in the world where transit info is available in GTFS format.

BikeHopper uses:

BikeHopper is free software under the GNU Affero General Public License, which requires the source to be kept open. We discourage corporate uses of BikeHopper, but highly encourage self-hosted, community instances in other regions. Get in touch if you'd like us to help you be the first region beyond the Bay Area to set one up.

Getting Started With the BikeHopper UI

This project uses Vite as its build system and for running a dev server. To get started clone this repo, copy the .env.development.template to .env.development.local and put in a Mapbox token you create (free plan is fine), run npm install, then run npm start.

Requests to localhost are proxied to https://api-staging.bikehopper.org. This is configured by a "proxy" property within vite.config.json. Presently there is a thin client library at src/lib/BikehopperClient.js. More methods should be added as needed. This library calls the Bikehopper backend.

To expose your dev server to your local network (so you can access it from your phone), run npx vite --host.

Configuring local GraphHopper

If you're actively making changes to our fork of GraphHopper, follow these steps.

  1. You'll need a local OSM cutout for Northern California.

    wget http://download.geofabrik.de/north-america/us/california/norcal-latest.osm.pbf

    Place the OSM cutout at graphhopper/data/norcal-latest.osm.pbf.

  2. You'll also need GTFS data. Follow steps on this page, under "To Use the Feed and Ask Questions": https://www.interline.io/blog/mtc-regional-gtfs-feed-release/

    Place the GTFS zip file at graphhopper/data/GTFSTransitData_RG.zip.

  3. Edit the relevant variable in your .env.development.local to point to local GraphHopper.

Internationalization (WIP)

This is not entirely working yet, but currently, when you add a new message into the code, run npm run extract to extract the default message and its description to the English-language file.

And after syncing translations from Weblate, run the script compile-langs.sh. The lack of symmetry is just because this command was too complex to be put into package.json.