A web app for creating Time Keeping Enduro Route Sheets and JART roll charts.
The app uses Firebase Firestore for data, Hosting for web site and Vite for builds. There is only only Firebase project which we use for Production, all local development uses Firebase emulators. There are 3 top level folders, hosting contains the main web app.
/- Firebase project, use to deploy firestore rules and indexes./hosting- Web app, majority of code is here./migration- Temporary, for migrating old database.rulesTests- Tests for firebase rules. // TODO - consider merging into hosting
We require Node v20 LTS, normally using nvm install --lts and node use --lts to install and use it.
To get started you'll want to install the Firebase emulators if you haven't already. Follow the instructions to install the correct versions of Java and Node (ERC requires Node 20 LTS) for your platform then stop there as the rest of the setup of emulators is complete - see /firebase.json. NOTE - we don't install the Firebase CLI (firebase-tools) globally, it's instead access from hosting via npx firebase.
# First time only, install all NPM depenedencies including Firebase tooling
npm i
cd rulesTests
npm i
cd ../hosting
npm i
# Start the Firebase App
npm run firebase
# OPTIONAL - If firebase won't start and says something like "HTTP Error: 401, Request had invalid authentication credentials." then you need to logout and login
npx run firebase logout [email]
npx run firebase login
# Once started open http://localhost:5000
# NOTE - You can't use Google sign-in via 127.0.0.1, use localhost
open http://localhost:5000All UI development happens in the hosting folder. The HTML pages are in /src/pages and are built with Handlebars. The app still uses jQuery in places but I have been migrating slowly to Vanilla JS for the entire app so expect a mix of syntax. Bootstrap is used for styling.
There are 3 different sets of tests, unit tests for the route sheet code, Cypress end-to-end tests and unit tests for Firestore rules.
# Unit Test the Firestore rules
cd rulesTests
npm run test
# Unit & Integration Tests
cd hosting
npm run firebase # if not already running, run in separate terminal
npm run test # test:unit && test:e2eWhen developing new Cypress tests or debugging existing ones use the Cypress UI via npx cypress open. If you run into errors starting it just do an npm i and npx cypress install to make sure it's up to date. Here are examples of how to get it running.
Cypress UI
npm i
npx cypress install
# optional, use only if Cypress says to do it
npx browserslist@latest --update-db
npx cypress open# Start Firebase
cd hosting
npm run dev
# (in separate terminal) Run unit tests
cd ../rulesTests
npm run test
cd ../hosting
npm ci
npm run test:unit
# Run Cypress E2E tests
npm ci
# optional, use only if Cypress says to do it
npx browserslist@latest --update-db
npm run test:e2e
# Once tests pass successfully, push to Hosting Firebase
npm run delpoy
# [optional] Deploy Firestore Rules & Indexes ... if changed, not common
cd ..
npm run deployBackup is via the Backup action in /admin.html. You have to do it manually whenever you want. Lame but works for now.
Enduro Roll Chart 3.1 and Enduro Roll Chart have one difference.
- Resets - The Windows Enduro Rollchart app calculates Start Time for each reset relative to the previous reset. This can incur rounding errors (see 03gmer.rs). This codebase computes start times based on distance to the last speed change which is more accurate IMHO.
I woke up trying to print a JART for tomorrow's race and found it was completely in black and white. This never happened before so after stumbling through GIT histories, assuming I did something, I opened Chrome dev tools and found that Bootstrap is globally overriding the background in print to white. This answer explains why. Two questions:
- Why did this work until now? We used to embed the bootstrap.min.js but switched to the CDN - that must have broken it, and/or they made an update.
- How do I fix it? Use a new
layout_jart.hbsthat doesn't include bootstrap.
I've been trying to figure out how to get Vite into development mode. Tried Passing FIREBASE_FRAMEWORKS_BUILD_TARGET='development' see to firebase command but the build output shows 3 Vite build passes each in production with only the serve vite pass having development mode. Next try - .env.local which Vite supports
Outdated NPM Packages
firebase-admin and firebase-tools were both updated and have breaking changes (see 1 and 2). I also updated all packages for critical security updates.
TODO
- DONE - Update existing semver matches (root and)
npm update - DONE - Update out of semver (chai, cypress, firebase, vite)
- Do we need cypress in the root? Prolly not, and what about firebase?
DONE Hosting Rules
Uhh, we only have firestore.rules, do we need hosting rules? What are the defaults? Check this out. Docs are here, looks like by default public folder is shared and we're doing things fine. I
DONE - Build won’t run
Tried to fire up the emulator today but npm run firebase gives me this - weird as this used to work before. SOLUTION - access token was outdated, npx firebase logout and npx firebase login fixed it. Updated README
Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.DONE - Node v20 Upgrade (DONE) Dude, node 16 is so last year, need to bump to v20 LTS.
- Cypress
- v9 won't run, error, had to downgrade to Node 16.16.0 (LTS)
- ES Modules - plugins/index.js wouldn't load, renamed index.ts
- Mocha - Issues with ES Modules
- Can't load ESM Module, needed to use experimental node loader in .mocharc.js, also see this doc, and this note from Mocha Docs.
- __dirname not found, used this hack instead
On 2022-02-04 we switched to full SSL. I did this by switching DNS from Gandi to Cloudflare DNS, paying for a Hobby Dyno on Heroku, adding endurorollchart.com as a custom Heroku domain and turning on Heroku ACM. It was easy and magic and just works, so cool.