External Deployments

Overview

Tesslate Studio’s internal dev environments (Docker or Kubernetes containers) are for development. For production hosting, you can deploy directly to external platforms using the built-in deployment system. The platform uses a factory pattern with provider-specific implementations, supporting OAuth authentication, automatic framework detection, and two deployment modes.

Vercel

Ideal for Next.js, React, and Vue. Automatic builds, edge caching, and serverless functions.

Netlify

Great for static sites. SHA-256 file deduplication, deploy previews, and serverless functions.

Cloudflare Workers

Edge computing on 300+ global locations. Ultra-low latency with KV storage and Durable Objects.

Architecture

The deployment system uses an abstract base class with provider-specific implementations:

BaseDeploymentProvider (Abstract)
  deploy(), get_deployment_status(), delete_deployment(), test_credentials()

VercelProvider      - Vercel REST API v13
NetlifyProvider     - Netlify API v1
CloudflareProvider  - Cloudflare Workers API

DeploymentManager   - Factory and orchestration
DeploymentBuilder   - Build process coordination
FrameworkDetector   - Automatic framework detection

All provider credentials are stored encrypted in the DeploymentCredential model using Fernet symmetric encryption.

Connecting Providers

Vercel Setup

Open Deployment Settings

Navigate to Settings > Deployment Providers

Connect via OAuth

Click Connect Vercel. You will be redirected to Vercel to authorize Tesslate Studio.The OAuth flow:

Tesslate redirects to https://api.vercel.com/v2/oauth/access_token
You authorize the application
Vercel redirects back with an authorization code
Tesslate exchanges the code for an access token
The token is encrypted and stored in DeploymentCredential

Select Team (Optional)

If you belong to a Vercel team, select which team to deploy to. The team_id is stored in the credential’s provider_metadata.

Verify Connection

Tesslate calls test_credentials() to verify the token is valid. You will see “Vercel Connected” in your settings.

Netlify Setup

Open Deployment Settings

Navigate to Settings > Deployment Providers

Connect via OAuth

Click Connect Netlify and authorize Tesslate Studio. The OAuth flow works the same as Vercel, with tokens stored encrypted.

Verify Connection

Once connected, you will see “Netlify Connected” in your settings.

Cloudflare Workers Setup

Create a Cloudflare API Token

Go to dash.cloudflare.com/profile/api-tokens and create a token with:

Zone: Read permission
Cloudflare Pages: Edit permission (or Workers Scripts: Edit)

Get Your Account ID

Find your Account ID in the Cloudflare dashboard sidebar under Workers & Pages > Overview.

Add Credentials to Tesslate

Navigate to Settings > Deployment Providers > Cloudflare Workers.Enter:

API Token: Your Cloudflare API token
Account ID: Your Cloudflare account ID
Dispatch Namespace (optional): For Workers for Platforms

These are stored encrypted with the provider_metadata:

{
  "account_id": "your_account_id",
  "dispatch_namespace": "production"
}

Verify Connection

Tesslate validates the credentials with a test API call. You will see “Cloudflare Connected” in your settings.

Deployment Modes

Tesslate supports two deployment modes for each provider:

Source Mode
Pre-Built Mode

The provider builds your project

Tesslate uploads your source code to the provider
The provider installs dependencies and runs the build command
The provider deploys the built output

Best for: Frameworks with provider-specific build optimizations (Next.js on Vercel, for example)Default for: Vercel and Netlify

Tesslate builds, then uploads the output

Tesslate runs npm install and npm run build inside your project container
The built output (e.g., dist/ folder) is collected
Only the built files are uploaded to the provider

Best for: Faster deployments, more control over the build process, and providers that do not support server-side buildsDefault for: Cloudflare Workers

Deploying a Project

Quick Deploy

Open Your Project

Navigate to the project you want to deploy

Click Deploy

Click the Deploy button in the top toolbar

Select Provider

Choose Vercel, Netlify, or Cloudflare Workers

Configure Deployment

Review and adjust:

