In this blog post, I will show you how Github Actions work and how you can use it to spend less time deploying and more time coding.
Hi π I'm Dawson. I daily tweet about web dev tips and write long-form content like this. So if you like it, please consider giving me a follow on Twitter.
Github Actions is another feature on Github. It relies on the GitHub webhooks API to detect commits and pull requests, allows you to build and deploy your code.
You're able to create pipelines with customizable actions per stage, monitor your repository for changes, and run the appropriate pipeline for the event that happened. For example, if new code is pushed, then run some tests.
You can specify conditions that need to be fulfilled before running actions. You can create your custom scripts or use ready-to-use workflow templates.
Deploying your application once you make changes to your code manually could be exhausting, and repetitive.
On a personal use case, let's say you deploy your apps manually. You write some code; you push to GitHub, ssh into your VPS, pull the changes from Github, build and deploy, and forget to add something? REPEAT. Exhausting right?
With Github Actions, you can create a CI/CD pipeline that does all of those things for you, what you have to do is push to GitHub, and GitHub will take care of your workflow.
Open source projects take outstanding advantage of this service; it makes everything much more straightforward.
Imagine maintaining an extensive open source project, and contributors send pull requests all the time, some of those pull requests might break your code if you merge it into your main branch.
What can you do? You can set up a workflow with Github Actions and build and test the app every time someone creates a pull request so that before you even try to consider reading a pull request, you already see that this pull request breaks some part of your code.
The best thing about GitHub Actions is that you probably already use GitHub.
So it's much better to use GitHub Actions than to use some other third-party tool to manage your CI/CD pipeline and build high-performing, secure pipelines.
You don't need to manage your workflows; you can use already made environments to run your pipeline workflow.
Github CI/CD pipeline is also more accessible than other CI/CD tools and does not require you to have a full-time DevOps team that is cost-intensive and not ideal for startups. Instead, you can quickly learn how to use it and create workflows with your development team.
All these actions will be happening on Github servers. This means you save resources because you don't have to run them on your server.
These Github actions that we talked about will only trigger when specific events happen, like push
and pull request
. Let's say that we only want a particular action to happen only when the event is push
, meaning that every time some new changes are being pushed to the Github repository.
So basically, GitHub will listen to an event and trigger the actions given by the developer.
Each job will run on a different server, for example, any job in the job
tag is run by a server, and another job
has another server.
Sometimes we want jobs to run one after another. If we decide to do so, we need to use the needs
tag in the other job and include the other jobs` name. More of this later
Today, one of the most common workflows is the CI/CD pipeline, which runs some actions in order.
Code is pushed from development to a testing environment and finally to production for end-users to access.
Github Actions use the .yml
language to define workflows. So if you don't have a basic understanding of reading YML, I recommend reading some articles about it.
There are many syntaxes that Github uses to define workflows, I will talk about the most used and common ones, and later in this article, we will write our workflow for a node.js application, test it and then deploy it to our own VPS.
Here are some of the most essential .yml
syntaxes of Github workflow:
Sometimes you want to add a password or a private key inside your workflow file.
But you don't want other people to see it, and you still want to run the actions.
In this case, you can put your repository secrets from your repository settings; you can specify the name of your key and the value of your key.
Later you can use these secrets in your .yml
file by using the ${{ secrets.YOUR_SECRET }}
syntax.
In this tutorial, I'll show you how to set up a GitHub workflow so that when we push some changes to our main branch on GitHub, our website will automatically build, test, and host itself again. which will save us a lot of time & effort.
So, in summary:
The following code shows the Github workflow code for testing, building, and hosting a node.js app on a VPS using SSH keys:
name: Node.js CI
on:
push:
branches: [ master ]
jobs:
build-and-test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm i
- run: npm run build
- run: npm run test
deploy:
needs: build-and-test
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.IP }}
username: ${{ secrets.USERNAME }}
key: ${{ secrets.KEY }}
script: cd path/to/your/app/directory && git checkout . && git pull && npm run build && pm2 restart MyApp
The first job we have created is to build and test the app on the Github servers.
If the first action was successful, the second one will be executed. We specified this by using needs
syntax and adding the previous job name.
Great, now your server hosts itself again without you having to worry about build fails or errors in your code. Now, you can spend more time coding and less time re-deploying.
Thank you for taking the time to read my blog post. If you found it helpful, please feel free to follow me on Twitter, where I post daily web development tips.
website: https://dawsoncodes.com
Twitter: https://twitter.com/dawsoncodes
Syntax highlighting with Prism and Next.js
Learn how to highlight your syntax the easiest way for your dev blog. This tutorial will show you the easiest and most efficient way of highlighting syntax in your code using Next.js and PrismJs.
Take your GitHub profile to the next level with these easy steps
There is no better way to show off your skills than having an eye-grabbing GitHub profile, not only does it show youβre passionate and love your job, it will also make you stand out when applying for a job. In this article, I will show you what makes a good GitHub profile and how to build an awesome GitHub profile.
10 React community hooks you should be using
When it comes to programming, clean code is what you should always strive for. Here are 10 community hooks to help you write cleaner and more performant code.
Building a REST API with Prisma and express.js
Prisma is an amazing tool when it comes to TypeScript ORMs, in this tutorial we are going to build a REST API with Prisma and Express.js.
Syntax highlighting with Prism and Next.js
Learn how to highlight your syntax the easiest way for your dev blog. This tutorial will show you the easiest and most efficient way of highlighting syntax in your code using Next.js and PrismJs.
Take your GitHub profile to the next level with these easy steps
There is no better way to show off your skills than having an eye-grabbing GitHub profile, not only does it show youβre passionate and love your job, it will also make you stand out when applying for a job. In this article, I will show you what makes a good GitHub profile and how to build an awesome GitHub profile.
10 React community hooks you should be using
When it comes to programming, clean code is what you should always strive for. Here are 10 community hooks to help you write cleaner and more performant code.
Building a REST API with Prisma and express.js
Prisma is an amazing tool when it comes to TypeScript ORMs, in this tutorial we are going to build a REST API with Prisma and Express.js.