> ## Documentation Index
> Fetch the complete documentation index at: https://codinitdev-mintlify-update-changelog-codinit-dev-90028.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Deployments

> Deploy AI-generated applications to Netlify and Vercel with seamless API integration, automated workflows, and intelligent configuration for full-stack apps.

# AI-powered deployment integrations

CodinIT provides direct API integration with leading deployment platforms, enabling one-click deployments of AI-generated applications and automated publishing workflows. Deploy your AI-built applications instantly to global CDNs with full build automation, intelligent environment management, and LLM-assisted configuration.

## AI-assisted deployment platforms

<Columns cols={2}>
  <Card title="Netlify with AI deployment" icon="https://mintcdn.com/codinitdev-mintlify-update-changelog-codinit-dev-90028/MdhL3v8munj9L5IE/assets/ai-icons/netlify.svg?fit=max&auto=format&n=MdhL3v8munj9L5IE&q=85&s=988b3bb5a70c8caaa3424d2e29b8c312" href="/integrations/netlify" width="800" height="800" data-path="assets/ai-icons/netlify.svg">
    Deploy AI-generated static sites, SPAs, and serverless functions with global CDN and intelligent continuous deployment.
  </Card>

  <Card title="Vercel AI-optimized hosting" icon="https://mintcdn.com/codinitdev-mintlify-update-changelog-codinit-dev-90028/MdhL3v8munj9L5IE/assets/ai-icons/vercel-icon-light.svg?fit=max&auto=format&n=MdhL3v8munj9L5IE&q=85&s=f56f7ef5abe5784d83243e7439103add" href="/integrations/vercel" width="1155" height="1000" data-path="assets/ai-icons/vercel-icon-light.svg">
    Optimized for AI-built Next.js, React apps with edge computing and intelligent framework detection.
  </Card>
</Columns>

### Core Deployment Features

<CardGroup cols={3}>
  <Card title="API Integration" icon="plug">
    Direct API connections for seamless deployments
  </Card>

  <Card title="Build Automation" icon="cog">
    Automatic build processes with environment variables
  </Card>

  <Card title="Global CDN" icon="network">
    Instant global distribution with edge networks
  </Card>

  <Card title="SSL Certificates" icon="shield">
    Automatic HTTPS with free SSL certificates
  </Card>

  <Card title="Deployment Logs" icon="file-text">
    Real-time build logs and deployment status
  </Card>

  <Card title="Rollback Support" icon="rotate-ccw">
    Quick rollback to previous deployments
  </Card>
</CardGroup>

## Netlify Integration

### Overview

Deploy your applications to Netlify's global CDN with automatic build processes, serverless functions, and continuous deployment capabilities. CodinIT's Netlify integration provides direct API access for seamless deployments.

<Card title="Get Netlify API Token" icon="key" href="https://app.netlify.com/user/applications" horizontal>
  Create your personal access token to enable Netlify deployments.
</Card>

### Deployment Features

<CardGroup cols={3}>
  <Card title="Global CDN" icon="globe">
    Deploy to 200+ edge locations worldwide
  </Card>

  <Card title="Serverless Functions" icon="cpu">
    Deploy backend functions alongside your frontend
  </Card>

  <Card title="Build Automation" icon="cog">
    Automatic builds with custom commands and environments
  </Card>

  <Card title="Form Handling" icon="mail">
    Built-in form processing and spam protection
  </Card>

  <Card title="Asset Optimization" icon="zap">
    Automatic image optimization and asset compression
  </Card>

  <Card title="Preview Deployments" icon="eye">
    Deploy every branch for testing and collaboration
  </Card>
</CardGroup>

### Setup Instructions

