Publishing & Deployment

Overview

Onlook provides flexible deployment options to match your workflow:

• Onlook Preview - Instant hosting with automatic SSL certificates

• Custom Domains - Connect your own domain for branded URLs

• Environment Variables - Manage via .env files in the code editor

• Deployment Control - Cancel, restart, and manage deployments

• Live Prototypes - Share your work with stakeholders instantly

Deploy to Onlook Preview

Publish your project to a live URL in seconds, perfect for sharing prototypes and demos.

Quick Publish

How to deploy:

1. Click the Publish button in the top toolbar

2. Click Publish my site to start the build process

3. Your project will be live in 30-60 seconds

4. Copy your preview URL like https://abc123.onlook.live

Preview URLs Are Permanent
Your link won't expire and will always show the latest deployed version. Perfect for sharing with clients and stakeholders.

How It Works

When you deploy to Onlook Preview:

1. Build Process - Your Next.js project is built and optimized for production

2. SSL Certificate - Automatic HTTPS with SSL certificates included

3. Live URL - Receive a permanent preview URL you can share immediately

What Gets Deployed

• All pages and routes in your project

• Static assets (images, fonts, icons)

• API routes and server-side functions

• Styling and theme configurations

• Environment variables from .env.production

Production Environment Variables
Only variables in .env.production are included in deployments. Make sure to configure production API keys and secrets separately from your development .env file.

Deployment Status

Track your deployment progress:

• Building - Code is being compiled and optimized

• Deploying - Built files are being uploaded to hosting

• Live - Your site is accessible at the preview URL

• Failed - Build errors occurred (check logs for details)

Sharing Your Preview

Click the Copy Link button next to your preview URL to share via:

• Email to clients or stakeholders

• Slack or team chat for quick reviews

• Project management tools for feedback

• Social media to showcase your work

Custom Domain Setup

Connect your own domain for a professional URL that represents your brand.

Why Use a Custom Domain?

• Professional Branding - Use your company's domain instead of generic URLs

• SEO - Search engines favor custom domains for ranking

• Trust & Credibility - Clients trust branded URLs more than preview links

• Memorable URLs - Easier for users to remember and type

Requirements:

• A custom domain purchased from a domain registrar

• Pro plan or higher

• Access to your domain's DNS settings

Setup Steps

1. Open Domain Settings
   - Go to your project's Publishing → Custom Domain

2. Enter Your Domain
   - Type your domain name (e.g., myapp.com or app.mycompany.com)
   - Click Add Domain

3. Configure DNS Records
   - Onlook provides DNS records to add:
   - CNAME Record for domains
   - TXT Record for verification
   - Copy these values for the next step

4. Add Records to Your DNS Provider
   - Log into your domain registrar
   - Navigate to DNS settings
   - Add the records provided by Onlook
   - See provider-specific instructions below

5. Verify Domain
   - Return to Onlook
   - Click Verify DNS Configuration
   - Onlook checks that your DNS records are correct

6. Wait for Propagation
   - DNS changes take 5 minutes to 48 hours to propagate
   - Most changes complete within 10-20 minutes

7. SSL Certificate Issued
   - Once DNS is verified, Onlook automatically issues an SSL certificate
   - Your site will be live with HTTPS within minutes

DNS Propagation Takes Time
DNS changes can take up to 48 hours depending on your provider. Don't panic if your domain doesn't work immediately - this is normal!

DNS Provider Instructions

Namecheap

1. Log into namecheap.com

2. Click Domain List → Select your domain → Manage

3. Navigate to the Advanced DNS tab

4. Click Add New Record:
   - Type: CName Record
   - Host: @ (for root domain) or subdomain name
   - Value: url provided by Onlook
   - TTL: Automatic

5. Save changes (takes 5-30 minutes to propagate)

GoDaddy

1. Log into godaddy.com

2. Click My Products → Find your domain → DNS

3. Scroll to DNS Records and click Add:
   - Type: CName Record
   - Host: @ (for root domain) or subdomain name
   - Value: url provided by Onlook
   - TTL: Automatic

4. Save (typically 10-60 minutes to propagate)

Cloudflare

1. Log into cloudflare.com

2. Select your domain from the dashboard

3. Navigate to DNS → Records

4. Click Add record:
   - Type: CName Record
   - Host: @ (for root domain) or subdomain name
   - Value: url provided by Onlook
   - TTL: Automatic
   - Proxy status: DNS only (gray cloud)

5. 5. Important: Make sure the cloud icon is gray (DNS only), not orange

Other DNS Providers

For providers not listed:

1. Log into your domain registrar's control panel

2. Find "DNS Settings," "DNS Management," or "Name Servers"

3. Add an A Record with:
   - Type: CName Record

   - Host: @ (for root domain) or subdomain name

   - Value: url provided by Onlook

   - TTL: Automatic

4. Save changes and wait for propagation

Using Subdomains

Subdomains (like app.mycompany.com) are perfect for separating your application from your marketing site.

CNAME Record for Subdomains:

1. In Onlook, enter your full subdomain (e.g., app.mycompany.com)

2. Copy the CNAME target provided (like abc123.onlook.live)

3. In your DNS provider, add:

- Type: CNAME

- Name: app (just the subdomain part)

- Target: The CNAME provided by Onlook

- TTL: 300 seconds

4. Verify in Onlook - SSL certificate will be issued automatically

Environment Variables

Manage sensitive data and configuration using .env files in the code editor.

Understanding Environment Variables

Environment variables store configuration and secrets outside your code:

• API keys and tokens

• Database connection strings

• Third-party service credentials

• Feature flags

• Environment-specific settings

Why Separate Development and Production?

• Development .env): Test API keys, local database, debug mode enabled

• Production .env.production): Real API keys, production database, optimized performance

Never Commit Secrets
Never commit secrets to your codebase. Always use environment variables for sensitive data like API keys, database passwords, and authentication tokens.

Setting Environment Variables

Using the Code Editor:

1. Open the Code Editor

2. Create or edit .env (for development) or .env.production (for production deployments)

3. Add variables in KEY=value format:

4. Save the file

5. Variables are immediately available in sandbox

6. Redeploy for production variables to take effect

Onlook automatically injects these variables during build and runtime.

Best Practices

Naming conventions:

• Use SCREAMING_SNAKE_CASE for variable names

• Prefix with service name: STRIPE_, SUPABASE_, OPENAI_

Frequently Asked Questions

Do I need a Pro plan to deploy?

No! Free plan includes deployments to Onlook Preview URLs. Custom domains require Pro plan or higher.

How many projects can I deploy?

Free: 5 projects | Pro: Unlimited projects

What happens if I cancel my subscription?

Your deployed sites remain live for 30 days after cancellation. After that, they're taken offline but your code remains in your account.

Can I export my code and deploy elsewhere?

Yes! Export your code anytime and deploy to Vercel, Netlify, or any Next.js hosting provider.

Are Onlook URLs permanent?

Yes, Onlook URLs don't expire and always show your latest deployment.

Can I use a domain I already own?

Yes! Use any domain you own by adding the DNS records Onlook provides.

How long does domain setup take?

DNS verification typically takes 5 minutes. Full propagation can take up to 48 hours.

Are SSL certificates included?

Yes! All deployments include free, automatic SSL certificates via Let's Encrypt.

Do SSL certificates renew?

Yes automatically. No action required.

How long do deployments take?

Typical deployment: 30-90 seconds | Large projects: 2-5 minutes

Can I preview before deploying?

Yes! Test everything in your visual canvas or preview tab first, then deploy to production.

Where are sites hosted?

Globally distributed CDN with edge locations worldwide for fast loading anywhere.