Prerequisites:

1. Git & GitHub

2. Basics of CI/CD (continuous integration and continuous delivery/deployment)

Let's first understand what GitHub Action is and the features of CI (Continuous Integration).

GitHub Actions is a continuous integration and continuous deployment (CI/CD) platform provided by GitHub. It allows you to automate workflows for your GitHub repositories. These workflows are defined in YAML files stored within your repository's .github/workflows directory.

Here's an example of a GitHub Actions workflow YAML file for Node.js:

name: CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'

    - name: Install dependencies
      run: npm install

    - name: Build
      run: npm run build

    - name: Test
      run: npm test

Let's understand this example:

The name sets the workflow's name. The on field indicates the GitHub event that starts the workflow, here triggered by any push to the repository. jobs includes one or more jobs that run simultaneously. The build job, running on an ubuntu-latest virtual machine, consists of sequential steps. These steps include using actions/checkout@v2 to check out the repository, with each step named and potentially receiving inputs through with, and executing shell commands via run.

In this example, the 5th step will be the same for all GitHub Actions:

1. Check out the repository.

2. Sets up environment.

3. Install dependencies.

4. Build the project.

5. Run tests.

---

Now you understand how GitHub Actions work. Let's implement GitHub Actions with a Laravel, Vue.js, and MySQL application. This involves setting up workflows for tasks like testing, building, and deploying your application. Here's a step-by-step guide along with an example workflow file:

1. Create a GitHub repository for your Laravel Vue.js application if you haven't already.

2. Set up your Laravel Vue.js application with the necessary files and configurations.

3. Configure MySQL:

   • If you're using a cloud-based MySQL service (like Amazon RDS, Google Cloud SQL, etc.), ensure you have the necessary credentials to access it.

   • If you're running MySQL in a Docker container or locally, you'll need to set up your workflow to spin up a MySQL container.

4. Create a GitHub Actions workflow file:

   • Inside your repository, create a .github/workflows directory.

   • Create a YAML file inside this directory. For example, name it laravel_vue_mysql.yml.

5. Define the workflow:

   • Below is an example of a basic workflow file for a Laravel Vue.js application with MySQL:

name: Laravel Vue.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    name: Build and Test
    runs-on: ubuntu-latest

    services:
      mysql:
        image: mysql:5.7
        env:
          MYSQL_ROOT_PASSWORD: root
          MYSQL_DATABASE: laravel_app
        ports:
          - 3306:3306
        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'

    - name: Install dependencies
      run: npm install

    - name: Set up Laravel environment
      run: cp .env.example .env && php artisan key:generate

    - name: Run migrations and seed database
      run: php artisan migrate --seed

    - name: Run tests
      run: npm run test

After the YAML file is ready, follow these steps:

1. Customize the workflow - Update the MYSQL_ROOT_PASSWORD and MYSQL_DATABASE environment variables with your MySQL credentials and modify the steps according to your application's setup and requirements, such as installing PHP dependencies or running additional Laravel commands.

2. Commit and push the workflow file to your repository.

3. Trigger the workflow by pushing a change to your repository or by creating a pull request, and GitHub Actions will automatically run the defined workflow.

4. Monitor the workflow execution by checking the "Actions" tab of your GitHub repository to see the status.

Conclusion:

Understanding CI/CD is essential; only then will you discover the purpose of GitHub Actions. There are many cool features that I will cover in the next blog. Until then, keep practicing GitHub Actions - CI (Continuous Integration).

Thanks For Reading This Blog.