fix(frontend): read BIOSTACK_API_HOST from process.env

frontend/README.md

@@ -29,6 +29,8 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Deployment
 
+### Using Docker
+
 Prerequisites:
 - docker 3.8+ & docker-compose installed
 
@@ -37,3 +39,17 @@ Run the following command to build and deploy localy
 ```
 docker compose -f "docker-compose.prod.yml" up -d --build
 ```
+
+### Manual
+
+Define a `.env.production` file to declare `BIOSTACK_API_HOST` this way:
+
+```
+NEXT_PUBLIC_BIOSTACK_API_HOST=<your-public-url>
+```
+
+By default, this var will fallback to `http://localhost`
+
+
+WIP
+

frontend/src/app/utilities/useApi.ts

@@ -3,12 +3,16 @@ import { useCallback } from "react";
 import { useAppContext, useAppDispatchContext } from "../contexts/AppContext";
 import { Page, Sample, SampleCreate, SampleUpdate } from "@/app/types";
 
+// Declare a var to load environment variables non inlined
+// (note: vars needs to start with NEXT_PUBLIC_ to be available in browser context at runtime)
+const env = process.env
+
 /**
  * Create a new AXIOS instance to query the API
  * See https://www.npmjs.com/package/axios
 */
 const api = axios.create({
-    baseURL: 'http://localhost:8000/sample', // TODO: read from env vars
+    baseURL: `${env.NEXT_PUBLIC_BIOSTACK_API_HOST ?? 'http://localhost'}/sample`,
     timeout: 3000,
     headers: {
         'Accept': 'application/json',