Github Actions - Run server & frontend, then execute tests

Question

I would like to use Github Actions for CI and run tests before the branch can be merged.

I have a single repository that has both my server and frontend within it (Nest & Angular).
I am using Cypress/Jest for my tests.

I need my backend server running for my frontend cypress tests to pass.
Currently GH Actions doesn't move onto the next step because the backend process is running - but that's what I need to happen...

How should I set this up so that I can use GH Actions for CI?

name: test
on: [push]
env:
  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  OTHER_SECRETS: ${{ secrets.otherSecrets }}
jobs:
  cypress-run:
    runs-on: macos-11
    steps:
      # start cypress w/github action: https://github.com/cypress-io/github-action
      - name: Setup Node.js environment
        uses: actions/[email protected]
        with:
          node-version: '16.13.0'
      - name: Checkout
        uses: 'actions/checkout@v2'
      - name: "Start Backend"
        run: |
          cd server &&
          npm install &&
          npm run build &&
          npm run start:prod
      - name: "Start Frontend"
        run: |
          npm install &&
          npm run build &&
          npm run start
      - name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          record: true
          browser: chrome
      - name: "Run Jest Tests"
        run: |
            cd server &&
            npm run test

#note: I have tried appending the "&& sleep 10 && curl http://localhost:port -i" option to the npm commands - and it hasn't worked for me.

#note2: It's my first time w/ GH Actions, so maybe I'm missing something obvious!!

Answer 1

#note: I have tried appending the "&& sleep 10 && curl http://localhost:port -i" option to the npm commands - and it hasn't worked for me.

There is a slight error here, && will wait for the previous command to complete and only run the next one if it is successful & would run the previous command in the background and then will move on to running the next one. Therefore as nothing stops your server, && won't work.

I am not sure it is the cleanest way but the following should work, I have used an equivalent to run a UI in one of my projects.

  - name: "Start Backend"
    run: |
      cd server &&
      npm install &&
      npm run build &&
      npm run start:prod &
      sleep 5 &&
      curl http://localhost:port -I
  - name: "Start Frontend"
    run: |
      npm install &&
      npm run build &&
      npm run start &
      sleep 5 &&
      curl http://localhost:port -I