All-in-one Plotly Dash App Builder & Web Deployment Dashboard

Hey y’all :wave:!

I’ve built out a GUI tool that can be used to BUILD and DEPLOY plotly dash apps. You can select from (and preview!) different app templates to create, and then deploy them to Render.com for free, all in one place.

Let’s Make An App

Start the tool with the: dashtools gui command in your terminal. The DashTools dashboard will open in the browser.

Here you can select from different app templates (some not shown):

When you have found a template you like, give the app a name and filepath. Clicking the Create button will create your new app template for you:

Screen Shot 2023-02-01 at 9.08.28 PM

Your new app will look something like this, with an app.py file and other files in src/ directory.

You can run the app now with python src/app.py, or with the dashtools run command from the app directory!

Deploy Your App to the Internet

After modifying your shiny new Dash app, let’s get it deployed to the web using Render.com.

Head over to the Deploy tab, provide the app’s root filepath , and click Open File:

Under Deployment Requirements, there are a few missing items indicated in Red - but have no fear! Press the “generate” icons to have the render.yaml and requirements.txt files created automatically for you.

Create a new Public GitHub repo by visiting https://github.com/new.

Using your terminal (or command prompt on Windows), push your project code to GitHub, making sure to change your remote URL with the one provided in the new GitHub repo above:

cd YourApp # This is the top-level directory of the app you created
git init
git add .
git commit -m "Initial commit"
git remote add origin git@github.com:andrew-hossack/testrender-app-two.git # Your remote URL will be given to you by GitHub when you make the new repo
git push -u origin main

:information_source: Info: In future DashTools versions, the above manual GitHub deploy step may become easier!

When all requirements are met, the DEPLOY TO RENDER button will illuminate. Let’s deploy! Clicking the button will take you to Render.com.

On Render, provide a unique Service Group Name (you can use any name here!), and press the Create button, to create and deploy your service to the web:

Visit the Render Dashboard, and find your new web service:

When the deploy is complete (which may take a few minutes), you will be able to see it live online:

Installation

Want to give it a try? Install DashTools Version 1.11.1 with PyPi:

pip install dash-tools

Feedback

Let me know what you all think! I’m also looking for more devs to help out. See the DashTools GitHub if you’re interested. Thanks for reading! :v:

4 Likes

I have a medium post up Create and Deploy Plotly Dash Apps to the Internet for Free | by Andrew Hossack | Feb, 2023 | Medium is anyone wants to share :slight_smile:

2 Likes

This looks great! The easiest way to deploy a dash app! :cake:

1 Like

@andrew-hossack this is a helpful development. I already liked the the deployment feature within Dash-tools, but with this app builder feature, I can choose any template to start writing my Dash app.

A few things to think about:

  • The success message when app is created is cool. I would add a sentence saying: check out the directory to see your app. Maybe even add a direct link that would open the directory if possible.

  • Instead of App Name field label (under app settings in the GUI), I would say App directory name or just Folder Name. When I saw App Name I though app.py or myapps.py

  • instead of Default template, I would call it Getting Started or Minimal.

In many cases I have my folder set up and I’m not necessarily looking to create a fully-fledged deployable app (no need for procfile, or readme). I just want to start writing an app, so what I would love to have is the Getting Started app code so I don’t have to re-write all the library imports, app = Dash(__name__), app.layout = html.Div(...), if __name__==...

For example, maybe we could add the code snippet of the app template next to the app image. In which case, I would just grab the code and start building my app. That said, I’m not sure if this is possible or if this is appropriate in this GUI that focused on deployment though.

I like the idea of a code block next to the app preview. Your suggestions will make UX better so I’ll implement your changes!

Bump

I’ve sent out an update (albeit a few months later) which should fix dependency issues with dash-mantine-components.

Lmk if anyone has issues here.

DOCS: GitHub - andrew-hossack/dash-tools: DashTools - Plotly Dash Command Line Tools - Create, Run and Deploy Templated Python Apps from Terminal

1 Like