Chore: Dynamically configure Fern backend URL, set port and header name

.env

@@ -0,0 +1,2 @@
+VITE_FERN_REPORTER_BASE_URL=http://localhost:8080/api
+VITE_FERN_REPORTER_HEADER_NAME="Fern Acceptance Test Report"

Dockerfile

@@ -1,8 +1,15 @@
 FROM --platform=${BUILDPLATFORM} node:18 AS base
 WORKDIR /app/refine
 COPY . .
+COPY entrypoint.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/entrypoint.sh
+
 RUN rm -rf node_modules # remove this due to incompatible architecture between arm and amd
 RUN npm install
 RUN npm run build
-EXPOSE 4173
-CMD ["npm", "run", "start"]
+
+EXPOSE 9091
+# Set the entrypoint to the script
+ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
+
+CMD ["npm", "run", "start", "--", "--port", "9091"]

README.md

@@ -38,7 +38,7 @@ Follow the steps below to set up and run Fern-UI.
     yarn install
     ```
 
-3. **Configure API Endpoint**: Update the API endpoint in the [data provider](https://github.com/Guidewire/fern-ui/blob/main/src/providers/data-provider.ts#L4) to point to your running Fern-Reporter instance.
+3. **Configure API Endpoint**: Update `VITE_FERN_REPORTER_BASE_URL` in `.env` to point to your running Fern-Reporter instance (this value is `http://localhost:8080/api` by default).
 
 4. **Start the Application**: Run the front-end instance.
     ```sh
@@ -69,3 +69,5 @@ For more information on setting up the backend,
 refer to the [Fern-Reporter repository](https://github.com/Guidewire/fern-reporter).
 To integrate the client into your Ginkgo test suites,
 visit the [Fern-Ginkgo-Client repository](https://github.com/Guidewire/fern-ginkgo-client).
+
+## Testing

entrypoint.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+# Replace VITE_FERN_REPORTER_BASE_URL in the .env file with the value of the environment variable
+sed -i "s|VITE_FERN_REPORTER_BASE_URL=.*|VITE_FERN_REPORTER_BASE_URL=${VITE_FERN_REPORTER_BASE_URL}|g" /app/refine/.env
+
+# Build the application again since environment variables get embedded at build time rather than runtime
+npm run build
+
+# Execute the command passed to the container
+exec "$@"

src/pages/test-runs/list.tsx

@@ -12,6 +12,8 @@ import {
     uniqueTags
 } from "./list-utils";
 
+const HEADER_NAME = import.meta.env.VITE_FERN_REPORTER_HEADER_NAME;
+
 export const TestRunsList = () => {
     const {tableProps} = useTable<ITestRun, HttpError>({
         // Should end with a slash to avoid CORS issues
@@ -20,7 +22,7 @@ export const TestRunsList = () => {
 
     return (
         <List
-            title={"Atmos Tests"}
+            title={HEADER_NAME}
         >
             <Table {...tableProps} rowKey="id" expandable={{expandedRowRender}}>
                 <Table.Column title="ID"

src/providers/data-provider.ts

@@ -1,7 +1,11 @@
 import type { DataProvider } from "@refinedev/core";
 import axios from "axios";
 
-const API_URL = "http://localhost:8080/api";
+if (!import.meta.env.VITE_FERN_REPORTER_BASE_URL) {
+    console.log('Error: FERN_REPORTER_BASE_URL is not set');
+}
+
+const API_URL = import.meta.env.VITE_FERN_REPORTER_BASE_URL;
 
 export const dataProvider: DataProvider = {
     getList: async ({ resource}) => {

vite.config.ts

@@ -3,4 +3,11 @@ import react from "@vitejs/plugin-react";
 
 export default defineConfig({
     plugins: [react()],
+    server: {
+        host: true,
+        port: 9091
+    },
+    define: {
+        'process.env': process.env
+    }
 });