Organization repo + hobby plan in Vercel

algoorgoal

Chan

Posted on May 3, 2024

Organization repo + hobby plan in Vercel

Vercel doesn't support deploying an organization repository for free, you will need some workaround if you want to stay on the hobby plan. In this post, I'll talk how you can do it with github actions. I hope the pricing boundary doesn't stop student developers from building and shipping new ideas.

This post is entirely inspired by A github gist tutorial.

Requirements

  • This guideline assumes that you're working on a Next.js project.
  • Be careful not to leak vercel keys and tokens.

How to

  • Install vercel cli by running the following command:
yarn global add vercel
Enter fullscreen mode Exit fullscreen mode
  • Check if vercel cil has been successfully installed.
vercel --version
Enter fullscreen mode Exit fullscreen mode
  • Run vercel cli. You'll get some inquiries on how to set up your deployment. Make sure to deploy to your [username].
vercel
Enter fullscreen mode Exit fullscreen mode

Vercel website - create tokens

.github/workflows/vercel-merge.yml

# vercel-merge.yml
name: Deploy to vercel on merge
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          github-token: ${{ secrets.GITHUB_TOKEN }}
          vercel-args: "--prod"
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}
Enter fullscreen mode Exit fullscreen mode

This workflow deploys to vercel on merging to main.

  • .github/workflows/vercel-pull-requst.yml
name: Create vercel preview URL on pull request
on:
  pull_request:
    branches: [main, master]
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: amondnet/vercel-action@v25
        id: vercel-deploy
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          github-token: ${{ secrets.GITHUB_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}
      - name: preview-url
        run: |
          echo ${{ steps.vercel-deploy.outputs.preview-url }}
Enter fullscreen mode Exit fullscreen mode

This workflow creates a preview on pull request.

  • VERCEL_TOKEN is the token you created on the vercel website.
  • You can find ORG_ID, PROJECT_ID in package.json. They should be created when you run vercel command.

Happy Coding!

💖 💪 🙅 🚩
algoorgoal
Chan

Posted on May 3, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related