> ## Documentation Index
> Fetch the complete documentation index at: https://help.emergent.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Deployment on Emergent

> The end goal of any app being built on Emergent is to launch it and share it with the world - Here's how you can do that, along with how to solve any hurdles you may face along the way.

## The steps in brief

Here's the basics we'll cover:

<Steps>
  <Step title="Previewing Your App" stepNumber={1}>
    For viewing your app as you build it and check the responsiveness, design, and interactivity.
  </Step>

  <Step title="Debugging Your App" stepNumber={2}>
    Various methods of debugging your app to ensure best results while deploying.
  </Step>

  <Step title="Pre-Deployment Health Check">
    Testing the readiness of your app for deployment before taking the plunge and committing your credits
  </Step>

  <Step title="Deployment">
    Where your app comes to life and becomes your shareable creation. (And how to add a custom domain)
  </Step>
</Steps>

## Previewing Your App

The preview that Emergent provides is a shareable link to your app, but it does expire in 30 minutes. Deploying the app commits resources to ensure your app is ready for 24 x 7 viewing and use by customers, teams and more.

Previewing your application is designed to allow you to view the look and feel of the application and iterate on features or allow for troubleshooting - should anything go wrong - before deploying it.

### To Preview Your Live App

* Click the Preview button in the Emergent interface.
* A preview window will open showing your application's current state.
* Interact with your application to test functionality.
* The preview automatically updates when you make changes to your code.

Here's a simple video to have a look at how that works:

<Tip>
  Previewing your app is useful to test the end to end functionality of your creations. Verify that all components work as intended and test your app in real-time.
</Tip>

At this point, you might identify some inconsistencies between your vision and the look and feel of the app. Here's where the [troubleshooting section](https://emergent.mintlify.app/troubleshooting/design-tweaks) comes into play.

### Preview Mode Vs. Deployment Mode

There's a big difference between the Preview and Deployment Modes in Emergent.

| **Aspect**        | **Preview Mode**             | **Deployed Mode**              |
| :---------------- | :--------------------------- | :----------------------------- |
| **Purpose**       | Testing environment          | Production environment         |
| **Accessibility** | Only you can access          | Public URL - anyone can access |
| **Persistence**   | Temporary                    | Permanent (until you update)   |
| **When to use**   | During development & testing | When app is ready for users    |
| **Changes**       | Live updates as you develop  | Requires redeployment          |
| **URL**           | Temporary preview link       | Permanent public URL           |
| **Cost**          | Free                         | Part of your plan              |

## **The Key Differences Explained**

### **1. Accessibility**

**Preview:**

* You get a temporary URL like: [https://preview-xyz123.emergent.app](https://preview-xyz123.emergent.app)
* Only works while the preview session is active
* Private - requires your session to access
* Perfect for showing team members: *"Check this preview link for 10 minutes"*

**Deployed:**

* You get a permanent URL like: [https://yourapp.emergent.app](https://yourapp.emergent.app) or custom domain
* Works 24/7 indefinitely
* Public - anyone can visit
* Perfect for: *"Here's my app - go check it out!"*

### **2. Updates & Changes**

**Preview:**

```
You: "Change the button color to blue"
Agent: *makes change*
You: *refresh preview - see blue button immediately*
```

* Changes appear in real-time (hot reload)
* Perfect for rapid iteration
* See updates instantly

**Deployed:**

```
You: "Change the button color to blue"
Agent: *makes change*
You: Need to redeploy for users to see it
Agent: *deploys new version*
You: *now public site shows blue button*
```

* Requires redeployment to update
* Ensures stability (no surprise changes for users)
* Controlled release process

### **3. Purpose & Intent**

**Preview = "Does it work?"**

* Testing environment
* Catch bugs before users see them
* Verify features function correctly
* Safe space to experiment
* No consequences if something breaks

**Deployed = "It's live!"**

* Production environment
* Real users are using it
* Should be stable and tested
* Represents your business/product
* Issues affect real users

## Troubleshooting and Debugging

Here are the different methods of troubleshooting the preview version of your app so that it's ready to go live and shared with the world.

<Columns cols={2}>
  <Card title="For Missing Functionalities" icon="circle-question" color="#55DDC8" href="/troubleshooting/missing-functionalities">
    In case of hurdles in implementing app functionalities.
  </Card>

  <Card title="For Design Tweaking" icon="draw-polygon" color="#55DDC8" href="/troubleshooting/design-tweaks">
    In case of inconsistencies in design while creating your app.
  </Card>

  <Card title="Deployment Errors" icon="share" color="#55DDC8" href="/troubleshooting/deployment-errors">
    Some common errors you may face during app deployment.
  </Card>

  <Card title="Pre-Deployment Health Check" icon="badge-check" color="#55DDC8" href="/troubleshooting/pre-deployment-check">
    An easy way to ensure a successful deployment.
  </Card>
</Columns>