2

I currently have a github action like this in a Create React App

name: Percy
on: [push]
jobs:
  percy:
    name: Visual Testing
    runs-on: ubuntu-16.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Cypress run
        uses: cypress-io/github-action@v2
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
        with:
          start: yarn start
          wait-on: 'http://localhost:3000'
          command-prefix: 'percy exec -- npx'

But I would like to yarn build (instead of yarn start) and serve these results for my tests (cypress, etc) - so I see how the tests goes on something that has gone through webpack.

I have tried a lot of different things (like start: yarn build && yarn serve -s build -p 3000) but have come to the conclusion that I need some guidance.

...
$ react-scripts build '&&' yarn serve -s build -p 3000
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  49.3 KB  build/static/js/2.98954ae7.chunk.js
  3.01 KB  build/static/js/main.9bc31c1d.chunk.js
  1.13 KB  build/static/css/main.9e43f7ef.chunk.css
  818 B    build/static/css/2.a2fbc952.chunk.css
  779 B    build/static/js/runtime-main.fe4fcbcb.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

Done in 10.36s.
http://localhost:3000 timed out on retry 61 of 2
Error: connect ECONNREFUSED 127.0.0.1:3000
Norfeldt
  • 8,272
  • 23
  • 96
  • 152
  • 1
    If you want to host a development version app on Github, then it's not how it works. Github Actions can run automated tests, make builds and upload them somewhere, but not host a running application. P.S. You can however make a build and deploy it on github pages, or you can use something like netlify. – Alex Buznik Mar 01 '21 at 14:29
  • I don't want to deploy the app - just want the test to be as close to the production as possible. – Norfeldt Mar 02 '21 at 12:46
  • Yeah, that's what I'm saying. With github actions you can only run automation tests, e.g., but it will not give you a public URL where you can access it on port 3000. – Alex Buznik Mar 03 '21 at 15:29
  • I apologise if I'm uncleared. I wish to test the results of what get processed by webpack and not I get from yarn start. – Norfeldt Mar 03 '21 at 15:35
  • Oh, that clears things a bit. If you are looking to inspect the actual generated code probably you want to upload artifacts - see https://github.com/actions/upload-artifact and https://docs.github.com/en/actions/guides/storing-workflow-data-as-artifacts. Does it help? – Alex Buznik Mar 03 '21 at 15:56
  • Also take a look at the env vars - I don't see that you define it anywhere - something like `NODE_ENV=production`, but that's really up to your build config – Alex Buznik Mar 03 '21 at 16:03
  • thanks for the links @AlexBuznik - My problems more to have it serving the compiled code so my tests can access it. – Norfeldt Mar 04 '21 at 07:40
  • Did you see this answer? https://stackoverflow.com/a/58424797/753451 – Alex Buznik Mar 04 '21 at 08:26
  • Thank you very much @AlexBuznik - the answer from Arun Kumar Mohan works perfect! – Norfeldt Mar 04 '21 at 10:11

1 Answers1

3

You can use the build parameter to build the app using yarn build and the start parameter to start the server using npx serve.

- name: Cypress run
  uses: cypress-io/github-action@v2
  env:
    PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
  with:
    build: yarn build
    start: npx serve -s build -l 3000
    wait-on: 'http://localhost:3000'
    command-prefix: 'percy exec -- npx'
Arun Kumar Mohan
  • 11,517
  • 3
  • 23
  • 44