Quickstart template with CI for React project
Tags: actionshackathon21
Published: 2021-11-12 16:59:48

### My Workflow
I created a [template project](https://github.com/tim0-12432/react-ci-template) for using the GitHub workflow with a example React project.
The workflow itself is inside the repository: [production.yml](https://github.com/tim0-12432/react-ci-template/blob/main/.github/workflows/production.yml)

#### Input:

- pull-request on main branch
- manual dispatch

#### Output:

- 1.0.0-information.zip containing coverage and license report
- deploys build files directly on GitHub Pages
- creates a tag and a release and pushes the build files to the release

### Submission Category:

DIY Deployments

### Yaml File or Link to Code

{% github tim0-12432/react-ci-template %}

- [README](https://github.com/tim0-12432/react-ci-template/blob/main/README.md)
- [WORKFLOW](https://github.com/tim0-12432/react-ci-template/blob/main/.github/workflows/production.yml)
- [LICENSE](https://github.com/tim0-12432/react-ci-template/blob/main/LICENSE.md)

```yaml
name: Production

on:
  workflow_dispatch:
  pull_request:
    branches:
      - main

jobs:
  Linting_and_tests:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node: [14.x, 15.x, 16.x]

    steps:
      - name: git checkout
        uses: actions/checkout@v2

      - name: install node
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node }}

      - name: get version
        id: package-version
        uses: martinbeentjes/npm-get-version-action@master

      - name: install dependencies
        run: |
          npm install
          npm install -g license-report

      - name: eslint
        run: npm run lint:es

      - name: stylelint
        run: npm run lint:style

      - name: run tests
        run: npm run ci:test

      - name: licenses
        run: npm run ci:licenses

      - name: upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: ${{ steps.package-version.outputs.current-version }}-information
          path: |
            coverage/
            licenses.csv
          if-no-files-found: error

  Build_and_deploy:
    runs-on: ubuntu-latest

    steps:
      - name: git checkout
        uses: actions/checkout@v2

      - name: install node
        uses: actions/setup-node@v2
        with:
          node-version: 16.x

      - name: get version
        id: package-version
        uses: martinbeentjes/npm-get-version-action@master

      - name: install dependencies
        run: npm install

      - name: build
        run: npm run build

      - name: zip build files
        uses: montudor/action-zip@v1
        with:
          args: zip -qq -r build.zip build

      - name: deploy
        uses: JamesIves/github-pages-deploy-action@4.1.1
        with:
          branch: built-page
          folder: build

      - name: release
        uses: avakar/tag-and-release@v1
        with:
          tag_name: v${{ steps.package-version.outputs.current-version }}
          release_name: v${{ steps.package-version.outputs.current-version }}
        id: release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: upload binaries to release
        uses: actions/upload-release-asset@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          asset_path: build.zip
          asset_name: built-page-ready-to-deploy-v${{ steps.package-version.outputs.current-version }}.zip
          asset_content_type: application/zip
          upload_url: ${{ steps.release.outputs.upload_url }}
```

### Additional Resources / Info

So what actions did I use in my workflow and what do the different steps in my yaml file?

#### Linting and tests

1. `actions/checkout@v2`: checks out the current branch
2. `actions/setup-node@v2`: installs few versions of NodeJS
3. `martinbeentjes/npm-get-version-action`: gets the current version of the package
4. `npm install`: install the dependencies used by the package
5. `npm run lint:es`: runs linter for JS-files
6. `npm run lint:style`: runs linter for stylesheets
7. `npm run ci:test`: runs tests
8. `npm run ci:licenses`: gets the licenses from used packages
9. `actions/upload-artifact@v2`: uploads the generated reports as an artifact

#### Build and deploy

1. `actions/checkout@v2`: checks out the current branch
2. `actions/setup-node@v2`: installs NodeJS 16
3. `martinbeentjes/npm-get-version-action`: gets the current version of the package
4. `npm install`: install the dependencies used by the package
5. `npm run build`: builds the app for production
6. `montudor/action-zip@v1`: zips the build folder
7. `JamesIves/github-pages-deploy-action@4.1.1`: deploys the build to GitHub Pages
8. `avakar/tag-and-release@v1`: creates a tag and release
9. `actions/upload-release-asset@v1`: uploads the build files to the release

---

{% user tim012432 %}

Created with :heart: by [Timo](https://hashnode.com/@tim012432)