Vercel

This guide walks you through deploying WeaveAI to Vercel, a serverless platform.

Prerequisites

Before deploying to Vercel, ensure you have:

• A Git hosting account (GitHub, GitLab, or Bitbucket)
• A Vercel account (free tier available)

Download WeaveAI from CodeCanyon

1. Download the WeaveAI zip file from your CodeCanyon account

2. Extract the downloaded zip file and navigate to the extracted folder where the app files are located

3. Create a Git Repository on your preferred Git hosting platform:

   GitHub:

   • Go to GitHub
   • Create a new private repository (e.g., “codecanyon-saas-app”)
   • Do not initialize with README, .gitignore, or license

   GitLab:

   • Go to GitLab
   • Create a private blank project

   Bitbucket:

   • Go to Bitbucket
   • Create a new private repository

4. Initialize Git and Push Code

   Open a terminal in the WeaveAI app directory (where the app files are located) and run:

   # Initialize git repository
   git init
   
   # Add all files
   git add .
   
   # Create initial commit
   git commit -m "Initial commit: WeaveAI from CodeCanyon"
   
   # Add your remote repository (replace with your repository URL)
   git remote add origin https://github.com/yourusername/codecanyon-saas-app.git
   
   # Push to main branch
   git branch -M main
   git push -u origin main

   Replace the repository URL with your actual Git repository URL.

Install Vercel Adapter

SvelteKit requires a deployment adapter for each platform. Install the Vercel adapter by running this command in terminal while being in the app directory (where the app files are located):

npm install -D @sveltejs/adapter-vercel

Update your svelte.config.js file on the first line, just change adapter-auto to adapter-vercel:

import adapter from "@sveltejs/adapter-auto"; // change this to @sveltejs/adapter-vercel
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter(),
  },
};

export default config;

Commit these changes to your repository.

Deploy to Vercel

1. Import Your Project

   • Go to Vercel Dashboard
   • Click Add New… → Project
   • Select your Git provider and authorize Vercel
   • Choose your WeaveAI repository and click Import

2. Set Environment Variables

   Add your environment variables in the Environment Variables section:

   • DATABASE_URL - Database connection string
   • AUTH_SECRET - Auth.js auth secret
   • PUBLIC_ORIGIN - Public Origin URL
   • NODE_ENV - Node Environment

   Leave them empty for now, we’ll fill out the values later.

3. Deploy

   • Click Deploy
   • The first build will fail because DATABASE_URL doesn’t have a value yet. This is expected.
   • Click on Go to Project

Create a Database

Note

WeaveAI works with any PostgreSQL database. In this guide, we use Neon as an example, but you can use any PostgreSQL provider that suits your needs.

1. Once you’re in the WeaveAI project within the Vercel Dashboard, go to Storage
2. Click on Create Database
3. In the Create New tab, under Marketplace Database Providers, select Neon and click Continue
4. Select your database region (it’s recommended that your database and app are in the same region)
5. Leave the “Auth” option disabled, and click Continue
6. Provide a name for your database, and click Create
7. Once the database has been created, click on Connect

Push Database Schema

After creating your database, you need to push the database schema. Follow the instructions in the Database Schema documentation to set up your database tables and structure. After that has been done, come back to this page to finish the deployment.

Environment Variables

Now let’s finish configuring the Environment Variables on Vercel:

1. Go to your WeaveAI project in the Vercel Dashboard

2. Go to Settings → Environment Variables

3. We need to configure by adding the values for the following Environment Variables:

   • DATABASE_URL - This should’ve been automatically configured when we created the Neon database, so just double-check that the value is there
   • AUTH_SECRET - Use this Generator to generate your Auth.js secret
   • PUBLIC_ORIGIN - This is your app domain (e.g. https://your-domain-name.com)
   • NODE_ENV - Add production

4. Each time you update an Environment Variable, you’ll get a notification from Vercel in the bottom right corner asking you to Redeploy the app. You will need to Redeploy the app after you’ve changed the last Environment Variable so all the changes can take effect.

Custom Domain

1. While being in the WeaveAI project, go to Settings → Domains
2. Click on Add Domain
3. Add your domain
4. Update the DNS records as instructed by Vercel

Updating the app

Vercel automatically deploys your application when you push to your repository:

• Production Branch: Commits to main or master deploy to production
• Preview Deployments: All other branches get preview URLs

When there’s a new WeaveAI update, you will need to download and extract the .zip file in your existing folder that’s linked to your git repo, and push the changes. Vercel will detect the changes on your git repo and automatically deploy the latest version.