vue.jscontinuous-integrationnuxt.jsdevopsgithub-actions

Run a dev server in CI pipleine


I have a CI pipeline setup using Github Action/Workflows, where i would want to run Cypress Automated tests, However I am having some logical problems of how to run my dev server. let me show you my pipeline

name: Nuxt CI Pipeline

on:
  push:
    branches: [ CI-pipeline ]
  # pull_request:
  #   branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [ 14.x ]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - name: Make envfile
      uses: SpicyPizza/create-envfile@v1
      with:
        envkey_ENV: staging
        file_name: .env
    - run: npm ci
    - run: npm run dev
    - run: | 
        cd e2e
        ls -l
        npm ci
        npx cypress run

Now I want to spin up the devserver and run the tests on that port usually 3000 , however the problem is when the command npm run dev is executed, the pipeline keeps on waiting there and doesnt move forward , which makes sense as devserver doesn't return a response as other commands will , so its kinda stuck there. My knowledge of devops is bare minimum , can someone point out what am i missing?


Solution

  • I think the way of execution is not ideal, especially since so the node server is also not killed correctly in the end. Using a helper package like start-server-and-test should do the trick for you:

    npm install --save-dev start-server-and-test
    

    While I'm not sure what exactly is behind your scripts in your package.json, it could look something like this in the end:

      "scripts": {
        "start:ci": "<<start your dev server>>",
        "cy:run": "cypress run --browser chrome --headless",
        "cy:ci": "start-server-and-test start:ci http://localhost:3000 cy:run"
      }, 
    

    Then you can simply run this as a single command in your pipeline with npm run cy:ci. The script will take care of starting your dev server, waiting for the URL to be available, then executing the tests and after all tests are finished, it will shut down the server.