From v0.dev to Vercel: Deploying Your First Web App with GitHub Actions

Matt
Jul 20
3 min read

This is the first post in a series on building and deploying a full-stack web application — from prototype to production.

In this post, I’ll walk you through how I built the foundation of a web app using v0.dev, pushed it to GitHub, and deployed it using Vercel with a CI/CD pipeline powered by GitHub Actions.

The app I’m building is a language learning tool: “Teach Yourself Japanese” — complete with flashcards, topics, and example sentences. I've deployed it here: https://www.japanauts.com if you want to check it out! The goal of this first post is to get the MVP up and running. Future posts will cover enhancements like:

Adding sign-up/sign-in with Clerk
Running automated tests using Playwright
Implementing dark/light mode themes
Strengthening the CI/CD workflow

Rapid Prototyping with v0.dev

v0.dev is an AI-powered UI prototyping tool that turns plain text prompts into working frontend code using React and Tailwind CSS. It’s incredibly useful for quickly turning ideas into functioning prototypes.

To begin, I entered a simple prompt:

“Create a web app to help teach me Japanese. It would be great to use flashcards I can practice with.”

v0.dev prompt in action - build a simple web app to help teach Japanese

v0.dev generated a layout with topics and flashcards. Not bad! I refined it with an additional prompt:

“Can you have the topic options on the left, the card large on the right, and also provide a sentence the word is used in?”

After a couple of iterations, I had a prototype I was happy with:

Exporting to GitHub

You can link v0.dev directly with GitHub, but for this walkthrough, I downloaded the code manually. In the top-right of the v0.dev editor, you’ll see the option to export as a .zip.

Unzip the file.
Run npm install in your terminal. (I had to install and run pnpm install) - depends on the project output:

pnpm install

Start the dev server with:

npm run dev

If everything runs smoothly, go ahead and push it to a new GitHub repo.

Deploying with Vercel

Vercel is a great platform for deploying frontend apps — with a generous free tier. Here’s how to deploy your new project:

Go to vercel.com and create a free account (Hobby tier is perfect for getting started).
Click “Add New” → “Project”, and connect your GitHub account.
Select your new repo, configure the build settings if needed (default npm run build and next start should work), and click Deploy.

🎉 You should now see your site live and running!

Optional: If you plan to use GitHub Actions for deployment instead of Vercel’s automatic deploys, go to your project settings under Vercel → Git, and disconnect the GitHub repo. We show this next and is great if you want to extend the CI/CD pipeline and include extra steps (e.g. running infrastructure setup with the likes of terraform, automated tests, static code analysis etc)

Setting Up CI/CD with GitHub Actions

Now let’s automate deployment using a custom GitHub Actions workflow. Create a .github/workflows/deploy.yml file in your repo with the following:

name: Deploy

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

on:
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - uses: oven-sh/setup-bun@v2

      - name: Setup pnpm
        run: npm install -g pnpm@latest

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

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

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

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

You’ll need to add the following secrets to your GitHub repo (go to Settings → Secrets → Actions):

VERCEL_TOKEN: Create a new token at Vercel account settings → Tokens. Call it "CICD Token" or whatever you want and give it an appropriate expiry time.
VERCEL_ORG_ID: Your Vercel team ID, e.g. team_***
VERCEL_PROJECT_ID: Found in your Vercel project settings, e.g. prj_***

Once this is set up, every push to main will automatically trigger a deployment.