Skip to content

Latest commit

 

History

History
87 lines (62 loc) · 3.29 KB

File metadata and controls

87 lines (62 loc) · 3.29 KB

Chuma: Financial Analyst AI - Vercel Deployment Guide

This guide will walk you through deploying your Vite-based React application to Vercel.

Prerequisites

  1. Node.js and npm: Ensure you have Node.js (version 18 or newer) and npm installed on your local machine. You can download it from nodejs.org.
  2. Git: Ensure you have Git installed.
  3. Vercel Account: Sign up for a free account at vercel.com.
  4. GitHub/GitLab/Bitbucket Account: You will need an account on one of these platforms to host your code.

Step 1: Set Up Your Local Project

First, you need to set up your local environment.

  1. Create an Environment File: In the root of your project, create a new file named .env.

  2. Add Your API Key: Open the .env file and add your Google Gemini API key like this:

    VITE_API_KEY=your_actual_api_key_here
    

    Important: The VITE_ prefix is required by Vite to expose the variable to your application code.

  3. Install Dependencies: Open your terminal in the project's root directory and run:

    npm install
  4. Run the Development Server: Start the app to make sure everything works locally.

    npm run dev

    Open your browser to http://localhost:5173 (or whatever URL the terminal shows) to see the app running.


Step 2: Push Your Code to a Git Repository

Vercel deploys directly from a Git repository.

  1. Initialize a Git repository in your project folder (if you haven't already):

    git init
    git add .
    git commit -m "Initial commit"
  2. Create a new repository on GitHub (or your preferred Git provider). Do not initialize it with a README or .gitignore.

  3. Link your local repository to the remote one and push your code:

    # Replace the URL with your repository's URL
    git remote add origin https://github.com/your-username/your-repo-name.git
    git branch -M main
    git push -u origin main

Step 3: Deploy on Vercel

Now you're ready to deploy.

  1. Log in to your Vercel account.

  2. Go to your Dashboard and click "Add New... -> Project".

  3. Import your Git Repository by selecting it from the list. You may need to grant Vercel access to your GitHub account.

  4. Configure Your Project: Vercel is smart and will likely auto-detect that you are using Vite. The default settings should be correct:

    • Framework Preset: Vite
    • Build Command: vite build
    • Output Directory: dist
    • Install Command: npm install
  5. Add Environment Variables (Crucial Step!): The application needs your Google Gemini API key to function.

    • Expand the "Environment Variables" section.
    • Add a new variable:
      • Name: VITE_API_KEY
      • Value: Paste your actual Google Gemini API key here.
    • Important: Vercel encrypts this key, so it is secure.
  6. Deploy: Click the "Deploy" button.

Vercel will now start building and deploying your application. You'll see the build logs in real-time. Once it's finished (usually in a minute or two), you'll get a URL where your live application is running.

Congratulations, your Chuma Financial Analyst AI is now live on the web!