Frontend build fixes (#191)

* copy specific files
* replace api host env var
* remove unused dotenv
* Update frontend/webpack.dev.js
Co-authored-by: Ilya Kreymer <ikreymer@users.noreply.github.com>

frontend/.env

@@ -1,2 +0,0 @@
-API_BASE_URL=https://btrix.webrecorder.net/api
-GLITCHTIP_DSN=

frontend/Dockerfile

@@ -8,7 +8,13 @@ WORKDIR /app
 COPY package.json .
 COPY yarn.lock .
 RUN yarn --frozen-lockfile
-COPY *.* ./
+
+COPY lit-localize.json ./
+COPY postcss.config.js ./
+COPY tailwind.config.js ./
+COPY tsconfig.json ./
+COPY webpack.config.js ./
+COPY webpack.prod.js ./
 COPY src ./src/
 
 ARG GIT_COMMIT_HASH

frontend/README.md

@@ -2,16 +2,22 @@
 
 ## Quickstart
 
+Install dependencies:
+
+```sh
+yarn
+```
+
 Copy environment variables from the sample file:
 
 ```sh
 cp sample.env.local .env.local
 ```
 
-Install dependencies:
+Update `API_BASE_URL` in `.env.local` to point to your dev backend API. For example:
 
-```sh
-yarn
+```
+API_BASE_URL=http://dev.example.com/api
 ```
 
 Start the dev server:
@@ -27,16 +33,16 @@ follow instructions for deploying to a local Docker instance. Update `API_BASE_U
 
 ## 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                     |
+| `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
 

frontend/package.json

@@ -26,7 +26,7 @@
     "prebuild": "del-cli ./dist",
     "build": "webpack --config webpack.prod.js",
     "build-dev": "webpack --mode development",
-    "start": "webpack serve --mode=development",
+    "start": "webpack serve --mode=development --config webpack.dev.js",
     "lint": "eslint --fix \"src/**/*.{ts,js}\"",
     "format": "prettier --write \"**/*.{ts,js,html,css}\"",
     "localize:extract": "lit-localize extract",

frontend/sample.env.local

@@ -1,2 +1,2 @@
-API_BASE_URL=https://btrix-dev.webrecorder.net/api
+API_BASE_URL=
 GLITCHTIP_DSN=

frontend/src/components/screencast.ts

@@ -233,7 +233,7 @@ export class Screencast extends LitElement {
     }
 
     const baseURL = `${window.location.protocol === "https:" ? "wss" : "ws"}:${
-      process.env.API_HOST
+      process.env.WEBSOCKET_HOST || window.location.host
     }/watch/${this.archiveId}/${this.crawlId}`;
 
     this.watchIPs.forEach((ip: string) => {

frontend/webpack.config.js

@@ -1,6 +1,5 @@
 // webpack.config.js
 const path = require("path");
-const webpack = require("webpack");
 const ESLintPlugin = require("eslint-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
@@ -11,10 +10,6 @@ const isDevServer = process.env.WEBPACK_SERVE;
 // for testing: for prod, the Dockerfile should have the official prod version used
 const RWP_BASE_URL = process.env.RWP_BASE_URL || "https://replayweb.page/";
 
-const dotEnvPath = path.resolve(
-  process.cwd(),
-  `.env${isDevServer ? `.local` : ""}`
-);
 // Get git info to use as Glitchtip release version
 
 const execCommand = (cmd, defValue) => {
@@ -35,13 +30,14 @@ const commitHash =
   process.env.GIT_COMMIT_HASH ||
   execCommand("git rev-parse --short HEAD", "unknown");
 
+const dotEnvPath = path.resolve(
+  process.cwd(),
+  `.env${isDevServer ? `.local` : ""}`
+);
 require("dotenv").config({
   path: dotEnvPath,
 });
 
-const backendUrl = new URL(
-  process.env.API_BASE_URL || "https://btrix.webrecorder.net/"
-);
 const shoelaceAssetsSrcPath = path.resolve(
   __dirname,
   "node_modules/@shoelace-style/shoelace/dist/assets"
@@ -84,48 +80,7 @@ module.exports = {
     extensions: [".ts", ".js"],
   },
 
-  devServer: {
-    watchFiles: ["src/*.js"],
-    open: true,
-    compress: true,
-    hot: true,
-    static: [
-      {
-        directory: shoelaceAssetsSrcPath,
-        publicPath: "/" + shoelaceAssetsPublicPath,
-      },
-      {
-        directory: path.join(__dirname),
-        //publicPath: "/",
-        watch: true,
-      },
-    ],
-    historyApiFallback: true,
-    proxy: {
-      "/api": {
-        target: backendUrl.href,
-        headers: {
-          Host: backendUrl.host,
-        },
-        pathRewrite: { "^/api": "" },
-        ws: true,
-      },
-    },
-    // Serve replay service worker file
-    onBeforeSetupMiddleware: (server) => {
-      server.app.get("/replay/sw.js", (req, res) => {
-        res.set("Content-Type", "application/javascript");
-        res.send(`importScripts("${RWP_BASE_URL}sw.js")`);
-      });
-    },
-    port: 9870,
-  },
-
   plugins: [
-    new webpack.DefinePlugin({
-      "process.env.API_HOST": JSON.stringify(backendUrl.host),
-    }),
-
     new HtmlWebpackPlugin({
       template: "src/index.ejs",
       templateParameters: {

frontend/webpack.dev.js

@@ -0,0 +1,64 @@
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
+
+const common = require("./webpack.config.js");
+
+// for testing: for prod, the Dockerfile should have the official prod version used
+const RWP_BASE_URL = process.env.RWP_BASE_URL || "https://replayweb.page/";
+
+if (!process.env.API_BASE_URL) {
+  throw new Error("To run a dev frontend server, please set the API_BASE_URL pointing to your backend api server in '.env.local'")
+}
+
+const devBackendUrl = new URL(process.env.API_BASE_URL);
+const shoelaceAssetsSrcPath = path.resolve(
+  __dirname,
+  "node_modules/@shoelace-style/shoelace/dist/assets"
+);
+const shoelaceAssetsPublicPath = "shoelace/assets";
+
+module.exports = merge(common, {
+  devServer: {
+    watchFiles: ["src/*.js"],
+    open: true,
+    compress: true,
+    hot: true,
+    static: [
+      {
+        directory: shoelaceAssetsSrcPath,
+        publicPath: "/" + shoelaceAssetsPublicPath,
+      },
+      {
+        directory: path.join(__dirname),
+        //publicPath: "/",
+        watch: true,
+      },
+    ],
+    historyApiFallback: true,
+    proxy: {
+      "/api": {
+        target: devBackendUrl.href,
+        headers: {
+          Host: devBackendUrl.host,
+        },
+        pathRewrite: { "^/api": "" },
+        ws: true,
+      },
+    },
+    // Serve replay service worker file
+    onBeforeSetupMiddleware: (server) => {
+      server.app.get("/replay/sw.js", (req, res) => {
+        res.set("Content-Type", "application/javascript");
+        res.send(`importScripts("${RWP_BASE_URL}sw.js")`);
+      });
+    },
+    port: 9870,
+  },
+
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env.WEBSOCKET_HOST": JSON.stringify(devBackendUrl.host),
+    }),
+  ],
+});