Jason Bariamis

Technical guide

Deploy a web app with Vercel

A beginner-friendly guide for moving a small web app from local development to a live Vercel deployment using GitHub.

Back to guides

Before you begin

Use this guide when you already have a small web app in a local project folder and want to publish it online using GitHub and Vercel.

What you need

  • A GitHub account
  • A Vercel account
  • A local web app project
  • Git installed on your computer
  • A working production build command, such as npm run build

Procedure

Steps

  1. 1

    Create or choose a GitHub repository

    Create a new GitHub repository for your project, or use an existing repository that already contains your app.

  2. 2

    Push your local project to GitHub

    Commit your local project files and push them to the GitHub repository.

    git add --all
git commit -m "Initial project setup"
git push
  3. 3

    Import the repository in Vercel

    Log in to Vercel, create a new project, and import the GitHub repository.

  4. 4

    Review the build settings

    Review the framework preset, build command, and output settings. For many Next.js projects, Vercel detects these settings automatically.

  5. 5

    Deploy the project

    Click Deploy and wait for the build to complete.

  6. 6

    Verify the preview URL

    Open the generated Vercel preview URL and verify that the site loads correctly.

  7. 7

    Connect a custom domain

    After the preview is stable, connect a custom domain if needed.

Verification checklist

  • The production build completes without errors.
  • The deployed site opens from the Vercel preview URL.
  • Navigation links work as expected.
  • The layout works on desktop and mobile widths.
  • No private environment variables or secrets are exposed.

Troubleshooting

The Vercel build fails but the local site works.

Run the production build locally with npm run build, then compare the local error output with the Vercel deployment logs.

The wrong package manager is used during deployment.

Check which lockfile is committed. For example, use package-lock.json for npm, pnpm-lock.yaml for pnpm, or yarn.lock for Yarn.

The site deploys but a page returns 404.

Confirm that the page route exists in the app directory and that links point to the correct path.

Writing note

Why this structure works

This guide uses a task-based structure: purpose, prerequisites, steps, verification, and troubleshooting. That structure helps readers complete the task and confirm that the result is correct.