Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

So I'm writing a series of automated tests for a single page react application. The tests rely on a mocked api that's exposed on a different port than the application is served from. In order to get around cors issues, the local-web-server instance that serves the SPA is set up to proxy api requests to the backend. Here's the config file for the server:

const server = process.env.SERVER;
const port = process.env.PORT;
module.exports = {
    port: port,
    rewrite: [
            from: '/api/(.*)',
            to: `${server}/$1`
    logFormat: 'tiny',
    spa: 'index.html'
I'm using Selenium Test Containers, and the application is run from a docker image downloaded by the test code. Here's the docker file:
FROM node:10.16.0-alpine
ENV PORT=5000
COPY ./build ./
COPY ./docker ./
EXPOSE ${PORT}
RUN npm config set unsafe-perm true
RUN npm install local-web-server -g
CMD ws --config-file web-server-config.js
The issue that I've been trying to solve for the past two days, is that the proxy is not even attempting to reach the backend. I've been running wireshark to debug since I can't reliably access dev tools in a selenium controlled browser. The proxy receives a request to /api/*, and then returns 504 gateway timeout without even trying to access the backend. There's no [SYN] packet or anything. Does anyone have experience with an issue like this? If you could even just point me in the right direction it would be greatly appreciated.
                you shouldn't need wireshark, the ws --verbose flag should tell you everything the local-web-server proxy is doing.. Am i right in thinking this issue is with Docker? Did you resolve it? Local-web-server does not return 504 errors..
– Lloyd
                May 17, 2021 at 23:37
If this is for development, you might want to have a look at the proxy feature for React.js. All you need is to add the following configuration to your package.json and it will proxy any unknown requests to the provided backend if you are running the app using react-scripts start i.e. the provided npm start with create-react-app.
  "proxy": "http://backend:3000",
If your React app and your other backend have both been dockerized with Docker Compose, just make sure the containers are in the name docker network and you can specify in React's proxy config the services name as it will resolve in docker's DNS.
For example:
version: "2.4"
services:
  backend:
    image: backend:v0.0.0
    networks:
      - main
  frontend:
    build: .
    image: frontend:v0.0.0
    networks:
      - main
    ports:
      - "5000:5000"
networks:
  main:
                Unfortunately I don't think I can change which web server we use. I believe the app is being used successfully by other developers, so unless I find a bug I probably won't be suggesting changes.
– EthanCJ
                Mar 29, 2021 at 13:10
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.