Add frontend infrastructure for video player app

.babelrc

@@ -0,0 +1,34 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "importSource": "preact"
+      }
+    ],
+
+    // Compile JS for browser targets set by `browserslist` key in package.json.
+    [
+      "@babel/preset-env",
+      {
+        "bugfixes": true
+      }
+    ]
+  ],
+  "env": {
+    "development": {
+      "presets": [
+        [
+          "@babel/preset-react",
+          {
+            "development": true,
+            "runtime": "automatic",
+            "importSource": "preact"
+          }
+        ]
+      ]
+    }
+  }
+}

.gitignore

@@ -3,6 +3,7 @@
 *.pyc
 *.egg-info/
 via/static/**/*.gz
+build/
 node_modules/
 build.tar
 .devdata*

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore minified JS assets - these should be moved to `build/scripts/` in future.
+via/static/js/
+
+via/static/vendor/

Dockerfile

@@ -1,3 +1,15 @@
+# Stage 1: Build frontend assets
+FROM node:19.8.1-alpine as frontend-build
+
+ENV NODE_ENV production
+COPY .babelrc rollup.config.mjs gulpfile.mjs package.json yarn.lock ./
+COPY via/static ./via/static
+
+RUN yarn install --frozen-lockfile
+RUN yarn build
+
+# Stage 2: Build the rest of the app using build output from Stage 1.
+
 # Unlike most Hypothesis projects this Docker image is based on Debian,
 # so it can use glibc's DNS resolver which supports TCP retries. It can be
 # reverted back to Alpine when Musl v1.2.4 is released.
@@ -24,6 +36,9 @@ COPY requirements/requirements.txt ./
 RUN pip install --no-cache-dir -U pip \
   && pip install --no-cache-dir -r requirements.txt
 
+# Copy frontend assets.
+COPY --from=frontend-build /build build
+
 COPY ./conf/supervisord.conf ./conf/supervisord.conf
 COPY ./conf/nginx/nginx.conf /etc/nginx/nginx.conf
 COPY ./conf/nginx/includes /etc/nginx/includes

Makefile

@@ -37,8 +37,8 @@ shell: python
 build: python node_modules/.uptodate
 	@tox -qe build
 
-node_modules/.uptodate: package.json package-lock.json
-	npm install
+node_modules/.uptodate: package.json yarn.lock
+	yarn install
 	@touch $@
 
 .PHONY: services

conf/supervisord-dev.conf

@@ -16,6 +16,13 @@ stderr_events_enabled=true
 stopsignal = INT
 stopasgroup = true
 
+[program:assets]
+command = node_modules/.bin/gulp watch
+stdout_events_enabled=true
+stderr_events_enabled=true
+stopsignal = KILL
+stopasgroup = true
+
 [eventlistener:logger]
 command=bin/logger --dev
 buffer_size=100

gulpfile.mjs

@@ -0,0 +1,67 @@
+import {
+  buildCSS,
+  buildJS,
+  generateManifest,
+  runTests,
+  watchJS,
+} from '@hypothesis/frontend-build';
+import gulp from 'gulp';
+
+// import tailwindConfig from './tailwind.config.mjs';
+
+gulp.task('build-js', () => buildJS('./rollup.config.mjs'));
+gulp.task('watch-js', () => watchJS('./rollup.config.mjs'));
+
+// gulp.task('build-css', () =>
+//   buildCSS(
+//     [
+//       './lms/static/styles/lms.scss',
+//       './lms/static/styles/frontend_apps.scss',
+//       './lms/static/styles/ui-playground.scss',
+//     ],
+//     { tailwindConfig }
+//   )
+// );
+
+// gulp.task('watch-css', () => {
+//   gulp.watch(
+//     [
+//       './lms/static/styles/**/*.{css,scss}',
+//       './lms/static/scripts/frontend_apps/**/*.js',
+//       './lms/static/scripts/frontend_apps/**/*.ts',
+//       './lms/static/scripts/frontend_apps/**/*.tsx',
+//       './lms/static/scripts/ui-playground/**/*.js',
+//     ],
+//     { ignoreInitial: false },
+//     gulp.series('build-css')
+//   );
+// });
+
+gulp.task('watch-manifest', () => {
+  gulp.watch('build/**/*.{css,js,map}', generateManifest);
+});
+
+gulp.task(
+  'build',
+  gulp.series(['build-js' /*, 'build-css'*/], generateManifest)
+);
+gulp.task(
+  'watch',
+  gulp.parallel(['watch-js', /* 'watch-css', */ 'watch-manifest'])
+);
+
+// Unit and integration testing tasks.
+//
+// Some (eg. a11y) tests rely on CSS bundles. We assume that JS will always take
+// longer to build than CSS, so build in parallel.
+// gulp.task(
+//   'test',
+//   gulp.parallel('build-css', () =>
+//     runTests({
+//       bootstrapFile: 'lms/static/scripts/bootstrap.js',
+//       karmaConfig: 'lms/static/scripts/karma.config.js',
+//       rollupConfig: 'rollup-tests.config.mjs',
+//       testsPattern: 'lms/static/scripts/**/*-test.js',
+//     })
+//   )
+// );