From 6fabea3e7a8a1c6c8eb752dd8776d01a540b5b63 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Thu, 10 Mar 2022 23:26:21 -0800 Subject: [PATCH] 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 --- frontend/.env | 2 - frontend/Dockerfile | 8 +++- frontend/README.md | 32 ++++++++------ frontend/package.json | 2 +- frontend/sample.env.local | 2 +- frontend/src/components/screencast.ts | 2 +- frontend/webpack.config.js | 53 ++-------------------- frontend/webpack.dev.js | 64 +++++++++++++++++++++++++++ 8 files changed, 97 insertions(+), 68 deletions(-) delete mode 100644 frontend/.env create mode 100644 frontend/webpack.dev.js diff --git a/frontend/.env b/frontend/.env deleted file mode 100644 index bb169a29..00000000 --- a/frontend/.env +++ /dev/null @@ -1,2 +0,0 @@ -API_BASE_URL=https://btrix.webrecorder.net/api -GLITCHTIP_DSN= \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile index b44ba867..03db205a 100644 --- a/frontend/Dockerfile +++ b/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 diff --git a/frontend/README.md b/frontend/README.md index 62a3d4fb..39391070 100644 --- a/frontend/README.md +++ b/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 ` | | -| ------------------ | ------------------------------------------------------------------- | -| `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 ` | | +| ------------------ | --------------------------------------------------------------- | +| `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 diff --git a/frontend/package.json b/frontend/package.json index 3026f817..156644fb 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/sample.env.local b/frontend/sample.env.local index df81b01e..d8afed62 100644 --- a/frontend/sample.env.local +++ b/frontend/sample.env.local @@ -1,2 +1,2 @@ -API_BASE_URL=https://btrix-dev.webrecorder.net/api +API_BASE_URL= GLITCHTIP_DSN= \ No newline at end of file diff --git a/frontend/src/components/screencast.ts b/frontend/src/components/screencast.ts index 6d7a29b3..9fd4dd04 100644 --- a/frontend/src/components/screencast.ts +++ b/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) => { diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index be6a91ea..66b3ee7e 100644 --- a/frontend/webpack.config.js +++ b/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: { diff --git a/frontend/webpack.dev.js b/frontend/webpack.dev.js new file mode 100644 index 00000000..5b8ad8fd --- /dev/null +++ b/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), + }), + ], +});