diff --git a/README.md b/README.md index b8a5c442170fc2f9abe3890ecd0e17860530bbe9..b65c825601e78074bf10cc859a3f6922dfba2c47 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,26 @@ ## 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 diff --git a/next.config.mjs b/next.config.mjs index 48f0bf784f9d4b655cd13baa18c3b1d21664b960..be0bab08716a4abdf44ee665cea1f7a170d3d7ca 100644 --- a/next.config.mjs +++ b/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*`, }, ]; }, diff --git a/src/app/analysis/[id]/page.js b/src/app/analysis/[id]/page.js index e9d0274b8efc779d45cf8735f65aaeb876baaf41..4dc844d58f0d83d275e9be2396681a80394265c7 100644 --- a/src/app/analysis/[id]/page.js +++ b/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`);