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
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.
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 }}
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
-
actions/checkout@v2: checks out the current branch -
actions/setup-node@v2: installs few versions of NodeJS -
martinbeentjes/npm-get-version-action: gets the current version of the package -
npm install: install the dependencies used by the package -
npm run lint:es: runs linter for JS-files -
npm run lint:style: runs linter for stylesheets -
npm run ci:test: runs tests -
npm run ci:licenses: gets the licenses from used packages -
actions/upload-artifact@v2: uploads the generated reports as an artifact
Build and deploy
-
actions/checkout@v2: checks out the current branch -
actions/setup-node@v2: installs NodeJS 16 -
martinbeentjes/npm-get-version-action: gets the current version of the package -
npm install: install the dependencies used by the package -
npm run build: builds the app for production -
montudor/action-zip@v1: zips the build folder -
JamesIves/github-pages-deploy-action@4.1.1: deploys the build to GitHub Pages -
avakar/tag-and-release@v1: creates a tag and release -
actions/upload-release-asset@v1: uploads the build files to the release
Created with ❤️ by Timo
Top comments (1)
Nice!