[FIXED] Cypress in Docker can't connect to angular localhost on port 4200

Issue

In Jenkins I am running the frontend angular service in Docker and want also run Cypress and connect to the running angular server.

In Angular Dockerfile is EXPOSE 8080, what I can't change, but the Cypress BaseURl is set to : http://localhost:4200.

That's why I am mapping that port, when building the frontend:

sh 'docker build -t myimage3 .'
sh 'docker create --name frontend --network my-net -p 4200:8080 myimage3'
sh 'docker start frontend'

The frontend is up and running in container.

Cypress I am running on the same network:

sh 'docker build -t myimage4 .'
sh 'docker create --name test --network my-net myimage4'
sh 'docker start testrepo'

But for some reason cypress can't connect to localhost on 4200 port:

Cypress could not verify that this server is running:

  > http://localhost:4200

We are verifying this server because it has been configured as your `baseUrl`.

Cypress automatically waits until your server is accessible before running tests.

We will try connecting to it 3 more times...
We will try connecting to it 2 more times...
We will try connecting to it 1 more time...

Cypress failed to verify that your server is running.

The cypress Dockerfile is like this:

FROM cypress/base

WORKDIR /test

COPY ./package*.json ./
RUN npm i
COPY ./cypress.json .

RUN npm run test

I tried to put EXPOSE 4200 before the last line there, with no luck.

Seems it can't connect to localhost:4200 from another container, even if the network is the same. Unfortunately I can't change the baseURL for Cypress, because I need it as localhost:4200

Solution

If they are on the same network then frontend:8080 should work for you.

Or host.docker.internal:4200, as localhost shouldn't be used within a docker container.

Reference: https://docs.docker.com/desktop/windows/networking/

Answered By - Zaista