<Steps>
  <Step title="Create Netlify Account">
    Visit [Netlify](https://netlify.com) and create your account if you haven't already.
  </Step>

  <Step title="Generate Personal Access Token">
    Go to **User Settings > Applications** and click **"New access token"**.
  </Step>

  <Step title="Configure in CodinIT">
    Use the deployment prompt: "Deploy to Netlify" and provide your access token when prompted.
  </Step>

  <Step title="Deploy Your Application">CodinIT will automatically create a new site and deploy your application.</Step>

  <Step title="Access Your Live Site">
    Get the deployment URL and visit your live application.
  </Step>
</Steps>

### API Integration Details

The Netlify integration uses the following API endpoints:

* **Site Creation**: `POST /api/netlify-deploy` - Creates new Netlify sites
* **Deployment**: Automatic deployment with build configuration
* **Status Monitoring**: Real-time deployment status and logs
* **Site Management**: Update site settings and environment variables

### Configuration Options

<ParamField name="NETLIFY_ACCESS_TOKEN" type="string" required>
  Your Netlify personal access token for API authentication.
</ParamField>

<ParamField name="buildCommand" type="string">
  Custom build command (defaults to "npm run build").
</ParamField>

<ParamField name="buildDirectory" type="string">
  Output directory for built files (defaults to "dist" or "build").
</ParamField>

<ParamField name="NETLIFY_SITE_NAME" type="string">
  Custom site name for new deployments. If not provided, a unique name will be generated.
</ParamField>

## Vercel Integration

### Overview

Deploy your applications to Vercel's edge network with optimized performance for Next.js, React, and modern web frameworks. CodinIT's Vercel integration provides direct API access for instant deployments and preview environments.

<Card title="Get Vercel API Token" icon="key" href="https://vercel.com/account/tokens" horizontal>
  Create your Vercel API token to enable automated deployments.
</Card>

### Deployment Features

<CardGroup cols={3}>
  <Card title="Edge Network" icon="zap">
    Deploy to 100+ edge locations worldwide for optimal performance
  </Card>

  <Card title="Framework Optimized" icon="nextjs">
    Built-in optimizations for Next.js, React, Vue, and modern frameworks
  </Card>

  <Card title="Preview Deployments" icon="eye">
    Automatic preview deployments for every branch and pull request
  </Card>

  <Card title="Serverless Functions" icon="cpu">
    Deploy edge functions and API routes with zero cold starts
  </Card>

  <Card title="Analytics" icon="bar-chart">
    Built-in performance monitoring and analytics
  </Card>

  <Card title="Custom Domains" icon="link">
    Automatic SSL certificates and custom domain support
  </Card>
</CardGroup>

### Setup Instructions

<Steps>
  <Step title="Create Vercel Account">
    Visit [Vercel](https://vercel.com) and create your account if you haven't already.
  </Step>

  <Step title="Generate API Token">Go to **Settings > Tokens** and click **"Create"** to generate a new token.</Step>

  <Step title="Configure in CodinIT">
    Use the deployment prompt: "Deploy to Vercel" and provide your access token when prompted.
  </Step>

  <Step title="Deploy Your Application">
    CodinIT will automatically create a new project and deploy your application.
  </Step>

  <Step title="Access Your Live Site">
    Get the deployment URL and visit your live application with edge optimization.
  </Step>
</Steps>

### API Integration Details

The Vercel integration uses the following API endpoints:

* **Project Creation**: `POST /api.vercel-deploy` - Creates new Vercel projects
* **Deployment**: Automatic deployment with build configuration and environment variables
* **Status Monitoring**: Real-time deployment status and build logs
* **Domain Management**: Custom domain configuration and SSL setup

### Configuration Options

<ParamField name="VERCEL_ACCESS_TOKEN" type="string" required>
  Your Vercel access token for API authentication.
</ParamField>

<ParamField name="VERCEL_TEAM_ID" type="string">
  Team ID for organization deployments (optional for personal projects).
</ParamField>

<ParamField name="framework" type="string">
  Framework detection (automatically detected from package.json).
</ParamField>

<ParamField name="buildCommand" type="string">
  Custom build command (defaults to framework-specific commands).
</ParamField>

<ParamField name="VERCEL_TEAM_ID" type="string">
  Team ID for organization deployments. Leave empty for personal projects.
</ParamField>

## Deployment Workflows

### Choosing the Right Platform

**Use Netlify for:**

* Static sites and single-page applications
* Projects with many static assets (images, fonts)
* Sites needing form handling and serverless functions
* Teams preferring simple deployment workflows

**Use Vercel for:**

* Next.js, React, and modern JavaScript frameworks
* Applications requiring edge computing and serverless functions
* Projects needing instant deployments and preview environments
* Teams building with Jamstack architecture

### Deployment Process

<Steps>
  <Step title="Prepare Your Application">
    Ensure your project has a proper build script and output directory configured.
  </Step>

  <Step title="Choose Deployment Platform">
    Select Netlify for broad compatibility or Vercel for framework optimization.
  </Step>

  <Step title="Configure Environment">Set up necessary environment variables and build settings.</Step>

  <Step title="Deploy">Use the deployment prompt in CodinIT to trigger the deployment process.</Step>

  <Step title="Monitor and Optimize">
    Check deployment logs and optimize performance as needed.
  </Step>
</Steps>

### Configuration Options

<ParamField name="VITE_SUPABASE_URL" type="string" required>
  Your Supabase project URL (e.g., `https://your-project.supabase.co`).
</ParamField>

<ParamField name="VITE_SUPABASE_ANON_KEY" type="string" required>
  Your Supabase anonymous/public API key for client-side operations.
</ParamField>

<ParamField name="VITE_SUPABASE_ACCESS_TOKEN" type="string">
  Your Supabase access token for server-side database operations.
</ParamField>

## Git Integration

### Overview

Connect your Git repositories to enable automatic deployments and version control integration. CodinIT supports both GitHub and GitLab for seamless CI/CD workflows.

<Card title="Connect Git Repository" icon="github" href="#git-setup" horizontal>
  Link your repositories for automatic deployments and collaboration features.
</Card>

### Features

<Expandable title="Repository Management">
  <CardGroup cols={2}>
    <Card title="GitHub Integration" icon="github">
      Full GitHub API integration with repository management and webhooks.
    </Card>

    <Card title="GitLab Integration" icon="gitlab">
      Complete GitLab support with merge request deployments.
    </Card>

    <Card title="Branch Protection" icon="shield-check">
      Configure protected branches and deployment permissions.
    </Card>

    <Card title="Pull Request Previews" icon="eye">
      Preview deployments for pull requests and feature branches.
    </Card>
  </CardGroup>
</Expandable>

<Expandable title="Deployment Automation">
  <CardGroup cols={2}>
    <Card title="Webhook Integration" icon="webhook">
      Automatic deployments triggered by Git pushes and merges.
    </Card>

    <Card title="Build Status" icon="check-circle">
      Monitor build status and deployment results in real-time.
    </Card>

    <Card title="Rollback Capabilities" icon="rotate-ccw">
      Quick rollback to previous commits if deployments fail.
    </Card>

    <Card title="Environment Branches" icon="git-branch">
      Deploy different branches to staging and production environments.
    </Card>
  </CardGroup>
</Expandable>

### GitHub Setup

<Steps>
  <Step title="Create GitHub Personal Access Token">
    Go to **GitHub Settings > Developer settings > Personal access tokens**.
  </Step>

  <Step title="Configure Token Permissions">Enable **repo** and **workflow** permissions for deployment access.</Step>

  <Step title="Add Repository to CodinIT">Navigate to **Settings > Git** and connect your GitHub account.</Step>

  <Step title="Enable Automatic Deployments">
    Configure webhook URLs for push-triggered deployments.
  </Step>
</Steps>

### GitLab Setup

<Steps>
  <Step title="Create GitLab Access Token">
    Go to **GitLab User Settings > Access Tokens**.
  </Step>

  <Step title="Configure Token Scopes">Enable **api** and **write\_repository** scopes for deployment access.</Step>

  <Step title="Add Repository to CodinIT">Navigate to **Settings > Git** and connect your GitLab account.</Step>

  <Step title="Configure CI/CD Variables">
    Set up deployment tokens and environment variables.
  </Step>
</Steps>

## Deployment Examples

### Static Site Deployment

**React/Vue/Angular Applications:**

```bash theme={null}
# CodinIT handles the deployment automatically
# Just use the deployment prompt: "Deploy to Netlify" or "Deploy to Vercel"
# The system will:
# 1. Detect your framework and build settings
# 2. Configure the appropriate build commands
# 3. Set up environment variables
# 4. Deploy to the chosen platform
# 5. Provide the live URL
```

### Framework-Specific Deployments

**Next.js Applications:**

* Optimized for Vercel with automatic ISR and SSR support
* Edge functions for API routes
* Automatic image optimization
* Preview deployments for all branches

**Create React App:**

* Works on both Netlify and Vercel
* Automatic routing configuration
* Static asset optimization
* Service worker support

**Vite Applications:**

* Fast builds with modern tooling
* Optimized for both platforms
* ESM support and tree shaking
* Development and production builds

### Full-Stack Application Deployment

**Next.js Applications:**

* Deploy frontend to Vercel for optimal performance
* Use edge functions for API routes
* Configure database connections (Supabase/PostgreSQL)
* Set up environment variables for API keys
* Automatic SSL certificates and custom domains
* Built-in monitoring and error tracking

### Database-Integrated Applications

**Applications with Backend Requirements:**

* Create database schema and migrations first
* Deploy migration files to your database provider
* Execute SQL queries to populate initial data
* Deploy frontend application with API integration
* Test database connections and API endpoints
* Monitor database performance and usage

## Best Practices

### Security Considerations

<Warning>
  Never commit API keys or sensitive tokens to version control. Use environment variables and secure secret management.
</Warning>

<CardGroup cols={2}>
  <Card title="Environment Variables" icon="settings">
    Use different API keys and configurations for development, staging, and production environments.
  </Card>

  <Card title="Access Controls" icon="shield">
    Configure appropriate permissions for deployment tokens and limit access to necessary resources.
  </Card>

  <Card title="Secret Rotation" icon="rotate-ccw">
    Regularly rotate API keys and access tokens for enhanced security.
  </Card>

  <Card title="Audit Logs" icon="file-text">
    Enable audit logging to track deployment activities and access patterns.
  </Card>
</CardGroup>

### Performance Optimization

<Steps>
  <Step title="Optimize Build Process">
    Configure build caching, asset optimization, and parallel processing for faster deployments.
  </Step>

  <Step title="Use CDN Features">
    Leverage platform-specific CDN features for global content delivery and performance.
  </Step>

  <Step title="Monitor Performance">
    Set up performance monitoring and alerting to identify and resolve issues quickly.
  </Step>

  <Step title="Scale Resources">
    Configure auto-scaling based on traffic patterns and resource utilization.
  </Step>
</Steps>

### 💰 Cost Management

<Tip>
  Most deployment platforms offer generous free tiers. Monitor usage and set up billing alerts to avoid unexpected
  costs.
</Tip>

<CardGroup cols={2}>
  <Card title="Usage Tracking" icon="bar-chart">
    Monitor bandwidth, build minutes, and function invocations across all platforms.
  </Card>

  <Card title="Budget Alerts" icon="bell">
    Set up notifications for approaching usage limits or budget thresholds.
  </Card>

  <Card title="Resource Optimization" icon="zap">
    Optimize resource usage through efficient caching and asset compression.
  </Card>

  <Card title="Plan Selection" icon="credit-card">
    Choose appropriate plans based on your usage patterns and growth projections.
  </Card>
</CardGroup>

## Troubleshooting

### Common Deployment Issues

<AccordionGroup>
  <Accordion title="Build Failures">
    **Problem**: Deployments fail during the build process.

    **Solutions**:

    * Check build logs for specific error messages
    * Verify Node.js version compatibility
    * Ensure all dependencies are properly installed
    * Check for syntax errors in your code
    * Verify environment variables are correctly configured
  </Accordion>

  <Accordion title="Environment Variables Not Working">
    **Problem**: Application behaves differently in deployed environment.

    **Solutions**:

    * Verify environment variable names match exactly
    * Check variable values don't contain extra whitespace
    * Ensure variables are set for the correct environment
    * Restart the deployment after variable changes
  </Accordion>

  <Accordion title="Custom Domain Issues">
    **Problem**: Custom domain not working or showing SSL errors.

    **Solutions**:

    * Verify DNS records are correctly configured
    * Wait for SSL certificate propagation (can take up to 24 hours)
    * Check domain registrar settings
    * Ensure CNAME records point to correct platform URLs
  </Accordion>

  <Accordion title="Database Connection Errors">
    **Problem**: Application can't connect to database after deployment.

    **Solutions**:

    * Verify database credentials and connection strings
    * Check database is running and accessible
    * Ensure firewall rules allow connections from deployment platform
    * Verify connection pooling configuration
  </Accordion>
</AccordionGroup>

### Getting Help

<Steps>
  <Step title="Check Platform Status">
    Visit platform status pages to ensure services are operational.
  </Step>

  <Step title="Review Documentation">Check platform-specific documentation for detailed troubleshooting guides.</Step>

  <Step title="Contact Support">
    Reach out to platform support with deployment logs and error details.
  </Step>
</Steps>

<Note>
  **Ready to deploy?** Start with Netlify or Vercel for the fastest setup, or use Supabase for full-stack applications
  with database requirements.
</Note>