Forem: Muhammad Chandra Bintang Mahaputra

Building a CI/CD Pipeline Using GitHub Actions for Deployment to Vercel

Muhammad Chandra Bintang Mahaputra — Mon, 05 May 2025 15:31:26 +0000

As developers, we’ve all heard the term DevOps—a combination of practices that aim to bridge the gap between development and operations. The goal? Deliver software faster, more reliably, and with better collaboration between teams. One key part of this is CI/CD.

CI/CD stands for Continuous Integration and Continuous Delivery/Deployment. It’s all about automating the steps that run when you push changes to your code repository. With CI/CD, you can build, test, and deploy your app in one seamless, automated process.

In this article, we’ll walk through setting up a CI/CD pipeline using GitHub Actions. And in the final stage, we’ll deploy the app to Vercel, so it’s live and accessible to everyone.

Let’s dive into the code and get started!

Build Angular Project

First, make sure Angular CLI is installed globally with this command:

npm install -g @angular/cli

Then, create a new Angular project:

ng new github-actions

You can choose your preferred setup. In my case, I went with CSS for styling and turned off Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering). The project structure will look something like this:

Now, move into the project directory and run project:

ng serve

Boom—you should see your project running in the browser.

Create .yaml File

Inside your Angular project, create a new folder called .github, and inside it, add a folder named workflows. Now, create two files in the workflows folder: development.yaml and production.yaml.

development.yaml

name: Production

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}


on:
  push:
    branches:
      - main

jobs:

  Deploy-Production:
    runs-on: ubuntu-latest
    steps:

        - uses: actions/checkout@v3

        - name: Installation Vercel
          run: npm i -g vercel

        - name: Pull vercel environment
          run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

        - name: Build project
          run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

        - name: Deploy project
          run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

production.yaml

name: Production

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  push:
    branches:
      - main

jobs:
  Test:
    runs-on: ubuntu-latest
    steps:

        - uses: actions/checkout@v3

        - uses: actions/setup-node@v3
          with:
            node-version: 18

        - run: npm ci
        - run: npm run test:production

  Deploy-Production:
    runs-on: ubuntu-latest
    steps:

        - uses: actions/checkout@v3

        - name: Installation Vercel
          run: npm i -g vercel

        - name: Pull vercel environment
          run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

        - name: Build project
          run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

        - name: Deploy project
          run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

Create GitHub Repo and Push Your Project

Once your .yaml files are set up, go ahead and create a new GitHub repository and push your project to it.

Set Up Vercel Project

Log in to Vercel, go to Account Settings, then navigate to the Tokens tab. Create a new token—you’ll need it for GitHub integration.

Add Vercel Secrets to GitHub

In your GitHub repo, go to Settings > Secrets and variables > Actions. Add a new secret named VERCEL_TOKEN and paste the token you generated on Vercel.

Install Vercel CLI Locally

You’ll need the Vercel CLI to get VERCEL_ORG_ID and VERCEL_PROJECT_ID. Start by installing it globally:

npm i -g vercel

Then log in to Vercel:

vercel login

Choose your preferred login method, and once you're in, run:

vercel link

This will create a .vercel folder containing project.json. Inside that file, you’ll find both VERCEL_ORG_ID and VERCEL_PROJECT_ID.

Add those two as secrets in GitHub just like you did with VERCEL_TOKEN.

So in total, you should now have these three secrets:

Create a Dev Branch and Test

Create a new branch (e.g., dev), make some changes, and push it. The development.yaml workflow will run automatically. If everything’s set up right, you’ll see a successful build like this:

Merge to Main for Production

After you’ve tested your changes and everything looks good, merge your branch into main and push. This will trigger the production workflow and automatically deploy your changes to Vercel.

If you run into test errors, double-check your spec files to ensure your tests are running as expected.

Check Your Vercel Project

Your project should now appear in your Vercel dashboard:

And inside your Vercel project:

Conclusion

Using GitHub Actions to build CI/CD pipelines makes your DevOps flow cleaner and more efficient. With automation in place, you can build, test, and deploy your app without hassle.

I hope this tutorial helped you get the hang of it. Thanks for sticking around—now go build something awesome!

Clean Code Is a Habit, Not a Talent

Muhammad Chandra Bintang Mahaputra — Sun, 04 May 2025 16:59:57 +0000

A smart developer once said:

"Clean code isn’t some magic skill — it’s just a habit you build over time."

And guess what? You can totally build that habit.

Clean code means writing code that's clear, organized, and easy to work with. It makes your life (and your teammates’ lives) way easier. But let’s be honest — how many times have we said, “I’ll clean this up later”?

Here’s the truth:

There’s never a perfect time to refactor

Messy code turns into technical debt — and sooner or later, you’ll have to deal with it. It’s better to start clean than to fix bugs forever later.

Writing clean code isn’t as hard as it sounds. Actually, it can feel really natural once you get the hang of it. Think of it like building something with care — not just typing stuff out.

