Modernize frontend code

.env

@@ -0,0 +1,18 @@
+# These values can be overridden at build time using an .env.local file, or at
+# run time when using Docker, by setting environment variables on the container.
+
+# API URL for OSMCha backend
+OSMCHA_API_URL=https://osmcha.org/api/v1
+
+OSMCHA_OSM_URL=https://www.openstreetmap.org
+OSMCHA_OSM_API=https://api.openstreetmap.org/api/0.6
+
+OSMCHA_ADIFF_SERVICE_URL=https://adiffs.osmcha.org
+OSMCHA_OVERPASS_BASE=https://overpass-api.de/api/interpreter
+OSMCHA_NOMINATIM_URL=https://nominatim.openstreetmap.org/search.php
+
+OSMCHA_PAGE_SIZE=25
+
+# default filter "from" (in days) and "to" (in minutes)
+OSMCHA_DEFAULT_FROM_DATE=2
+OSMCHA_DEFAULT_TO_DATE=5

.github/workflows/ci.yaml

@@ -0,0 +1,31 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm clean-install
+
+      - run: npm run typecheck
+
+      - run: npx biome format .
+
+      - run: npm run lint
+
+      - run: npm test

.gitignore

@@ -11,8 +11,15 @@
 
 # misc
 .DS_Store
-.env
-.env.*
+.env.local
+.env.*.local
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+public/env.json
+
+# Vite
+dist/
+*.local
+.env.local
+.env.*.local

.tool-versions

@@ -1,2 +1 @@
-nodejs 18
-yarn   1.22
+nodejs 22

Dockerfile

@@ -1,24 +1,20 @@
 FROM node:22-alpine as builder
 
-ENV DEBIAN_FRONTEND noninteractive
-
-ARG BUILD_ENV=prod
-
 WORKDIR /app
-COPY package.json yarn.lock /app/
-RUN yarn set version stable
-RUN yarn install
-
-COPY src/ /app/src
-COPY public/ /app/public
-ENV REACT_APP_PRODUCTION_API_URL /api/v1
+RUN apk update && apk add curl git jq
 
-# fix for openssl ERR_OSSL_EVP_UNSUPPORTED
-# 'error:03000086:digital envelope routines::initialization error'
-ENV NODE_OPTIONS --openssl-legacy-provider
+COPY package.json package-lock.json .
+RUN npm clean-install
 
-RUN yarn run build:${BUILD_ENV}
+COPY . .
+RUN npm run build
 
 FROM nginx:alpine
+
+RUN apk update && apk add jq
+
 COPY --from=builder /app/build /srv/www
-COPY nginx.conf /etc/nginx/templates/default.conf.template
+COPY docker/nginx.conf /etc/nginx/templates/default.conf.template
+COPY docker/90-write-env-to-json.sh /docker-entrypoint.d
+
+EXPOSE 80

README.md

@@ -1,33 +1,19 @@
 # osmcha-frontend
 
-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 …](ABOUT.md)
+This is the web frontend for [osmcha.org](https://osmcha.org/), a tool for reviewing and analyzing edits to [OpenStreetMap](https://openstreetmap.org/about).
 
-- Production instance: https://osmcha.org
-- Test instance: http://osmcha-django-staging.tilestream.net/
-
-This repository contains the frontend code. Other repositories are:
+Other relevant repositories that contain parts of the OSMCha application are:
 * [`osmcha-django`](https://github.com/OSMCha/osmcha-django) - the backend Django application
 * [`osmcha` (python library)](https://github.com/OSMCha/osmcha) - used by the backend to analyse OSM changesets
 * [`maplibre-adiff-viewer`](https://github.com/OSMCha/maplibre-adiff-viewer) - used to display the changeset on the main map
 
-## Setting up editor
-
-### Prettier
-
-This repository uses [prettier](https://github.com/prettier/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](https://atom.io/packages/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.
+## Development
 
-### Prerequisite
+To set up a local development environment:
 
-1. Install [asdf version manager](https://asdf-vm.com/guide/getting-started.html#getting-started)
-1. `asdf install` to install the required tools from [.tool-versions](./.tool-versions)
-1. `yarn install` (`brew install yarn` if required).
-
-### Local development
-
-1. `yarn start`
+1. Install Node.js and npm. The recommended Node.js version is listed in [.tool-versions](./.tool-versions). Tool managers like [asdf](https://asdf-vm.com/) or [mise](https://mise.jdx.dev/) can read this file and install the right version for you if you want. 
+1. Run `npm install` to install the required JavaScript dependencies.
+1. Run `npm run start` to start the frontend (it will rebuild automatically when you make changes)
 1. Open [http://127.0.0.1:3000](http://127.0.0.1:3000)
 
 Note: if you are running the frontend against the production backend (the
@@ -41,16 +27,15 @@ If you are running your own local copy of the
 [`osmcha-django`](https://github.com/OSMCha/osmcha-django) backend, you'll
 need to register your own OAuth app on openstreetmap.org, configure the backend
 to use that secret key, and then point this frontend at your local backend by
-setting the `REACT_APP_PRODUCTION_API_URL` environment variable. After that,
-normal OAuth login through the frontend UI should work.
-
-### Local testing
+setting the `OSMCHA_API_URL` environment variable. After that, normal OAuth
+login through the frontend UI should work.
 
-Test the application before commiting any changes. If you encounter any error make sure you have `watchman` installed. [Installation Guide](https://facebook.github.io/watchman/docs/install.html).
+### Testing and quality checks
 
-```bash
-yarn test
-```
+- `npm run typecheck` runs TypeScript to verify that the code does not have any type errors
+- `npm run check` checks that the code is formatted correctly and runs the linter (it also runs typechecking)
+- `npm run format` reformats code to match the expected conventions
+- `npm run test` runs the automated test suite
 
 ## Releasing and Deployment
 

biome.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["**", "!build", "!public", "!**/*.css"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      },
+      "correctness": {
+        "noUnusedVariables": "error",
+        "noUnusedFunctionParameters": "off"
+      },
+      "style": {
+        "useTemplate": "off",
+        "noNonNullAssertion": "off"
+      },
+      "a11y": {
+        "useButtonType": "off",
+        "noSvgWithoutTitle": "off",
+        "noStaticElementInteractions": "off",
+        "useKeyWithClickEvents": "off",
+        "useSemanticElements": "off",
+        "noLabelWithoutControl": "off"
+      }
+    }
+  }
+}

docker/90-write-env-to-json.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# Convert env to json and write out to overrides file
+jq -n 'env | with_entries(select(.key | startswith("OSMCHA_")))' > /tmp/env.overrides.json
+# Merge overrides and defaults together
+cp /srv/www/env.json /tmp/env.default.json
+jq -s '.[0] * .[1]' /tmp/env.default.json /tmp/env.overrides.json > /srv/www/env.json