Github Actions: Let's Understand and Create an Interesting Workflow for our Projects
Tags: github, githubactions, beginners, frontend
Published: 2023-11-14 13:56:50

Hello everyone, how are you guys?!

We had Hacktoberfest a few days ago and it was really cool, I saw a lot of new people and a lot of cool community projects!

Probably if you participated and if you saw something really cool too: many people are using **GitHub Actions** in their repositories.

Whether you've heard of it or not, let's talk a little about **Github Actions** and see how powerful it is!

___

## 🧨 Github Actions

In a nutshell, Github Actions is a powerful way for us to automate and execute custom workflows on our projects directly from the Github repository because it is a continuous integration and continuous delivery (CI/CD) platform.

### ✴️ Github Actions Components
We can configure workflows so that Actions are called when an event occurs, for example:

- When we push for the **develop** branch we want the **Action** to automatically the merge into the **main** branch (Spoiler: We'll do an **Action** like that today 😁😁😁).

#### ✴️ Workflows:
It's an automated process created by us to execute as many of works as we want.

#### ✴️ Events:
Events are activities in the repository to start the workflow process.

#### ✴️ Jobs:
Jobs are like a set of instructions that will be executed in our workflow. Each step is a shell script that will execute the appropriate action.

#### ✴️ Actions:
Actions is a custom application for the Github Actions platform that can perform a complex task that frequently needs to be performed.

#### ✴️ Runners:
A runner is like a server that will run our workflows when they are triggered through our events.

Now we have a little knowledge about Github Actions. Let's create our own Github Action!

> I recommend that you read and study the [Github Action Documentation](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions) , the documentations are the best place to learn everything!
___

## ✳️ Creating the Our Workflow:

1: In your repository create the `.github` directory, like below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maqbwadee51agysl8s4b.png)

2: Now, create the `workflows` directory to store our **workflows** files:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42v151mqkkby8ums2vey.png)

3: Inside that, let's create our fist **workflow** file, called `github-actions.yml`:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djwpfwwjdqcmhfbdk1s6.png)

### ✴️ Creating the our Workflow structure:

1: First, inside the `github-actions.yml` let's create a name and the **event** structure:

```yaml
name: Merge Develop branch to Main
on:
  push:
    branches:
      - 'develop'
```
2: Now, we need to specify the jobs for the Workflow (the merge steps, for example) with some structures, such as the **job name**, the server to be executed, as follows:

```yaml
name: Merge Develop branch to Main
on:
  push:
    branches:
      - 'develop'
jobs:
  merge-develop-to-main:
    runs-on: ubuntu-latest
```
3: Now, let's enter the merge structure for the **action**:

```yaml
name: Merge Develop branch to Main
on:
  push:
    branches:
      - 'develop'
jobs:
  merge-develop-to-main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@main

      - run: echo "✅ Starting process to merge Develop into Main on the ${{ github.repository }}."
      - name: Merge develop -> main
        run: |
          git fetch --unshallow
          git checkout main
          git pull
          git merge develop -m "Github Actions - Auto-merge Develop to Main"
          git push
      - run: echo "📣 This job's status is ${{ job.status }}."
```
___

### ✏️ Understanding the structure:

📌 Jobs structure
```yaml
jobs:
  merge-develop-to-main:
```

It's the name of the jobs, we can see this in the Actions tab of the Github repository, as below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0ygk6c3gy7p2gl7pycm.jpg)

📌 Steps
Basically here we put the instructions for the action, as we want to merge the development branch into main, so we need to specify the process!

And noow, we can see the **Workflows** working like a charm:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lthfl5u1q8111zzrfvxp.png)

You can see a **Workflow** structure like that here: [Weather App Workflows](https://github.com/ferrorenan/weather-app/tree/main/.github/workflows)

___ 

## What have we done?!

Now, when we push ours to the develop branch, we don't need to merge into the main branch. It's a small example of what we can do with Github Actions because there are many options about what we can do!

Remember that the main aim is to automate repetitive processes in our projects!

And also remember, in this action created by us, the merge is done automatically to the main branch, so be careful not to push broken things and break the project!
___ 

That's all guys!

Hope this makes you feel a bit more comfortable with Github Actions and their possibilities!

Feel free to reach out to me if you have any questions!

and obviously I hope you enjoyed it 🤟💪🤟💪