CI/CD for Beginners: Automating Deployments as an Indie Dev

Let's be clear, deploying applications manually in 2024 is like using a horse-drawn carriage to commute. It's slow, error-prone, and frankly, a waste of your precious time. If you're an indie developer like me, every minute counts. That's where CI/CD comes in. If you've ever felt overwhelmed by the prospect of automating your deployments, this post is for you. I'll walk you through setting up a basic, functional CI/CD pipeline, even if you're a complete beginner.

TL;DR: Automate your app deployments with a basic CI/CD pipeline using GitHub Actions and a cloud provider like Vercel or Netlify. This saves time, reduces errors, and lets you focus on building features.

The Problem: Manual Deployments are a Pain

Frankly, I spent far too long manually deploying my apps. The process usually involved:

  1. Writing code.
  2. Committing changes to Git.
  3. Building the application locally.
  4. FTP-ing the build artifacts to the server (yes, I'm ashamed to admit it).
  5. Praying everything worked.

This was tedious, time-consuming, and prone to errors. I'd often forget a file, upload the wrong version, or break something in the process. It was clear that I needed a better way. This manual process also made it difficult to quickly iterate and deploy bug fixes.

What is CI/CD Anyway?

CI/CD stands for Continuous Integration and Continuous Deployment (or Continuous Delivery). Let's break that down:

  • Continuous Integration (CI): This is the practice of frequently integrating code changes into a shared repository. Each integration is then verified by an automated build and test process.
  • Continuous Deployment (CD): This is the practice of automatically deploying code changes to a production or staging environment. It builds upon continuous integration by automating the release process.

Think of it like an assembly line for software. Code changes are continuously fed into the line, processed (built and tested), and then automatically released.

My First (Failed) Attempt

Like many beginners, my first attempt at CI/CD was overly complicated. I tried to set up a Jenkins server on a Raspberry Pi, which turned into a DevOps nightmare. The setup was complex, the performance was terrible, and I spent more time fighting with the infrastructure than writing code.

Lesson Learned: Start simple. Use managed CI/CD services to avoid unnecessary complexity. Don't let perfect be the enemy of good.

The Solution: Standing on the Shoulders of Giants

The good news is that setting up a basic CI/CD pipeline is now easier than ever, thanks to platforms like GitHub Actions, Vercel, Netlify, and others. These services provide a managed environment for running your CI/CD pipelines, so you don't have to worry about infrastructure. This allows you to focus on what really matters: building your app.

Step 1: Choose a CI/CD Provider

For this example, I'll use GitHub Actions and Vercel, but you can easily adapt this to other providers.

  • GitHub Actions: A CI/CD service built into GitHub, allowing you to automate workflows directly in your repository. It’s free for public repositories and offers generous free tiers for private ones.
  • Vercel: A platform for deploying and hosting web applications, particularly well-suited for modern frontend frameworks like React, Next.js, and Vue.js. Vercel integrates seamlessly with GitHub.

There are many other options, such as Netlify, GitLab CI, and AWS CodePipeline. Explore the options and choose the one that best fits your needs.

Step 2: Configure Your Application for Deployment

Ensure your application is set up for easy deployment. This typically involves:

  • Version Control: Your code should be in a Git repository (e.g., GitHub, GitLab, Bitbucket).
  • Build Script: You should have a build script (e.g., npm run build, yarn build) that creates production-ready artifacts.
  • Environment Variables: Store sensitive configuration values (API keys, database credentials) as environment variables.

Step 3: Create a GitHub Actions Workflow

GitHub Actions workflows are defined in YAML files stored in the .github/workflows directory of your repository. Here’s an example workflow file (.github/workflows/deploy.yml) for deploying a Next.js application to Vercel:

name: Deploy to Vercel

on:
  push:
    branches:
      - main # Trigger on pushes to the main branch

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3 # Checkout the repository
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy to Vercel
        uses: vercel/vercel-action@v12
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          github-token: ${{ secrets.GITHUB_TOKEN }} # Optional: Needed to automatically comment on pull requests
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} # Optional
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} # Optional

Let's break down this workflow:

  • name: The name of the workflow (e.g., "Deploy to Vercel").
  • on: Specifies when the workflow should run. In this case, it runs on every push to the main branch.
  • jobs: Defines the jobs that will be executed in the workflow.
  • runs-on: Specifies the virtual machine to use for the job (e.g., ubuntu-latest).
  • steps: Defines the steps to be executed in the job.
    • actions/checkout@v3: Checks out the repository.
    • npm install: Installs dependencies.
    • npm run build: Builds the application.
    • vercel/vercel-action@v12: Deploys the application to Vercel.
      • vercel-token: Your Vercel API token, stored as a GitHub secret.
      • github-token: GitHub token (optional but recommended).
      • vercel-org-id & vercel-project-id: The Vercel Organization ID and Project ID (optional).

Step 4: Configure Secrets

The workflow uses secrets to store sensitive information like your Vercel API token. To configure secrets in GitHub:

  1. Go to your repository settings.
  2. Click on "Secrets" -> "Actions".
  3. Add a new secret for each required secret (VERCEL_TOKEN, GITHUB_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID).

Step 5: Push Changes and Watch the Magic Happen

Now, when you push changes to the main branch, GitHub Actions will automatically trigger the workflow. You can monitor the progress of the workflow in the "Actions" tab of your repository. If everything is configured correctly, your application will be automatically deployed to Vercel.

Beyond the Basics

This is a very basic CI/CD pipeline. Here are some things you can do to improve it:

  • Add Tests: Include automated tests in your workflow to ensure that your code is working correctly.
        - name: Run tests
      run: npm run test
  • Linting: Add a linting step to check your code for style issues.
        - name: Lint
      run: npm run lint
  • Staging Environments: Deploy to a staging environment for testing before deploying to production.
  • Notifications: Set up notifications to alert you when a deployment fails.
  • Automated Rollbacks: Implement automated rollbacks in case of deployment errors.

Benefits of CI/CD

Adopting CI/CD has significantly improved my development workflow. Here are some of the benefits I've experienced:

  • Faster Deployments: Automating deployments saves time and reduces the risk of human error.
  • Improved Code Quality: Automated tests and linting help to catch errors early in the development process.
  • Faster Feedback Loops: CI/CD enables faster feedback loops, allowing you to quickly iterate on your application.
  • Increased Confidence: Knowing that your code is automatically built, tested, and deployed gives you confidence in your releases.
  • Reduced Stress: No more late-night manual deployments!

Cost Considerations

GitHub Actions offers a generous free tier, which is usually sufficient for small to medium-sized indie projects. Vercel also offers a free tier for hobby projects, with paid plans for larger deployments. Keep an eye on your usage to avoid unexpected costs.

Conclusion: Embrace Automation

Setting up a CI/CD pipeline may seem daunting at first, but it's a worthwhile investment that will pay off in the long run. By automating your deployments, you can save time, improve code quality, and focus on building amazing applications. Don't be afraid to start small and iterate. The journey to automated deployments is a process, not a destination.

So, what are you waiting for? Embrace automation and start shipping your apps like a pro!

What are your favorite CI/CD tools and strategies? Share them on your favorite social platform and tag me - I'm always looking for new tricks! Perhaps you'd also be interested in my article on reducing cloud costs by automating scaling.