browsertrix/frontend
Ilya Kreymer e3f268a2e8
CI setup for new swarm mode (#248)
- build backend and frontend with cacheing using GHA cache)
- streamline frontend image to reduce layers
- setup local swarm with test/setup.sh script, wait for containers to init
- copy sample config files as default (add storages.sample.yaml)
- add initial backend test for logging in with default superadmin credentials via 127.0.0.1:9871
- must use 127.0.0.1 instead of localhost for accessing frontend container within action
2022-06-06 09:34:02 -07:00
..
assets
src
xliff
.dockerignore
.gitignore
Dockerfile CI setup for new swarm mode (#248) 2022-06-06 09:34:02 -07:00
frontend.conf.template refactor to use docker swarm for local alternative to k8s instead of docker compose (#247): 2022-06-05 10:37:17 -07:00
lit-localize.json
locations.conf refactor to use docker swarm for local alternative to k8s instead of docker compose (#247): 2022-06-05 10:37:17 -07:00
nginx.conf
package.json
postcss.config.js
README.md
sample.env.local
tailwind.config.js
tsconfig.json
web-test-runner.config.mjs
webpack.config.js
webpack.dev.js
webpack.prod.js
yarn.lock

Browsertrix Cloud frontend

Quickstart

Install dependencies:

yarn

Copy environment variables from the sample file:

cp sample.env.local .env.local

Update API_BASE_URL in .env.local to point to your dev backend API. For example:

API_BASE_URL=http://dev.example.com/api

Start the dev server:

yarn start

This will open localhost:9870 in a new tab in your default browser.

To develop against a local instance of the backend API, follow instructions for deploying to a local Docker instance. Update API_BASE_URL and then restart the dev server.

Scripts

yarn <name>
start runs app in development server, reloading on file changes
test runs tests in chromium with playwright
build-dev bundles app and outputs it in dist directory
build bundles app, optimized for production, and outputs it to dist
lint find and fix auto-fixable javascript errors
format formats js, html and css files
localize:extract generate XLIFF file to be translated
localize:build output a localized version of strings/templates

Testing

Tests assertions are written in Chai.

To watch for file changes while running tests:

yarn test --watch

To run tests in multiple browsers:

yarn test --browsers chromium firefox webkit

Localization

Wrap text or templates in the msg helper to make them localizable:

// import from @lit/localize:
import { msg } from "@lit/localize";

// later, in the render function:
render() {
  return html`
    <button>
      ${msg("Click me")}
    </button>
  `
}

Entire templates can be wrapped as well:

render() {
  return msg(html`
    <p>Click the button</p>
    <button>Click me</button>
  `)
}

See: https://lit.dev/docs/localization/overview/#message-types

To add new languages:

  1. Add BCP 47 language tag to targetLocales in lit-localize.json
  2. Run yarn localize:extract to generate new .xlf file in /xliff
  3. Provide .xlf file to translation team
  4. Replace .xlf file once translated
  5. Run yarn localize:build bring translation into src

See: https://lit.dev/docs/localization/overview/#extracting-messages