How to run a React appplication inside Circleci so it can be accessed by Cypress e2e test

I am trying run a React application inside Circleci, so it can be reached by Cypress e2e. First I tried running the app with the Webpack web server, but the issue is the same.

When Cypress runs the tests, it cannot react to the instance where the React is being served from, so I am trying to use http-server instead.

This is what I have at the moment:

version: 2.1

jobs:
  cypress:
    working_directory: ~/project
    docker:
      - image: cypress/base:18.12.1
    environment:
      CYPRESS_baseUrl: http://127.0.0.1:3000
    steps:
      - checkout:
          path: ~/project
      - run:
          name: Install dependencies
          command: npm ci --ignore-scripts
      - run:
          name: Build
          command: npm run build
      - run:
          name: Install http-server
          command:  npm install -g http-server
      - run:
          name: Serve React app
          command: |
            http-server ./dist/ -a 127.0.0.1 -p 3000 &
      # - run:
      #     name: Wait for server to start
      #     command: npx wait-on http-get:http://127.0.0.1:3000
      - run:
          name: cypress install
          command: npx cypress install
      - run:
          name: Run cypress tests
          command: npx cypress run

# Invoke jobs via workflows
# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
workflows:
  e2e_test:
    jobs:
      - cypress

When I run http-server ./dist/ -a 127.0.0.1 -p 3000 in the foreground, I can see the server is starting:

Starting up http-server, serving ./dist/

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:3000
Hit CTRL-C to stop the server

When I run it in the background and the script reaches the tests, I get this:

[667:0213/085129.291037:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.
Cypress could not verify that this server is running:

  > http://127.0.0.1:3000

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.

Please start this server and then run Cypress again.


Exited with code exit status 1

CircleCI received exit code 1

I tried waiting for the server with: npx wait-on http-get:http://127.0.0.1:3000 but it just stays waiting forever.

I had the same issue when I ran the React app with the Webpack server. The app and the tests run without issues in my dev env.

Any help would be greatly appreciated.

For anyone else facing this issue, I solved it by running the server and the test under the same process. I did not know that every command runs in a separate process as described in this post. The code changed to this thanks to ChatGpt suggesting the use of the nohup command, which runs the specified command with no hang-up signals so that it continues to run even if the terminal session is closed:

jobs:
  cypress:
    working_directory: ~/project
    docker:
      - image: cypress/base:18.12.1
    environment:
      CYPRESS_baseUrl: http://127.0.0.1:3000
    steps:
      - checkout:
          path: ~/project
      - run:
          name: Install dependencies
          command: npm ci --ignore-scripts
      - run:
          name: Build
          command: npm run build
      - run:
          name: Install http-server
          command:  npm install -g http-server
      - run:
          name: cypress install
          command: npx cypress install
      - run:
          name: Serve React app and run test
          command: |
            nohup http-server ./dist/ -a 127.0.0.1 -p 3000 > /dev/null 2>&1 &
            npx wait-on http://127.0.0.1:3000 && npx cypress run