browsertrix/frontend
Ilya Kreymer adb5c835f2
Presign and replay (#127)
* support for replay via replayweb.page embed, fixes #124

backend:
- pre-sign all files urls
- cache pre-signed urls in redis, presign again when expired (default duration 3600, settable via PRESIGN_DURATION_SECONDS env var)
- change files output -> resources to confirm to Data Package spec supported by replayweb.page
- add CrawlFileOut which contains 'name' (file id), 'path' (presigned url), 'hash', and 'size'
- add /replay/sw.js endpoint to import sw.js from latest replay-web-page release
- update to fastapi-users 9.2.2
- customize backend auth to allow authentication to check 'auth_bearer' query arg if 'Authorization' header not set
- remove sw.js endpoint, handling in frontend

frontend:
- add <replay-web-page> to frontend, include rwp ui.js from latest release in index.html for now
- update crawl api endpoint to end in json
- replay-web-page loads the api endpoint directly!
- update Crawl type to use new format, 'resources' -> instead of 'files', each file has 'name' and 'path'

- nginx: add endpoint to serve the replay sw.js endpoint
- add defer attr to ui.js
- move 'Download' to 'Download Files'

* frontend: support customizing replayweb.page loading url via RWP_BASE_URL env var in Dockerfile
- default prod value set in frontend Dockerfile (set to upcoming 1.5.8 release needed for multi-wacz-file support) (can be overridden during image build via --build-arg)
- rename index.html -> index.ejs to allow interpolation
- RWP_BASE_URL defaults to latest https://replayweb.page/ for testing
- for local testing, add sw.js loading via devServer, also using RWP_BASE_URL (#131)

Co-authored-by: sua yoo <sua@suayoo.com>
2022-01-31 17:02:15 -08:00
..
src Presign and replay (#127) 2022-01-31 17:02:15 -08:00
xliff
.dockerignore Optimizing Frontend Dockerfile (#60) 2021-12-05 18:39:45 -08:00
.env Refactor to remove sign up and JWT env variables (#65) 2021-12-06 19:39:04 -08:00
.gitignore Optimizing Frontend Dockerfile (#60) 2021-12-05 18:39:45 -08:00
Dockerfile Presign and replay (#127) 2022-01-31 17:02:15 -08:00
lit-localize.json
nginx.conf.template Presign and replay (#127) 2022-01-31 17:02:15 -08:00
package.json Make crawl list interactive (#109) 2022-01-29 10:38:58 -08:00
postcss.config.js
README.md remove extra word in readme 2021-12-07 09:42:52 -08:00
sample.env.local Refactor to remove sign up and JWT env variables (#65) 2021-12-06 19:39:04 -08:00
tailwind.config.js Upgrade TailwindCSS to v3 (#93) 2022-01-19 22:00:06 -08:00
tsconfig.json
web-test-runner.config.mjs
webpack.config.js Presign and replay (#127) 2022-01-31 17:02:15 -08:00
webpack.prod.js
yarn.lock Make crawl list interactive (#109) 2022-01-29 10:38:58 -08:00

Browsertrix Cloud frontend

Quickstart

Copy environment variables from the sample file:

cp sample.env.local .env.local

Install dependencies:

yarn

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