1.Using Third-Party Actions in GitHub Actions: Automating CI for a React Application

As part of my DevOps journey, I’ve been exploring how GitHub Actions can streamline Continuous Integration (CI) processes. Recently, I focused on using third-party actions in GitHub Actions to automate tasks without writing them from scratch. This is inspired by what I've learned from Lauro Fialho Müller’s course, Mastering GitHub Actions - Beginner to Expert on Udemy.

In this article, I will share how I scaffolded a React app, integrated third-party actions into a workflow, and automated processes such as installing dependencies and running unit tests.

---

🚀 Step 1: Scaffolding a React App

To get started, I used create-react-app to scaffold a simple React app with TypeScript. Here’s the command I used:

npx create-react-app --template typescript react-app

This generated the basic structure of a React project, which I committed to GitHub. The next step was to automate tasks with GitHub Actions using pre-built actions available from the marketplace.

---

🛠 Step 2: Setting Up the First GitHub Action

Initial Workflow: Checking Out the Code

I created a workflow named 04-using-actions.yaml to automate simple tasks like checking out the code from my repository. This step uses a third-party action called actions/checkout, which handles the process of cloning the repository.

name: 04 - Using Actions
on:
  push:
    branches:
      - main
      - dev
      - prod

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

This action is widely used in GitHub workflows and is a perfect example of leveraging third-party actions to handle routine tasks.

---

⚙️ Step 3: Setting Up Node.js with Third-Party Actions

Next, I added a step to set up Node.js using another third-party action, actions/setup-node. This action allows me to specify which version of Node.js I want for my project, making the environment setup much easier.

- name: Setup Node.js
  uses: actions/setup-node@v4
  with:
    node-version: "20.x"

Instead of writing custom scripts to install Node.js, this action does all the heavy lifting, ensuring consistency across environments.

---

📦 Step 4: Installing Dependencies

Once Node.js is set up, the next step was to install the dependencies for my React app. I used the npm ci command, which installs a clean set of dependencies from the package-lock.json file. Here’s how I set it up:

- name: Install Dependencies
  working-directory: 04-using-actions/react-app
  run: |
    npm ci

By specifying the working-directory as 04-using-actions/react-app, the action runs the command within my React app's directory, ensuring that all dependencies are correctly installed.

---

🧪 Step 5: Running Unit Tests

To complete the workflow, I added a step to run the unit tests for the React app. Unit testing ensures that code changes don’t break existing functionality. The tests are triggered by using the npm run test command.

- name: Run Unit Tests
  working-directory: 04-using-actions/react-app
  run: |
    npm run test

This step ensures that tests are automatically executed every time I push code, helping to catch errors early in the development process.

---

🔄 Step 6: Manual Triggers with workflow_dispatch

To avoid running this workflow on every push, I added workflow_dispatch as a trigger. This allows me to manually trigger the workflow when necessary, preventing unnecessary workflow runs during active development.

on:
  workflow_dispatch

This feature gives me control over when the workflow runs, ensuring that my CI pipeline remains clean and efficient.

---

🚀 Key Takeaways

By using third-party actions in GitHub Actions, I was able to quickly set up a robust CI pipeline for my React application. Some key benefits I’ve learned from this exercise are:

• Efficiency: Leveraging pre-built actions saves time and simplifies the setup of complex workflows.

• Maintainability: Using well-documented and widely adopted actions makes it easier to manage workflows over time.

• Flexibility: GitHub Actions allows for great flexibility, whether you're running tests, deploying code, or setting up environments.

---

Next Steps in My Learning

Through this process, I’ve gained valuable hands-on experience with GitHub Actions, specifically in using third-party actions to automate workflows. Moving forward, I’m excited to explore more advanced concepts such as:

• Continuous Deployment (CD): Automating deployments as part of the CI/CD pipeline.

• Action Caching: Using cache to improve workflow speed and efficiency.

• Parallel Jobs: Running multiple jobs in parallel to speed up workflows.

---

Final Thoughts

Automating workflows with GitHub Actions and using third-party actions can significantly reduce the complexity of setting up CI/CD pipelines. As I continue learning, I look forward to exploring more advanced features and applying them to real-world projects.

---

Feel free to connect with me on LinkedIn and follow my journey as I continue mastering GitHub Actions and other DevOps tools!