Skip to main content
This portfolio application requires specific environment variables to function correctly. This guide covers all required variables, how to configure them, and where to obtain the necessary API tokens.

​
Overview

The application uses two types of environment variables:

Client-side Variables

Variables prefixed with VITE_ are embedded in the client bundle and accessible in browser code

Server-side Variables

Variables without the VITE_ prefix are only available in Netlify Functions (serverless backend)
Never expose sensitive API tokens as VITE_ variables. Only use the VITE_ prefix for public or non-sensitive configuration.

​
Required Variables

​
API_TOKEN

​
API_TOKEN
string
required
Azure AI API token for chat functionality
Purpose: Authenticates requests to Azure AI models for the chat assistant feature Used by: Netlify Function at netlify/functions/chat.ts Scope: Server-side only (Netlify Functions) How to obtain:
1

Access Azure AI

  1. Sign in to Azure Portal
  2. Navigate to Azure AI Services
2

Create or Select Resource

Create a new Azure AI resource or select an existing one
3

Get API Key

  1. Go to “Keys and Endpoint”
  2. Copy either KEY 1 or KEY 2
4

Configure in Netlify

Add to Netlify environment variables as API_TOKEN
Function usage:
netlify/functions/chat.ts
const response = await fetch('https://models.inference.ai.azure.com/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${process.env.API_TOKEN}`
  },
  body: event.body
});

​
VITE_GITHUB_API_TOKEN

​
VITE_GITHUB_API_TOKEN
string
GitHub API token for accessing repository data
Purpose: Enables the portfolio to fetch repository information, projects, and contribution data from GitHub Used by: Client-side code for displaying GitHub statistics and project information Scope: Client-side (embedded in the bundle) How to obtain:
1

Access GitHub Settings

  1. Go to github.com
  2. Click your profile picture > Settings
2

Generate Token

  1. Navigate to Developer settings > Personal access tokens > Tokens (classic)
  2. Click “Generate new token (classic)”
3

Configure Permissions

Select the following scopes:
  • public_repo - Access public repositories
  • read:user - Read user profile data
4

Generate and Copy

  1. Click “Generate token”
  2. Copy the token immediately (you won’t be able to see it again)
5

Add to Environment

Add to Netlify as VITE_GITHUB_API_TOKEN
This token is optional. If not provided, some GitHub-related features may be limited or disabled.

​
Configuration by Environment

​
Local Development

Create a .env file in the root directory:
.env
VITE_GITHUB_API_TOKEN=ghp_your_github_token_here
API_TOKEN=your_azure_ai_token_here
Add .env to your .gitignore file to prevent committing sensitive tokens to version control.
Loading environment variables: Vite automatically loads .env files: 
// Client-side code (React components)
const githubToken = import.meta.env.VITE_GITHUB_API_TOKEN;

​
Netlify Production

1

Navigate to Settings

  1. Open your site in Netlify dashboard
  2. Go to Site settings > Environment variables
2

Add Variables

Click “Add a variable” and enter:Variable 1:
  • Key: API_TOKEN
  • Value: Your Azure AI API token
  • Scopes: Production, Deploy previews (recommended)
Variable 2:
  • Key: VITE_GITHUB_API_TOKEN
  • Value: Your GitHub API token
  • Scopes: Production, Deploy previews (recommended)
3

Save and Redeploy

  1. Click “Save”
  2. Trigger a new deployment to apply the changes

​
Using Netlify CLI

When using netlify dev, environment variables are automatically synced from your Netlify site: 
# Login to Netlify
netlify login

# Link to your site
netlify link

# Run dev server with environment variables
netlify dev
No need to create a .env file when using netlify dev - variables are pulled from your Netlify site configuration.

​
Environment Variable Security

​
Best Practices

1

Never Commit Tokens

  • Always add .env to .gitignore
  • Never hardcode API keys in source code
  • Use environment variables for all sensitive data
2

Use Appropriate Scopes

  • Only use VITE_ prefix for non-sensitive data
  • Keep API tokens server-side when possible
  • Grant minimal permissions to API tokens
3

Rotate Tokens Regularly

  • Periodically regenerate API tokens
  • Update tokens in Netlify when changed
  • Revoke old tokens after updating
4

Monitor Usage

  • Review Netlify function logs for unauthorized access
  • Monitor Azure AI usage for anomalies
  • Set up alerts for suspicious activity

​
What NOT to Do

Never do any of the following:
  • Commit .env files to Git
  • Hardcode API tokens in source code
  • Share tokens in public forums or chat
  • Use production tokens in public repositories
  • Expose server-side tokens as VITE_ variables

​
Verifying Configuration

​
Local Verification

Test that environment variables are loaded correctly: 
// Add to a React component temporarily
console.log('GitHub Token exists:', !!import.meta.env.VITE_GITHUB_API_TOKEN);
The chat function already includes this check on line 25 of netlify/functions/chat.ts

​
Production Verification

  1. Check Function Logs:
    • Go to Netlify dashboard > Functions > chat
    • View recent invocations
    • Look for “API Token: exists” in logs
  2. Test Chat Functionality:
    • Open your deployed site
    • Try using the chat assistant
    • Check browser console for errors
  3. Check Build Logs:
    • Go to Deploys > Latest deploy
    • Verify no environment variable warnings

​
Troubleshooting

Cause: API_TOKEN not configured in NetlifySolution:
  1. Go to Site settings > Environment variables
  2. Add API_TOKEN with your Azure AI key
  3. Redeploy the site
Cause: VITE_GITHUB_API_TOKEN not set or invalidSolution:
  1. Verify token is added to environment variables
  2. Check token has correct permissions (public_repo, read:user)
  3. Ensure token hasn’t expired
  4. Regenerate token if necessary
Cause: Changed variables but site not redeployedSolution:
  1. After changing environment variables in Netlify
  2. Go to Deploys
  3. Click “Trigger deploy” > “Clear cache and deploy site”
Cause: Variable may not have been available during build timeSolution:
  1. Ensure variable is set before deploying
  2. Clear cache and redeploy
  3. Check build logs for warnings about missing variables

​
Package.json Configuration

The deploy script in package.json demonstrates environment variable usage:
package.json
{
  "scripts": {
    "deploy": "cross-env VITE_GITHUB_API_TOKEN=$API_TOKEN gh-pages -d dist --dotfiles"
  }
}
This script:
  • Uses cross-env for cross-platform compatibility
  • Maps API_TOKEN to VITE_GITHUB_API_TOKEN for the gh-pages deployment
  • Deploys the dist directory to GitHub Pages
This deploy script is for GitHub Pages. For Netlify deployment, environment variables are configured in the Netlify dashboard.

​
Summary

API_TOKEN

Required for Azure AI chat functionality
Server-side only, configured in Netlify

VITE_GITHUB_API_TOKEN

Optional for GitHub data features
Client-side, embedded in build

​
Next Steps

Netlify Setup

Complete deployment guide

Quickstart

Get started with local development

Build docs developers (and LLMs) love

Get started for freeTalk to us