Project Name: Name for the deployed site
Framework: Auto-detected, or choose manually
Build Command: Default is npm run build (override if needed)
Output Directory: Depends on framework (see table below)
Environment Variables: Add production-specific variables
Deployment Mode: Source or pre-built

Deploy

Click Deploy Now. The system:

Fetches your OAuth credentials for the provider
Detects the framework (if not specified)
Builds the project (if pre-built mode)
Creates the deployment via the provider API
Streams build logs to the database
Updates deployment status as it progresses

Access Your Site

Once the status reaches “ready,” your live URL is available (e.g., your-project-abc123.vercel.app).

Framework Detection

Tesslate automatically detects your project’s framework by analyzing package.json dependencies and framework-specific config files:

Framework	Build Command	Output Directory	Detection
Vite (React)	`npm run build`	`dist`	`vite.config.ts` or `vite` in dependencies
Next.js	`npm run build`	`.next`	`next.config.js` or `next` in dependencies
React (CRA)	`npm run build`	`build`	`react-scripts` in dependencies
Vue	`npm run build`	`dist`	`vue` in dependencies
Angular	`npm run build`	`dist`	`@angular/core` in dependencies
Svelte	`npm run build`	`build`	`svelte` in dependencies
Static	(none)	`public`	No framework files detected

Deployment Status Flow

Deployments progress through these states:

queued  >  building  >  deploying  >  ready
                                       |
queued  >  error   (if build fails)

You can poll the status at any time:

GET /api/deployments/{deployment_id}/status

The frontend polls this endpoint automatically and shows a progress indicator.

Provider-Specific Features

Vercel
Netlify
Cloudflare Workers

Features:

Automatic framework detection and build optimization
Edge caching and CDN
Serverless functions
Preview deployments per commit
Custom domains with automatic SSL

API: Vercel REST API v13 Auth: OAuth token (stored encrypted) File size limit: 100MB per deployment

Environment Variables

Set production environment variables for your deployed app:

Open Project Settings

Go to the project’s deployment configuration

Add Variables

