DEV Community

Cover image for Quickstart template with CI for React project
Timo
Timo

Posted on

Quickstart template with CI for React project

My Workflow

I created a template project for using the GitHub workflow with a example React project.
The workflow itself is inside the repository: 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 logo tim0-12432 / react-ci-template

A template for react projects with includes linting and github actions workflow.

CReactApp Template with CI

This project was bootstrapped with Create React App.

Production

Usage

To change the content of the page, just change the files in the public and src directories.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode on http://localhost:3000.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

npm run ci:test

CI: Runs the test runner in the continuous integration mode.

npm run ci:licenses

CI: Generates the license report as a csv-file.

npm run lint:es

CI: Runs the…

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 }}
Enter fullscreen mode Exit fullscreen mode

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

tim012432 image

Timo

Created with ❤️ by Timo

Discussion (1)

Collapse
shadabk92 profile image
Shadab K

Nice!