# Show and Tell - Deploying Dash Application in Vercel platform

**URL:** <https://community.plotly.com/t/show-and-tell-deploying-dash-application-in-vercel-platform/71643>\
**Category:** Dash Python\
**Tags:** show-and-tell\
**Created:** [January 15, 2023, 6:21am UTC](https://community.plotly.com/t/show-and-tell-deploying-dash-application-in-vercel-platform/71643 "2023-01-15T06:21:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![RahulARanger](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/rahularanger/32/22373_2.png) [@RahulARanger](https://community.plotly.com/u/RahulARanger)\
**Post date:** [January 15, 2023, 6:21am UTC](https://community.plotly.com/t/show-and-tell-deploying-dash-application-in-vercel-platform/71643/1 "2023-01-15T06:21:21Z")

</div>

Hi All,

Wanted to share how I deployed a Dash application in Vercel. In this post, I will share a few experiences.

Vercel allows you to create and deploy your web application. you can refer to the [products and features](https://vercel.com/docs#products-and-features) offered by them and their [pricing plans](https://vercel.com/pricing).

we could follow the official example as mentioned for [flask](https://github.com/vercel/examples/tree/main/python/flask). but it would not be possible for us to directly deploy your existing codebase, because of the limits one could face.  
I would suggest you go through the [limits](https://vercel.com/docs/concepts/limits/overview) thoroughly.

## Limits

Noteworthy Limits **in Hobby Plan** :

1. Max size of the serverless function [in our case, it would be the dash application along with all packages] is of 50 MB.
2. Max Response / Request Payload is 4.5 MB.

Because of the Max size of the serverless function, we cannot host a serverless function with packages that could exceed that limit.

## Modifications

I have tweaked my codebase to fit into the limits and I have improved my APIs so they could only return the responses that are only used.

I created two Repos and attached them with two separate applications in vercel.

1. First Repo is responsible for arranging the layout and handling user requests.
2. Second Repo is only responsible for fetching the data source from external API / DB and then processing it, to yield the required results.

### Advantages

1. Cleaner code base, you can easily understand your scripts. Scripts used for data preparation and processing are separated from the dash layout and UI scripts
2. You can easily debug an issue. since we have code bases separated and you can first classify if it’s a data or layout-related issue.

### Disadvantages

1. Since we can’t have `pandas` and `plotly` in the same serverless function, we would have to use `go. Figure` [instances](https://plotly.com/python-api-reference/plotly.graph_objects.html), for plotting instead of high-level API `plotly.express` as it would require pandas/numpy.
2. We may not be able to add large packages together, though it is still possible if you can maintain a package size of less than 50 MB. (Refer to the size of a zipped package from PYPI’s [files](https://pypi.org/project/pandas/#files))

## Examples

I have a project named MyListAnalyzer, I have followed this pattern and separated it into [ProjectDash](https://github.com/RahulARanger/Project-Dash) and [ProjectAPI](https://github.com/RahulARanger/ProjectAPI). Their source codes can be seen [here](https://github.com/RahulARanger/MyListAnalyzerDash) and [here](https://github.com/RahulARanger/MyListAnalyzerAPI) respectively.

You can directly jump into the [dashboard](https://rahularanger.vercel.app/MLA/view/RahulARanger), The project is about analyzing users’ AnimeList. Data is referred from [MyAnimeList](https://myanimelist.net/).

## Quick Setup

1. create an app folder, insert your dash application
2. at the parent of the app folder, add `vercel.json` with the following config:

```json
{
    "version": 2,
    "builds": [
        {
            "src": "app/index.py",
            "use": "@vercel/python"
        }
    ],
    "routes": [
        {
            "src": "(.*)",
            "dest": "app/index.py"
        }
    ]
}

```

here the `src` and `dest` points to the index file where we have the Dash Application object.

index.py

```python
from dash import Dash, page_container, dcc, clientside_callback, ClientsideFunction, Output, Input

class MainApplication:
    def __init__ (self):
        self.__app = Dash(
            __name__ ,
            update_title="Loading...",
            use_pages=True,
        )
       ....

    @property
    def app(self):
        return self.__app

Application = MainApplication()
app = Application.app.server

```

**NOTE: the variable app is required to contain server instance and should be named as app**

## Screenshots:

### Dashboard for a particular Vercel Deployment.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/c/8c747c2dfdc0e51d0be70db23f03691273ece365.png)

### You can more than one deployment

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/f/4f4eb8f14289d089d05622df2c4912fc5536a3d2.png)

### Vercel Comments in your linked github repo

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/1/5181cd55c344d3bfabd8b29036d71fd77d053936.png)

### Automation Deployments

As soon as we commit to the GitHub repo, vercel will start a deployment but it’s not on production, you would need to promote the deployment to production. while it is a manual task, it is a good practice, I usually conduct quick sanity tests on the deployed application and then promote it to Production if passed.

## Conclusion

Please don’t consider disadvantages as a blocker for your try. Have a try, I feel limits are [justified](https://vercel.com/guides/how-to-bypass-vercel-body-size-limit-serverless-functions#request-directly-from-the-source) and could fit into most of our hobby projects.

Regarding the Package size, you are good to add a package if it doesn’t exceed 2-4 MB. if it does, you would need to manually deploy along with the package mentioned in the requirement.txt, if it fails as can be seen from deployment [logs](https://github.com/orgs/vercel/discussions/103), I would understand it is not compatible. _Would need to find a tool that displays the total zipped size of all my packages in the Project._

while my experiences are limited, I hope I have configured the necessary requirements required for preparing a good dashboard. I had a good start with vercel, and I hope I would continue at the same pace.

Thank you, do let me know for any queries or suggestions.

---

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [January 15, 2023, 9:19am UTC](https://community.plotly.com/t/show-and-tell-deploying-dash-application-in-vercel-platform/71643/2 "2023-01-15T09:19:48Z")

</div>

Thanks a lot for sharing this @RahulARanger!

Always good to learn about more deployment platforms, especially the ones which offer a free tier.

Also what a cool looking dashboard🤩 Great work on the styling and I really liked the option to login using the MyAnimeList account and create a personalized dashboard (which reminded me I haven’t updated my account on MAL).

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [January 17, 2023, 5:01pm UTC](https://community.plotly.com/t/show-and-tell-deploying-dash-application-in-vercel-platform/71643/3 "2023-01-17T17:01:40Z")

</div>

Thank you for sharing this tutorial, @RahulARanger . I didn’t know about vercel until reading this. Looks promising. 💪

---

<div class="post-metadata">

**Author:** ![pengz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pengz/32/26510_2.png) [@pengz](https://community.plotly.com/u/pengz)\
**Post date:** [February 5, 2024, 4:30pm UTC](https://community.plotly.com/t/show-and-tell-deploying-dash-application-in-vercel-platform/71643/4 "2024-02-05T16:30:55Z")

</div>

it worked, thank you very much, I am using vercel to host my landing page, this is very helpful.

---

<div class="post-metadata">

**Author:** ![allie.asiazan](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@allie.asiazan](https://community.plotly.com/u/allie.asiazan)\
**Post date:** [May 26, 2024, 7:27pm UTC](https://community.plotly.com/t/show-and-tell-deploying-dash-application-in-vercel-platform/71643/5 "2024-05-26T19:27:34Z")

</div>

Hi there, thank you for this! I’m working on a Vercel deployment. Should I include app callbacks within MainAppliation()? If so, would the decorators be the same, or should they be referenced differently?