DEV Community

Cover image for How I Made My First GitHub Action Work (With Google's Help)
Arbythecoder
Arbythecoder

Posted on

2 1

How I Made My First GitHub Action Work (With Google's Help)

Let me tell you how it actually went the first time I tried setting up a GitHub Action:

  1. Pushed code
  2. Waited anxiously
  3. Saw a scary ❌ error
  4. Googled like my life depended on it
  5. Made it work anyway

Day 2 of my #90DaysOfBuilding journey

The GitHub Actions Promise

GitHub Actions promises to automate your workflows: run tests automatically, deploy your code, and more – all triggered by events in your repository like pushes or pull requests.

It sounds magical... until you try to set it up for the first time.

The Real Story

I was building a community platform prototype (part of my path toward launching a startup), and wanted to automate testing to save time.

The YouTube tutorials made it look so easy:

  1. Create a .github/workflows folder
  2. Add a YAML file
  3. Push and you're done!

What they didn't show: my YAML file had more bugs than my app 😅

Common GitHub Actions Errors I Faced

Before we get to the solution, here are some errors that had me pulling my hair out:

  1. Indentation errors
   Error: Your workflow file was invalid: The workflow is not valid. 
   .github/workflows/main.yml (Line: 15, Col: 3): Unexpected value 'with'
Enter fullscreen mode Exit fullscreen mode
  1. Missing required fields
   Error: Invalid workflow file: .github/workflows/main.yml#L15
   The workflow is not valid. .github/workflows/main.yml (Line: 15, Col: 13): 
   Required property 'runs-on' not found
Enter fullscreen mode Exit fullscreen mode
  1. Path issues with actions
   Error: Could not resolve action, did you mean 'actions/checkout@v2'?
Enter fullscreen mode Exit fullscreen mode

The Breakthrough Solution

After much trial and error, I discovered you only need 3 key parts to get started with a basic CI pipeline for a Node.js project:

name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install
      - run: npm test
Enter fullscreen mode Exit fullscreen mode

Let's break this down:

  1. name: A friendly name for your workflow
  2. on: What triggers this workflow (in this case, any push to the repository)
  3. jobs: The tasks to perform
    • build: The name of this job
      • runs-on: The type of machine to run on
      • steps: The individual actions to take
      • Check out the code
      • Set up Node.js
      • Install dependencies
      • Run tests

What Actually Helped Me Succeed

After struggling with the syntax, here's what worked for me:

1. Reading Other Developers' YAML Files

GitHub is full of public repositories with working Actions. I found projects similar to mine and analyzed their workflow files.

For example, here's the workflow from a popular Node.js project:

name: Tests

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

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x, 16.x, 18.x]
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm test
Enter fullscreen mode Exit fullscreen mode

This taught me about the matrix strategy for testing across multiple Node versions!

2. Googling Every Line I Didn't Understand

The GitHub Actions documentation is comprehensive, but sometimes overwhelming. I found it more helpful to:

  1. Search for specific error messages
  2. Look up individual actions (like actions/checkout@v3)
  3. Find beginner-friendly blog posts with examples

3. Testing on a Small Toy Repo First

Instead of trying to set up CI/CD for my main project right away, I created a tiny test repository with:

  • A simple Node.js app
  • A basic test suite
  • A GitHub Actions workflow

This allowed me to experiment without breaking anything important.

Beyond the Basics: What I Added Next

Once I had the basic CI working, I gradually added more features:

1. Environment Variables

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      NODE_ENV: test
      DB_CONNECTION: mock
    steps:
      # ... steps here
Enter fullscreen mode Exit fullscreen mode

2. Caching Dependencies

- uses: actions/checkout@v3
- name: Setup Node
  uses: actions/setup-node@v4
  with:
    node-version: 18
    cache: 'npm'
- run: npm install
Enter fullscreen mode Exit fullscreen mode

3. Conditional Steps

- name: Deploy to Production
  if: github.ref == 'refs/heads/main'
  run: npm run deploy
Enter fullscreen mode Exit fullscreen mode

The Impact on My Builder Journey

Now, every time I push code, tests run automatically. This small automation saves me hours each week that I can use to learn more and build faster.

No more "oops I forgot to test." No more "it works on my machine."

Just clean, repeatable CI magic that makes my projects more professional as I work toward building my first startup.

Common Pitfalls to Avoid

  1. YAML indentation: Spaces matter! YAML is very strict about indentation.
  2. Forgetting uses: When referencing external actions, you need the uses keyword.
  3. Path issues: Make sure your test scripts match what's in your package.json.
  4. Environment secrets: Don't hardcode API keys; use GitHub Secrets instead.

Practical Example: Complete Workflow for a Node.js API

Here's a more complete example of a workflow I use for a Node.js API project:

name: Node.js API CI

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

jobs:
  test:
    runs-on: ubuntu-latest

    services:
      # Mock database for testing
      mongodb:
        image: mongo:4.4
        ports:
          - 27017:27017

    steps:
    - uses: actions/checkout@v3

    - name: Use Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18'
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Lint code
      run: npm run lint

    - name: Run tests
      run: npm test
      env:
        NODE_ENV: test
        MONGODB_URI: mongodb://localhost:27017/test-db

    - name: Build
      run: npm run build

    - name: Upload coverage reports
      uses: codecov/codecov-action@v3
      with:
        token: ${{ secrets.CODECOV_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

To My Fellow Builders

If you're curious about GitHub Actions, don't wait to feel ready. Break something small, Google a lot, and build from there.

You'll get it. And when you do, share what you've learned.

That's how we all rise together. 🚀

Resources That Helped Me

  1. GitHub Actions official documentation
  2. GitHub Actions Marketplace
  3. GitHub Actions by Example
  4. Shield.io Badges - Add those cool status badges to your README

What's Next?

I'm planning to launch a weekly coding session soon where we'll go through DevOps basics for beginners. If you found this helpful, follow me here on Dev.to or connect on [Twitter/LinkedIn] to stay updated!

What was your first GitHub Actions experience like? Let me know in the comments!

Happy automating! 🤖

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (10)

Collapse
 
junaid_dev profile image
Junaid • Edited

You can use Render.com, It is way simple and easy to use.
Freeplan can run your API/Website for unlimited days.

But, It's good mam u learnt using of github Actions.
Which can come handy later.

My portfolio is also running at render. You can take mine portfolio as demo.
abujuni.dev

Collapse
 
devops_descent profile image
DevOps Descent

It is render.com/

Collapse
 
arbythecoder profile image
Arbythecoder

Thank you

Collapse
 
junaid_dev profile image
Junaid

Sorry, Gboard just auto-complete it to .org.

Thread Thread
 
devops_descent profile image
DevOps Descent

Can understand 🤗

Thread Thread
 
arbythecoder profile image
Arbythecoder

I do understand✌

Collapse
 
arbythecoder profile image
Arbythecoder

Thank you , definitely using render next time

Collapse
 
junaid_dev profile image
Junaid

Your welcome!

Collapse
 
junaid_dev profile image
Junaid • Edited

Thank you, ma'am!
You mentioned GitHub badges from shields.io — I was searching for that but couldn't find it on Google. Luckily, I found your comment on this post via a mail from dev.to, and then I found the post. I applied it to my repo.
You can check it out here: github.com/junaidcodingmaster/NO-G...

Collapse
 
arbythecoder profile image
Arbythecoder

Use this link: shields.io/badges. Kudos to you on the extension You shared the link earlier, well done!

ACI image

ACI.dev: The Only MCP Server Your AI Agents Need

ACI.dev’s open-source tool-use platform and Unified MCP Server turns 600+ functions into two simple MCP tools on one server—search and execute. Comes with multi-tenant auth and natural-language permission scopes. 100% open-source under Apache 2.0.

Star our GitHub!

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay