opa-react-demo: switch to prod mode build for demo (#8)

We'll do a prod build and have Caddy serve it. Caddy will also proxy
requests sent to /eopa/* for EOPA.

This way, we won't suffer from any dev mode (strict mode) weirdnesses.

Also bringing package-lock.json in sync again -- it got out of sync in a recent
commit.

.github/workflows/pull-request.yaml

@@ -29,9 +29,8 @@ jobs:
       - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           node-version: 22
-      - name: setup and build
-        # https://github.com/npm/cli/issues/3034#issuecomment-885211061
+      - name: build and start
         run: |
-          npm ci
-          npm run build
+          docker compose up --build -d
+          docker compose down
         working-directory: ${{ matrix.pkg }}

opa-react-demo/.dockerignore

@@ -0,0 +1 @@
+/node_modules

opa-react-demo/Caddyfile

@@ -0,0 +1,12 @@
+:4000 {
+    handle_path /eopa/* {
+        reverse_proxy http://eopa:8181
+    }
+
+    # serve the react app
+    handle {
+      root * /usr/share/caddy
+      try_files {path} /
+      file_server
+   }
+}

opa-react-demo/Dockerfile

@@ -1,15 +1,11 @@
-FROM node:22
+FROM node:22 AS builder
 
-# Create app directory
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
-
-# Install app dependencies
-COPY package.json /usr/src/app/
-RUN npm install
-
-# Bundle app source
 COPY . /usr/src/app
+RUN npm ci
+RUN npm run build
 
-EXPOSE 3000
-CMD [ "npm", "start" ]
+FROM caddy:latest
+COPY --from=builder /usr/src/app/build /usr/share/caddy
+COPY Caddyfile /etc/caddy/Caddyfile

opa-react-demo/README.md

@@ -8,7 +8,7 @@ This React application showcases the request batching feature of `@styra/opa-rea
 
 1. Set `$EOPA_LICENSE_KEY`
 1. Run `docker compose up`
-1. Go to <http://127.0.0.1:3000>
+1. Go to <http://127.0.0.1:4000>
 
 ### Binaries
 

opa-react-demo/docker-compose.yaml

@@ -1,19 +1,13 @@
 services:
   react-demo:
     build: .
-    expose:
-    - 3000
+    ports:
+      - "4000:4000"
     depends_on:
       - eopa
-    command:
-      - npm
-      - start
-    network_mode: host
 
   eopa:
     image: ghcr.io/styrainc/enterprise-opa:latest
-    expose: 
-      - 8181
     ports:
       - "8181:8181"
     command:
@@ -22,8 +16,7 @@ services:
       - --addr=:8181
       - --log-level=debug
       - /policies
-    working_dir: /
     volumes:
       - ./policies:/policies
     environment:
-      EOPA_LICENSE_KEY: ${EOPA_LICENSE_KEY}
+      EOPA_LICENSE_KEY: ${EOPA_LICENSE_KEY}

opa-react-demo/src/BatchDemo.jsx

@@ -23,7 +23,7 @@ export default function BatchDemo() {
   const [opaClient] = useState(() => {
     const href = window.location.toString();
     const u = new URL(href); // TODO(sr): better way?!
-    u.pathname = "";
+    u.pathname = "eopa";
     u.search = "";
     return new OPAClient(u.toString());
   });