update frontend to new bundling code from OLS

EBISPOT · Nov 24, 2023 · eb4fe78 · eb4fe78
1 parent b888615
commit eb4fe78
Show file tree

Hide file tree

Showing 16 changed files with 6,002 additions and 8,801 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,5 @@
-PUBLIC_URL=/spot/oxo2
+PUBLIC_URL=/
+OXO_DEV_BACKEND_PROXY_URL=http://localhost:8008/
 
 REACT_APP_SSSOM_API=http://66.29.128.20:8008
 REACT_APP_SSSOM_HOME=https://mapping-commons.github.io/sssom/spec/

diff --git a/Caddyfile b/Caddyfile
@@ -4,7 +4,7 @@
 
 :8080 {
     handle_path {$PUBLIC_URL}* {
-        root * /opt/oxo2/build
+        root * /opt/oxo2/dist
         try_files {path} /
         file_server
     }

diff --git a/Dockerfile b/Dockerfile
@@ -21,8 +21,8 @@ RUN mkdir /opt/oxo2
 
 WORKDIR /opt/oxo2
 
-COPY package.json yarn.lock .yarnrc.yml /opt/oxo2/
-RUN yarn install
+COPY package.json package-lock.json /opt/oxo2/
+RUN npm install
 
 COPY . /opt/oxo2/
 

diff --git a/build.mjs b/build.mjs
@@ -0,0 +1,57 @@
+import { exec } from "child_process";
+import { build } from "esbuild";
+import fs from "fs";
+
+let define = {};
+for (const k in process.env) {
+  define[`process.env.${k}`] = JSON.stringify(process.env[k]);
+}
+
+///
+/// Build index.html (simple find and replace)
+///
+console.log("### Building index.html");
+fs.writeFileSync(
+  "dist/index.html",
+  fs
+    .readFileSync("index.html.in")
+    .toString()
+    .split("%PUBLIC_URL%/")
+    .join(process.env.PUBLIC_URL || "/")
+    .split("%PUBLIC_URL%")
+    .join(process.env.PUBLIC_URL || "/")
+);
+
+///
+/// Build bundle.js (esbuild)
+///
+console.log("### Building bundle.js");
+build({
+  entryPoints: ["src/index.tsx"],
+  bundle: true,
+  platform: "browser",
+  outfile: "dist/bundle.js",
+  define,
+  plugins: [],
+  logLevel: "info",
+  sourcemap: "linked",
+
+  ...(process.env.OXO_MINIFY === "true"
+    ? {
+        minify: true,
+      }
+    : {}),
+});
+
+///
+/// Build styles.css (tailwind)
+///
+console.log("### Building styles.css");
+exec("tailwind -i ./src/index.css -o ./dist/styles.css");
+
+///
+/// Copy files
+///
+// console.log("### Copying misc files");
+// exec("cp ./src/banner.txt ./dist"); // home page banner text
+
diff --git a/dev_server.mjs b/dev_server.mjs
@@ -0,0 +1,46 @@
+
+import express from 'express'
+import fetch from 'node-fetch'
+import urlJoin from 'url-join'
+import nocache from 'nocache'
+
+
+let server = express()
+
+server.use(nocache())
+
+if(process.env.OXO_DEV_BACKEND_PROXY_URL === undefined) {
+    throw new Error('please set OXO_DEV_BACKEND_PROXY_URL before running dev server')
+}
+server.use(/^\/api.*/, async (req, res) => {
+  let backendUrl = urlJoin(process.env.OXO_DEV_BACKEND_PROXY_URL, req.originalUrl)
+  console.log('forwarding api request to: ' + backendUrl)
+  try {
+    let apiResponse = await fetch(backendUrl, {
+      redirect: 'follow',
+      method: req.method,
+      body: req.body
+    })
+    res.header('content-type', apiResponse.headers.get('content-type'))
+    res.status(apiResponse.status)
+    apiResponse.body.pipe(res)
+  } catch(e) {
+    console.log(e)
+  }
+})
+
+
+server.use(express.static('dist'))
+
+server.get(/^(?!\/api).*$/, (req, res) => {
+  res.sendFile(process.cwd() + '/dist/index.html')
+})
+
+
+
+
+server.listen(3000)    
+
+
+
+
diff --git a/public/embl-ebi-background.jpg → dist/embl-ebi-background.jpg b/public/embl-ebi-background.jpg → dist/embl-ebi-background.jpg
diff --git a/public/favicon.ico → dist/favicon.ico b/public/favicon.ico → dist/favicon.ico
diff --git a/public/logo.png → dist/logo.png b/public/logo.png → dist/logo.png
diff --git a/public/manifest.json → dist/manifest.json b/public/manifest.json → dist/manifest.json
diff --git a/public/robots.txt → dist/robots.txt b/public/robots.txt → dist/robots.txt
diff --git a/entrypoint.dockersh b/entrypoint.dockersh
@@ -2,8 +2,10 @@
 
 cd /opt/oxo2
 
-echo Building frontend. PUBLIC_URL: $PUBLIC_URL
+echo Building frontend. REACT_APP_ENV: $REACT_APP_ENV
 
-yarn react-scripts build
+npm run build
 
 caddy run --config ./Caddyfile
+
+
diff --git a/public/index.html → index.html.in b/public/index.html → index.html.in
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/styles.css" />
     <link
       rel="stylesheet"
       href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css"
@@ -43,4 +44,6 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+
+	<script src="%PUBLIC_URL%/bundle.js" type="text/javascript"></script>
 </html>