Show and Tell - Deploying Dash Application in Vercel platform

Dash Python
1

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 offered by them and their pricing plans.

we could follow the official example as mentioned for 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 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, 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)

Examples

I have a project named MyListAnalyzer, I have followed this pattern and separated it into ProjectDash and ProjectAPI. Their source codes can be seen here and here respectively.

You can directly jump into the dashboard, The project is about analyzing users’ AnimeList. Data is referred from MyAnimeList.

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:
{
    "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

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
image1887×829 52.8 KB

You can more than one deployment

image
image1874×734 54.1 KB

Vercel Comments in your linked github repo

image
image1909×620 48.4 KB

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 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, 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.

4 Likes
2

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).

1 Like
3

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

1 Like