Skip to content

development.md

Latest commit

 

History

History
127 lines (84 loc) · 3.4 KB

development.md

File metadata and controls

127 lines (84 loc) · 3.4 KB
Raw

Development

The web app is built with:

  • Vue.js for templating and reactive updates
  • Firebase Hosting for hosting
  • Go toolchain (go run ./cmd/build/) that orchestrates Less to CSS, YAML to JS, Pug to HTML (via npx pug3), JS minification, and cache-busting
  • pug3 to convert Pug templates to HTML (the only npm devDependency)
  • firebase-tools for Firebase CLI (install globally)

Install build tools:

npm install

This gives you pug3, the only npm dependency. The Go build toolchain uses it via npx.

For image compression and deployment, install these globally:

npm install -g firebase-tools svgo png-minify

Source layout

All the code you care about lives in src:

The app is made of Pug partials, Less stylesheets, and a YAML file for third-party service definitions. The Go build compiles everything into a single index.html under public, plus minified CSS and JS files.

To build:

❯ make build

This generates index.html, style.min.css, main.min.js, utils.min.js, thirdpartyservices.min.js, and locale files.

Other useful commands:

❯ make watch            # watch for changes and rebuild automatically
❯ make reviews          # regenerate reviews page from cached data
❯ make reviews-force    # regenerate reviews page (re-fetch from GitHub)

You can also pass flags directly to the Go build tool:

❯ go run ./cmd/build/ -lang de        # build only a specific locale
❯ go run ./cmd/build/ -clean          # clean public/ before building

Compress images

❯ ./scripts/compress_images.sh

Adding a 3rd party service

The third-party services list is generated from a YAML file. To add one, open a PR that adds an entry to src/includes/yaml/thirdpartyservices.yml:

- name: Google Play Services
  enabled: false
  logo: images/third_party_logos/gps.png
  link:
    privacy: https://www.google.com/policies/privacy/
    terms: https://policies.google.com/terms

Drop the logo into public/images/third_party_logos/. Make it 160x160 pixels.

Tip: Use remove.bg to strip the background and imagetools.org/trim to trim excess space.

Updating packages

npm update

Serving locally

Builds and serves on port 8000:

❯ make serve

Use a custom port with:

❯ go run ./cmd/build/ -serve -port 9090

Testing

E2E tests run against the dev server using Playwright (Chromium only):

❯ make test          # run all tests
❯ make test-ui       # run with Playwright UI mode
❯ make test-debug    # run with Playwright debug mode

Tests are in tests/. The dev server starts automatically when you run tests.

Deploying to production

Note: Only maintainers with Firebase console access can deploy.

firebase login
❯ make firebase-deploy VERSION="3.0.9"

Omit VERSION and you will be prompted for it.

Tools