Skip to Content
Prodly 2.0 is released 🎉
InstallationDeploy on Vercel

Deploy on Vercel

Deploying Prodly on Vercel is the fastest and easiest way to get your application into production. Vercel is optimized for Next.js and automatically handles builds, scaling, and SSL certificates.

This guide will walk you through every step: from creating a private GitHub repository to the final deployment and verification.

- Preparing the GitHub Repository

Prodly is a commercial product, so the source code must be stored in a private repository. If you don’t have a GitHub account yet, sign up here .

1. Create a New Private Repository

  1. Go to GitHub New Repository .
  2. Enter a repository name (e.g., prodly).
  3. Select Private.
  4. Do not initialize the repository with a README, .gitignore, or license – we’ll add the files manually.
  5. Click Create repository.

2. Upload Your Project Code

You have two options: upload files via the web interface or use Git from the command line.

  1. Open a terminal and navigate to your project folder.
  2. Run the following commands, replacing your-username and your-repo with your details:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/prodly.git
git push -u origin main

Option B: Uploading Files via GitHub

  1. On your repository page, click Add file → Upload files.

  2. Drag and drop all your project files and folders (except node_modules and .env).

  3. Write a commit message and click Commit changes.

Make sure the .env file is not included in the repository – it should already be listed in .gitignore. All secrets will be added later via Vercel Environment Variables.

- Deploying to Vercel

1. Sign Up / Sign In to Vercel

Go to vercel.com  and sign in using your GitHub account (this simplifies importing).

2. Import Your Project

  1. Click Add New… → Project.

  2. Vercel will list your GitHub repositories. Find the private repository you just created (e.g., prodly) and click Import.

Vercel may ask for permission to access your private repositories. Grant access.

  1. On the project configuration screen:

    • Framework Preset should automatically be detected as Next.js.

    • Root Directory leave as ./ (unless your project is in a subfolder).

    • Build and Output Settings – no changes needed; Vercel will pick up the scripts from package.json.

3. Add Environment Variables

Environment variables are critical. Add all required values from your .env.local file into Vercel’s interface or import your .env.local.

  1. On the same page, expand the Environment Variables section.

  2. Add each variable (Name → Value). The required variables for Prodly are:

NEXT_PUBLIC_APP_URL =          # Will be filled after deployment; you can leave http://localhost:3000 or a temporary URL for now
NEXT_PUBLIC_SUPABASE_URL =      # from Supabase settings
NEXT_PUBLIC_SUPABASE_ANON_KEY = # from Supabase settings
SUPABASE_SERVICE_ROLE_KEY =     # from Supabase settings (keep secret!)
GROQ_API_KEY =                  # from Groq console
GOOGLE_API_KEY =                # from Google AI Studio
SERPER_API_KEY =                # from Serper.dev
UPSTASH_REDIS_REST_URL =        # from Upstash
UPSTASH_REDIS_REST_TOKEN =      # from Upstash
STRIPE_SECRET_KEY =             # from Stripe Dashboard
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = # from Stripe Dashboard
STRIPE_WEBHOOK_SECRET =         # from Stripe Dashboard (after creating the endpoint)
Never use development values in production. For Supabase, Stripe, and other services, create separate projects/keys for your production environment.

4. Start the Deployment

  1. Click the Deploy button.

  2. Vercel will start building the project. You can watch the live logs.

  3. After a successful build, you’ll see a Congratulations! message and a URL for your application (e.g., prodly-git-main-username.vercel.app).

- Post-Deployment Configuration

1. Update NEXT_PUBLIC_APP_URL

After the first deployment, you have a permanent URL. Go back to your project settings on Vercel (Settings → Environment Variables) and change NEXT_PUBLIC_APP_URL to the actual address (e.g., https://prodly.vercel.app). Then redeploy (you can use Deployments → Redeploy).

2. Configure Stripe Webhooks

For payments to work correctly, Stripe must send events to your application.

  1. Log in to the Stripe Dashboard .

  2. Go to Developers → Webhooks.

  3. Click Add endpoint.

  4. In the Endpoint URL field, enter:

https://prodly.vercel.app/api/stripe/webhook

  1. Select the events you want to listen to (at minimum checkout.session.completed and invoice.paid).

  2. After creating the endpoint, copy the Signing secret (starts with whsec_) and add it as the STRIPE_WEBHOOK_SECRET environment variable in Vercel (then redeploy).

More info Stripe Setup

3. Verify Everything Works

  • Open your application URL.

  • Register a new user.

  • Test description generation (trial or with credits).

  • Verify that payments are processed correctly.

If something goes wrong, check the logs in Vercel (Dashboard → Project → Functions). They display errors from serverless functions.

- Updating the Application

To update the code, simply push changes to your GitHub repository (e.g., git push). Vercel will automatically trigger a new deployment (if you’ve connected the main/production branch).

To change environment variables, edit them in Vercel settings and then redeploy (click Redeploy on the latest deployment).

âť— Troubleshooting

ProblemSolution
Build fails with “Module not found”Ensure all dependencies are installed (npm install run locally and package-lock.json committed).
Database connection errorCheck NEXT_PUBLIC_SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY. Make sure the database is accessible from outside (in Supabase, allow traffic from anywhere).
Stripe webhook not workingVerify that STRIPE_WEBHOOK_SECRET is set correctly and the endpoint in Stripe points to the right URL (including trailing slashes).
Vercel free plan limits exceededIf your project requires more resources, consider upgrading to the Pro plan.
For production environments, always use the Vercel Pro plan or higher if you expect high traffic. The free plan has limits on serverless function execution time.

Conclusion

Congratulations! Prodly is now successfully deployed on Vercel. Your users can start using the AI‑powered product description generator. Any future code changes will automatically update the application, and all environment variables are securely stored.

Next steps:

  • Connect your custom domain (under Domains in your Vercel project settings).

  • Set up analytics and monitoring.

  • Explore the Vercel documentation  for advanced configuration.

Happy selling! 🚀

Last updated on
Stripe IntegrationSelf-hosted VPS Install