0

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.

EthanCJ
  • 1
  • 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 '21 at 23:37

1 Answers1

0

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:
Raphael Guzman
  • 220
  • 2
  • 7
  • 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 '21 at 13:10