make api_host configurable

README.md

 ## Configuration
 
-This sucks, but we'll come up with something better later.
+1. Create a `.env.local` file in the root directory of the project:
+```bash
+# API host for internal requests.
+#
+# For example, if the API is running on localhost:8080,
+# set INTERNAL_API_HOST=localhost:8080.
+#
+# If the API is running as a docker compose service called "api",
+# set INTERNAL_API_HOST=api:8080.
+INTERNAL_API_HOST=
 
-1. Set the API host in `next.config.mjs`:
-```js
-/* next.config.mjs */
-const nextConfig = {
-  // ...
-  async rewrites() {
-    return [
-      {
-        source: "/api/:path*",
-        destination: "http{s}://{api_host}/:path*",
-      },
-    ];
-  },
-};
+# API host for public requests.
+#
+# This is the host that the client will use to make requests to the API.
+# It is needed because the client connects to the API from the browser
+# for websocket connections.
+#
+# For example, if the API is running on saci.inf.ufpr.br:8080,
+# set NEXT_PUBLIC_API_HOST=saci.inf.ufpr.br:8080.
+NEXT_PUBLIC_API_HOST=
 ```
-2. Set the API host in `src/app/analysis/[id]/page.js`:
-```js
-/* src/app/analysis/[id]/page.js */
-const api_host = "{api_host}";
-    // ...
-```
-
-e.g. api_host = "localhost:8080"
 
 ## Development
 

next.config.mjs

@@ -4,7 +4,7 @@ const nextConfig = {
     return [
       {
         source: "/api/:path*",
-        destination: "http://localhost:8080/:path*",
+        destination: `http://${process.env.INTERNAL_API_HOST}/:path*`,
       },
     ];
   },

src/app/analysis/[id]/page.js

@@ -6,8 +6,6 @@ import { notFound } from "next/navigation";
 import "@/styles/analysis/activity-timeline.css";
 import "@/styles/analysis/page.css";
 
-const api_host = "localhost:8080";
-
 export default function Analysis({ params: { id } }) {
   const [report, setReport] = useState(null);
   const [failed, setFailed] = useState(false);
@@ -21,7 +19,7 @@ export default function Analysis({ params: { id } }) {
   }, [failed]);
 
   useEffect(() => {
-    const ws = new WebSocket(`ws://${api_host}/status/${id}`);
+    const ws = new WebSocket(`ws://${process.env.NEXT_PUBLIC_API_HOST}/status/${id}`);
 
     ws.onmessage = (event) => {
       setReport(JSON.parse(event.data));
@@ -71,7 +69,7 @@ export default function Analysis({ params: { id } }) {
 }
 
 function validateId(id, setFailed) {
-  fetch(`https://${api_host}/analysis/${id}`, { cache: 'no-store' })
+  fetch(`http://${process.env.NEXT_PUBLIC_API_HOST}/analysis/${id}`, { cache: 'no-store' })
     .then((res) => {
       if (!res.ok) {
         throw new Error(`Failed to validate id: got ${res.status} response from api`);