Add environment variables (e.g., VITE_API_URL=https://api.example.com)

Deploy or Redeploy

Variables are injected during the build process

Never expose sensitive keys like API secrets in client-side environment variables. Use the VITE_ prefix only for values that are safe to be visible in the browser.

Custom Domains

After deployment, configure custom domains through the provider:

Vercel
Netlify
Cloudflare

Go to your Vercel dashboard
Select the project
Navigate to Settings > Domains
Add your custom domain
Configure DNS: Add a CNAME record pointing to cname.vercel-dns.com

Managing Deployments

Viewing Deployments

GET /api/deployments/

Filter by project, provider, or status. See deployment history with URLs and timestamps.

Redeploying

POST /api/deployments/{deployment_id}/redeploy

Triggers a new deployment using the same configuration. Useful after code changes or to retry a failed deployment.

Deleting a Deployment

DELETE /api/deployments/{deployment_id}

Removes the deployment from the provider. The database record is kept with status set to “deleted” for audit history.

Viewing Build Logs

GET /api/deployments/{deployment_id}/logs

Returns timestamped build and deployment logs for debugging failed builds.

Deployment Limits by Tier

Tier	Max Active Deployments	Additional Slots
Free	1	N/A
Basic	3	$10 each
Pro	5	$10 each
Ultra	20	$10 each

You can purchase additional deployment slots from Settings > Billing for $10 per slot.

Security

The deployment system includes several security measures:

Feature	Description
Credential Encryption	OAuth tokens encrypted at rest with Fernet symmetric encryption
Token Refresh	Automatic token refresh when expired (OAuth providers)
Project Ownership	Only the project owner can deploy
Environment Variable Encryption	Sensitive env vars encrypted in transit and at rest
Build Isolation	Each build runs in an isolated container environment
Session Ownership	Verify-checkout confirms the authenticated user matches the deployment

Troubleshooting

Build Failed

Common causes:

Missing dependencies in package.json
TypeScript errors
Missing environment variables

Solutions:

Test the build locally by running npm run build in your project container
Check the deployment logs at GET /api/deployments/{id}/logs
Verify all required environment variables are set
Fix errors and redeploy

Deployment Timeout

Cause: Build taking longer than 10 minutesSolutions:

Use pre-built mode to build locally and upload only the output
Optimize the build process (tree shaking, code splitting)
Check for infinite loops in build scripts
Reduce bundle size by removing unused dependencies

OAuth Connection Failed

Cause: OAuth token expired or was revokedSolutions:

Go to Settings > Deployment Providers
Disconnect the provider
Reconnect and re-authorize
For Cloudflare, verify the API token has not expired and has correct permissions

Site Not Loading After Deploy

Cause: Build succeeded but the site shows errorsSolutions:

Check the browser console for JavaScript errors
Verify all environment variables are set for production
Check the deployment logs in the provider’s dashboard
Ensure API endpoints are accessible from the deployed domain

Files Not Uploading

Cause: File collection or upload failureSolutions:

Check file size limits (Vercel: 100MB, Netlify: 200MB per deploy)
Verify the build output directory exists and contains files
Check network connectivity to the provider API
Try the pre-built mode if source mode fails

Best Practices

Test Before Deploying

Always test your build locally with npm run build in the project container before deploying. This catches most build errors before they reach the provider.

Secure Environment Variables

Use the provider’s dashboard to set sensitive environment variables rather than including them in your code. Never use the VITE_ prefix for secret values.

Use Pre-Built Mode for Speed

Pre-built deployments are faster because the build happens in your Tesslate container (which already has dependencies installed) rather than on the provider’s build infrastructure.

Redeploy After Code Changes

After making changes in the editor, click Redeploy to push the latest version to production. The previous deployment remains accessible until the new one is ready.

Next Steps

GitHub Integration

Connect GitHub for automated CI/CD deployment workflows

Billing

Manage deployment limits and purchase additional slots

API Keys

Set up deployment provider credentials

Projects

Configure project build settings

Get Started

Self-Hosting

Core Concepts

Working with Projects

AI Agents

Advanced Features

Developer Guide

Development

Overview

Vercel

Netlify

Cloudflare Workers

Architecture

Connecting Providers

Vercel Setup

Netlify Setup

Cloudflare Workers Setup

Deployment Modes

Deploying a Project

Quick Deploy

Framework Detection

Deployment Status Flow

Provider-Specific Features

Environment Variables

Custom Domains

Managing Deployments

Viewing Deployments

Redeploying

Deleting a Deployment

Viewing Build Logs

Deployment Limits by Tier

Security

Troubleshooting

Best Practices

Next Steps

GitHub Integration

Billing

API Keys

Projects

Get Started

Self-Hosting

Core Concepts

Working with Projects

AI Agents

Advanced Features

Developer Guide

Development

​Overview

Vercel

Netlify

Cloudflare Workers

​Architecture

​Connecting Providers

​Vercel Setup

​Netlify Setup

​Cloudflare Workers Setup

​Deployment Modes

​Deploying a Project

​Quick Deploy

​Framework Detection

​Deployment Status Flow

​Provider-Specific Features

​Environment Variables

​Custom Domains

​Managing Deployments

​Viewing Deployments

​Redeploying

​Deleting a Deployment

​Viewing Build Logs

​Deployment Limits by Tier

​Security

​Troubleshooting

​Best Practices

​Next Steps

GitHub Integration

Billing

API Keys

Projects

Overview

Architecture

Connecting Providers

Vercel Setup

Netlify Setup

Cloudflare Workers Setup

Deployment Modes

Deploying a Project

Quick Deploy

Framework Detection

Deployment Status Flow

Provider-Specific Features

Environment Variables

Custom Domains

Managing Deployments

Viewing Deployments

Redeploying

Deleting a Deployment

Viewing Build Logs

Deployment Limits by Tier

Security

Troubleshooting

Best Practices

Next Steps