I have NodeJS Backend application and NextJS frontend application. In the NextJS application, authentication is done using NextJS server using Magic Link. Once authorized, mix of server and client components are sending requests directly to Backend using a access token.
I want to do E2E testing so I'm setting up a docker-compose file. However, within the docker network, Backend service is accessible via host name be.
services:
fe:
args:
NEXT_PUBLIC_BE_HOST: be
NEXT_PUBLIC_BE_PORT: 8000
be:
So when I set above build arguments, authentication works since it's done in NextJS server. However, any request sent from the browser to backend fails because browser sees no host by be (http://be:8000).
I considered having different different environment variables based on the who's sending the request but, it's not possible because, there are situations where server component renders the initial view once in the server, and updates done in browser based on the same endpoint. Ex:- Items search is done based on /api/items endpoint. Initially page will be rendered with 10 Items, however, in client based on the search query I'm updating the results.
So, If I could make Backend accessible in Frontend container using localhost:8000 instead of be:8000, then I could just set NEXT_PUBLIC_BE_HOST to localhost everything would work perfectly.
Is this possible without having the use the host as network? Or is there a better way?