Here are a few simple tips to help you write cleaner code:

1. Keep Things Short

Don’t stuff too much into one file. Break things up. If you're reusing the same logic in multiple places, put it in a separate utility file.

For example, say you always need to generate a running number for a table ID. Instead of repeating that logic everywhere, just make a helper function:

function runningNumber(id: number): string {
  return `CB${id}`;
}

Then call it like this:

const id = this.specialServices.runningNumber(this.listData.id);

Now you’ve got one clean line that does the job — and you only need to update it in one place if anything changes. This keeps your code short.

Some devs even set a file size limit (like 200–400 lines), but honestly, the smaller, the better.

2. Reuse Components

If a part of your app (like a modal, breadcrumb, or table) shows up in multiple places, make it a shared component — with its own HTML and logic.

Then you can reuse it anywhere by just passing in the content you want. It saves time and keeps things clean.

3. Name Your Variables Well

Good names make a huge difference.

Avoid stuff like:

const a = 12;

That tells you nothing. Instead, try:

const userAge = 12;

Now it’s instantly clear what that value means.

I’ll explain it in more detail in the refactoring article, so stay tuned!

Just remember:

Clean code is a habit, not a talent.

Once it becomes second nature, everything gets smoother.

Avoid Redundant Properties in TypeScript Interfaces

Muhammad Chandra Bintang Mahaputra — Tue, 29 Apr 2025 16:24:29 +0000

You know that feeling when you meet someone and they forget your name? Kinda annoying or awkward, right? That’s pretty much what it’s like when you're working with data but don’t know its type—it’s like the data doesn’t have a name. So, before we jump into how to cut down on redundancy in TypeScript interfaces, let’s talk about why interfaces matter in the first place, what they’re for, and how to use them the right way.

interface User {
    name: string;
    age: number;
}

Interfaces help us understand the data we get from the backend or send from the frontend, so we can work with it the right way. As your project grows, it’s easy to make mistakes—like treating a string as a number, or the other way around. That’s when bugs pop up and things get frustrating real quick. Most of the time, it’s because the data isn’t clearly defined. That’s why every field should have a proper type, so you know exactly how to use it.

We often get data in JSON format that looks something like this:

{
  "name": "lyla",
  "age": 12
}

Now, a lazy way to handle this is by assigning the data to a variable with the any type—basically telling TypeScript, “I don’t know what this is.”

let student: any;

The problem? You have no clue what’s actually in that object. So when you do something like this:

console.log("my student:", student.nickname);

It won’t throw an error—even though the nickname doesn’t exist—because any disables type checking. Instead, try this:

interface User {
  name: string;
  age: number;
}

let student: User;
student = { name: 'lyla', age: 12 };
console.log(student.email); // ❌ TypeScript will throw an error here
console.log(student.name);  // ✅ This works fine

With an interface, TypeScript can warn you if you’re trying to access something that doesn’t exist, helping you catch bugs early.

I hope my explanation about interfaces was easy to follow. Now let’s move on to how we can reduce redundant properties in TypeScript interfaces.

1. Inherit Shared Properties

In a real project, it’s pretty common to deal with different data types that share some of the same properties. For example, let’s say you have data for both students and lecturers. They both have name, age, and email—but the lecturer also has an extra property like phone_number.

A lot of beginner TypeScript developers might write something like this:

interface Student {
  name: string;
  age: number;
  email: string;
}

interface Lecturer  {
  name: string;
  age: number;
  email: string;
  phone_number: number;
}

Now, this isn’t technically wrong—it’ll work just fine. But it’s not the cleanest way to write it. You can make it better (and DRY) like this:

interface Student {
  name: string;
  age: number;
  email: string;
}

interface Lecturer extends Student {
  phone_number: number;
}

This way, you avoid repeating code and make your interfaces easier to maintain.

2. Use utility (pick ,omit, etc)

Let’s say you only need the name property from the Student interface. Instead of creating a whole new interface, you can use TypeScript’s Pick utility:

type MandatoryProperties = Pick<Student, "name">;

The Pick utility lets you grab specific properties from an existing interface—super useful when you only need part of the data structure.

On the flip side, if there’s a property you don’t need, you can use the Omit utility:

type MandatoryProperties = Omit<Student, "email">;

Omit removes specific properties from an interface. So in this case, you get a type with everything from Student except the email. These utilities help keep your code cleaner and avoid unnecessary duplication.

Use Intersection (&)

You can also combine two interfaces using an intersection—this can really speed things up and keep your code neat.

interface Student {
  name: string;
  age: number;
}

interface Lecturer {
  nip: string;
}

type User = Student & Lecturer;

Now User has all the properties from both Student and Lecturer. Pretty handy, right?

So those are some simple tips for TypeScript developers to cut down on redundant properties and write code that’s cleaner, more efficient, and easier to manage.