Vercel Deployment

Step 1: Sign In to Vercel

  1. Go to Vercel’s website.

  2. Sign up or log in using your GitHub account for seamless integration.

Step 2: Import Your GitHub Project

  1. Click on the "New Project" button.

  2. Select GitHub as the platform.

  3. Browse your GitHub repositories and select the one you want to deploy.

Step 3: Configure the Deployment Settings

  1. Environment Variables: Add all the required environment variables under the "Environment Variables" section.

Filling in Environment Variables

App Section:

NEXT_PUBLIC_WEB_APP_NAME=<put here the name of your directory>
NEXT_PUBLIC_URL=<put here the URL of your directory (example: https://directoryeasy.com)>

Authentication Setup:

NEXTAUTH_URL=<put here the URL of your directory (example: https://directoryeasy.com)>
AUTH_TRUST_HOST=<put here the URL of your directory (example: https://directoryeasy.com)>
AUTH_SECRET=<generate this code using this website: https://auth-secret-gen.vercel.app/>

Google (Allow users to sign up with Google accounts):

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

GitHub (Allow users to sign up with GitHub accounts):

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

Follow this guide to retrieve these variables: OAuth with Google and GitHub

(Note: Replace http://localhost:3000 with your website URL, e.g., https://directoryeasy.com.)

Stripe Setup (For Payments):

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

Follow this guide to set up these variables: Stripe Configuration

Email Setup (For Email Marketing System):

SMTP_HOST=smtp.zoho.com
SMTP_PORT=465
SMTP_SECURE=true
SMTP_USER=<your Zoho email (e.g., info@directoryeasy.com)>
SMTP_PASSWORD=<your Zoho email password>

You can use any SMTP server you like, but Zoho is recommended as it is free and easy to set up. Zoho also offers free professional emails.

Follow this guide to get a professional email with your domain name using Zoho:

How to Get a Professional Email with Zoho (YouTube)

Database Setup:

DATABASE_URL=

Follow this guide: Database Configuration (Note: Follow only the first half of the guide to get your Database URL.)

Cloudinary Setup (For Image Upload):

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
NEXT_PUBLIC_CLOUDINARY_API_KEY=
CLOUDINARY_SECRET=

Follow this guide: Cloudinary Configuration

Upstash Redis Setup (Track Today's Visitors):

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

Follow this guide: Upstash Redis Configuration

Google Analytics Setup (Track Recent Visitors):

GOOGLE_ANALYTICS_GA_ID=
GOOGLE_ANALYTICS_CLIENT_EMAIL=
GOOGLE_ANALYTICS_PRIVATE_KEY=
GOOGLE_ANALYTICS_PROPERTY_ID=

Follow this guide: Google Analytics API Configuration

Final Steps:

  1. Add All Variables: After assigning values to each variable, copy everything (select all) and paste them into the environment variables field in Vercel. Don’t paste them one by one; simply paste them in the first field, and it will automatically propagate to all others.

  2. Build and Output Settings:

    • Expand the Build and Output Settings section.

    • Turn on the toggle button for the Build command.

    • Paste the following command:

      npx prisma db push && next build

  3. Deploy:

    • Click Deploy and wait for a few minutes.

Congratulations! Your web app is live! 🎉

Troubleshooting: If you encounter any errors during the build process, copy the entire error message and share it with me for assistance.

PreviousSetting Up GitHubNextDomain Setup

Last updated