Features
This workflow includes common continuous integration/deployment tasks you can easily reuse for any web javascript project.
It includes:
- collaboration comments
- quality tests
- deployment on Netlify
- audit with Lighthouse
It works on push and pull request situations.
To showcase this workflow, i chose the Dojo RealWorld implementation.
My Workflow
Collaboration first!
Alone we can do so little; together we can do so much.
Helen Keller
Open source contributions are not just about code.
That's all about people collaborating to move a project forward.
If the contributor is making their first pull request to the project, welcome them accordingly. First open source contributions can be overwhelming as there so many considerations: code of conduct, license, guidelines...
Even if GitHub makes it easy by onboarding new contributors when they land on a project, don't hesitate to provide additional context:
first_interaction:
if: github.event_name == 'pull_request'
name: 'first interaction'
runs-on: ubuntu-latest
steps:
- uses: actions/first-interaction@v1
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
pr-message: |
Thanks for your first pull request on this project!
This is a kindly reminder to read the following resources:
- [code of conduct]()
- [contribution guidelines]()
It'll help us to review your contribution and to ensure it's aligned with our standards.
I'm not a new contributor! Who cares?
Not being a new contributor doesn't mean you should be ignored. As a review can be delayed, provide an instant comment to welcome new contributions. Even an automated one shows how much you care:
greetings:
if: github.event_name == 'pull_request'
runs-on: ubuntu-latest
steps:
- uses: kerhub/saved-replies@v1.0.0
with:
token: "${{ secrets.GITHUB_TOKEN }}"
reply: |
Hi @${{ github.event.pull_request.user.login }}, thanks for being part of the community :heart:
We'll review your contribution as soon as possible!
Reusable workflows
When i started this workflow, i used actions/cache
to cache dependencies and speed up the workflows.
- name: Cache node modules
uses: actions/cache@v2
env:
cache-name: cache-node-modules
with:
path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}-
${{ runner.os }}-build-
${{ runner.os }}-
Meanwhile i discovered some changes happened to actions/setup-node
in July, removing the need of the previous boilerplate
Time to refactor? Not so much!
Such change didn't affect my workflow as such implementation detail was already hidden in a dedicated and reusable job by using the GitHub new feature: Reusable Workflows
This reusable workflow is isolated in a dedicated repository.
on:
workflow_call:
inputs:
command:
required: true
type: string
jobs:
node_job:
name: 'node job'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2.4.1
with:
node-version: '14'
cache: 'npm'
- run: npm ci
- run: ${{inputs.command}}
Automate quality checks
Note: The quality checks use the previous reusable workflow
Make your code Prettier
Prettier is a famous code formatter.
It removes all original styling* and ensures that all outputted code conforms to a consistent style.
prettier:
uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
with:
command: npm run prettier --check \"**\"
Ensure maintainability with a linter
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
linter:
uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
with:
command: npx eslint --fix src/**/*.ts
Quality means doing it right even when no one is looking.
Henry Ford
The future yourself will thank you for being able to push code with confidence thanks to tests.
unit_tests:
name: 'unit tests'
uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
with:
command: npm run test
Deployment
You don't want to manually deploy anymore.
Review changes before they go live!
You want to preview changes due to a pull request.
Netlify provides a preview feature for such a need!
By running this job on a pull request, a preview url will be created.
deploy_preview:
name: 'deploy preview'
if: github.event_name == 'pull_request'
needs: [prettier, linter, unit_tests]
uses: kerhub/workflows/.github/workflows/netlify-preview-deploy.yml@main
with:
build_directory: './output/dist'
secrets:
netlifyAuthToken: "${{ secrets.NETLIFY_AUTH_TOKEN }}"
netlifySiteId: "${{ secrets.NETLIFY_SITE_ID }}"
repoToken: "${{ secrets.GITHUB_TOKEN }}"
It uses a reusable workflow once again:
on:
workflow_call:
inputs:
build_directory:
required: true
type: string
build_command:
required: false
type: string
default: 'npm run build'
secrets:
repoToken:
required: true
netlifyAuthToken:
required: true
netlifySiteId:
required: true
jobs:
netlify:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2.4.1
with:
node-version: '14'
cache: 'npm'
- run: npm ci
- run: ${{inputs.build_command}}
- name: Deploy to Netlify
uses: nwtgck/actions-netlify@v1.2
with:
publish-dir: './output/dist'
github-token: ${{ secrets.repoToken }}
deploy-message: "Deploy from GitHub Actions"
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.netlifyAuthToken }}
NETLIFY_SITE_ID: ${{ secrets.netlifySiteId }}
Push to production!
By pushing code directly or by merging a pull request, this job will deploy a new version of your web app.
deploy_live:
name: 'deploy live'
if: github.event_name == 'push'
needs: [prettier, linter, unit_tests]
uses: kerhub/workflows/.github/workflows/netlify-live-deploy.yml@main
with:
build_directory: './output/dist'
secrets:
netlifyAuthToken: "${{ secrets.NETLIFY_AUTH_TOKEN }}"
netlifySiteId: "${{ secrets.NETLIFY_SITE_ID }}"
It uses a reusable workflow once again:
on:
workflow_call:
inputs:
build_directory:
required: true
type: string
build_command:
required: false
type: string
default: 'npm run build'
secrets:
netlifyAuthToken:
required: true
netlifySiteId:
required: true
jobs:
netlify:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2.4.1
with:
node-version: '14'
cache: 'npm'
- run: npm ci
- run: ${{inputs.build_command}}
- name: Deploy to Netlify
uses: nwtgck/actions-netlify@v1.2
with:
publish-dir: './output/dist'
production-deploy: true
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.netlifyAuthToken }}
NETLIFY_SITE_ID: ${{ secrets.netlifySiteId }}
Audit
Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.
By pushing changes to your repository, it shouldn't affect performance and common best practices.
The workflow includes 2 jobs for such a need:
- a preview one for the custom preview url (related reusable workflow)
- a live one using the production url (related reusable workflow)
lighthouse_preview:
name: 'lighthouse preview'
needs: deploy_preview
uses: kerhub/reusable-workflows/.github/workflows/lighthouse-preview.yml@main
with:
siteName: 'dojo-realworld'
secrets:
netlifyAuthToken: "${{ secrets.NETLIFY_AUTH_TOKEN }}"
lighthouse_live:
name: 'lighthouse live'
needs: deploy_live
uses: kerhub/reusable-workflows/.github/workflows/lighthouse-live.yml@main
with:
siteUrl: 'https://dojo-realworld.netlify.app/'
Are we really done yet?
Open source contribution requires to spend significant time on it as you need to:
- understand its goal to ensure your contribution will match
- to read all guidelines
- to wait for a review before your contribution
Such dedication on a project worths to greet the contributor, not to just merge their work.
But...there is no pull_request merged event.
To identify a merged content, you need 2 informations:
- the event (push)
- the merged status of the pull request
Here is the solution i used in a dedicated workflow:
on:
pull_request:
types: closed
jobs:
contribution-greetings:
if: github.event.pull_request.merged
runs-on: ubuntu-latest
steps:
- name: greet the contributor
uses: kerhub/saved-replies@v1.0.0
with:
token: ${{ secrets.GITHUB_TOKEN }}
reply: |
Thanks @${{ github.event.pull_request.user.login }}!
Your contribution is now fully part of this project :rocket:
Submission Category:
Maintainer Must-Haves
Yaml File or Link to Code
Workflow YAML Files:
Additional Resources / Info
GitHub Actions used:
- actions/checkout
- actions/setup-node
- actions/first-interaction
- kerhub/saved-replies
- treosh/lighthouse-ci-action
- kamranayub/wait-for-netlify-action
- nwtgck/actions-netlify
GitHub Reusable Workflows created:
Top comments (0)