Vercel service page

Vercel is a natural fit for a vibe-coded frontend built with Next.js, React, Astro, SvelteKit, or another modern framework. The simplest repeatable workflow is to import a Git repository and let every push create a deployment.

Before you start

Make sure the project runs locally and has:

A package.json with the correct build script
A production build that finishes without errors
Secrets removed from the repository
A GitHub, GitLab, or Bitbucket repository

Plain HTML also works. In that case, the project may need no build command.

1. Push the project to Git

Create a repository and push the source code. Do not commit .env files, private API keys, service credentials, or database passwords.

If the app calls a backend, confirm that the backend accepts requests from the future Vercel domain.

2. Import the repository

Open Vercel, choose Add New → Project, connect your Git provider, and select the repository. Vercel detects many frameworks automatically.

The Vercel getting-started guide covers the same import workflow.

Vercel project import guide

3. Check the build settings

Review the detected framework, root directory, build command, and output directory.

Common patterns include:

Next.js: Vercel normally detects everything
Vite: build command npm run build, output dist
Astro: build command npm run build, output dist
Plain HTML: no build command, project root as the output

If the app lives in a subfolder, set the root directory before deploying.

4. Add environment variables

Open the project’s environment-variable section and add only the values the production build or server code needs. Use the browser settings; never paste secrets into source files.

Remember that variables exposed to browser JavaScript are public even when entered through a dashboard. Follow your framework’s naming rules.

5. Deploy and test

Select Deploy. Vercel builds the project and gives it a .vercel.app URL.

Open that URL and test:

The homepage and important routes
A direct refresh on a nested route
Forms and API calls
Images and fonts
Mobile layout
Runtime and build logs

Fix the first failing build message rather than changing several settings at once.

6. Add a custom domain

Open Settings → Domains, add the hostname, and follow the DNS instructions. Vercel provisions HTTPS after the DNS records point to the project.

Vercel custom domain guide

The official Vercel domain guide explains apex domains, subdomains, and external DNS.

Update the site

Push a commit to the production branch. Vercel builds and publishes it automatically. Pull requests can get preview URLs, so you can review a change before merging it.

Vercel’s Hobby plan is intended for personal, non-commercial use. Check the current plan terms before using it for paid client or business work.

Check	Ready when
Build	The production command succeeds locally
Secrets	Private values live in environment settings
Deploy	The `.vercel.app` URL opens
Routes	Direct refreshes and API calls work
Domain	The custom hostname loads over HTTPS

Your site is live.

Start publishing for free

Connect this AI to Revdoku so it can store files, create, update, and publish websites for me. Read and follow https://revdoku.com/prompt.md. For ChatGPT, Claude, or another cloud AI, connect https://app.revdoku.com/mcp and complete Revdoku OAuth. For a local agent, use Revdoku's browser device sign-in and complete the connection in Revdoku. Never ask me for a password or API key in chat. When Revdoku tools are connected, verify the connection, tell me you’re ready, and ask what I want to publish.

Create Free Account