The webapp for the MetroHero project, a (now defunct) app for WMATA Metrorail commuters and transit nerds in and around the DC area. This repository contains all the client-side source code for the webapp. For MetroHero's server-side source code, see the MetroHero server repository.
This project requires a live connection to an instance of the MetroHero server. Check out that repository for more information. It includes the latest official build of this webapp inside of it, so if you're only looking to use MetroHero as-is, you may not need to use this repository at all.
- Replace the Google API key
AIzaSyC5JJA1M_5GtVLwvWQzVa-yWkkG-woykZM
in src/components/RealtimeMap.js with your own key. (This key has been deactivated and doesn't do anything.) You can follow this guide to generate your own key. If you don't do this, the 'Live Google Map' feature of the app won't work properly. - Replace the Google Analytics 4 API key
G-7PMPTFBSB3
in src/components/App.js with your own key. (This key has been deactivated and doesn't do anything.) You can follow this guide to generate your own key. If you don't do this, you won't be able to collect anonymized data about how users are using the webapp via Google Analytics, e.g. what pages they're visiting and when.
- Globally install nvm
- Globally install node:
nvm install 10.24.1
(you can try newer versions, but YMMV) - Globally install gulp (using the same version defined in package.json):
npm install --global gulp-cli@^2.3.0
- (Optional) Globally install npm-check to periodically try upgrading packages and whatnot.
- Run
npm install
in the project directory to install dependencies. If you get errors, e.g. with a newer version of Node and npm, trynpm install --legacy-peer-deps
.
To test against a running local instance of metrohero-server:
./node_modules/gulp-cli/bin/gulp.js watch --test
Or, to test against live production:
./node_modules/gulp-cli/bin/gulp.js watch --production
Your browser should start automatically. Wait a few seconds for it to load.
Once initial loading is complete, make changes to the project. Any changes you make should then take effect within a few seconds if you go back and look at them in your browser. You may need to re-navigate to the page you were on in the webapp once refreshing is complete.
- Modify the value of the
stage
attribute in thescripts
object of the package.json file located in the same directory as this README to target the relative path of where your local MetroHero Server source code is checked out. The bit that you'll want to replace in thatstage
attribute value is this:../metrohero-server/src/main/webapp
- Run
gulp build
- Run
npm run stage
- Start MetroHero Server or, if it's already started, simply hard refresh your browser to see your changes.
- Once you're satisfied with the changes, use
git
to push your changes to production or whatever other workflow you've established for releasing to your production environment; change control of the compiled/built webapp code is handled by MetroHero Server, not MetroHero Webapp itself.