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

**URL:** <https://community.plotly.com/t/all-in-one-plotly-dash-app-builder-web-deployment-dashboard/72216>\
**Category:** Dash Python\
**Tags:** show-and-tell\
**Created:** [February 2, 2023, 3:17am UTC](https://community.plotly.com/t/all-in-one-plotly-dash-app-builder-web-deployment-dashboard/72216 "2023-02-02T03:17:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrew-hossack](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@andrew-hossack](https://community.plotly.com/u/andrew-hossack)\
**Post date:** [February 2, 2023, 3:17am UTC](https://community.plotly.com/t/all-in-one-plotly-dash-app-builder-web-deployment-dashboard/72216/1 "2023-02-02T03:17:34Z")

</div>

# Hey y’all 👋!

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](http://Render.com) for free, all in one place.

## Let’s Make An App

 ![Screen Shot 2023-02-01 at 8.26.57 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/2/62f642d73db527098c86397a054c082cc5c2cff7.png)

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

 ![Screen Shot 2023-02-01 at 8.28.06 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/0/b01b6074e86f4a6ca20c5dc4ea6bf73519127393.png)

 ![Screen Shot 2023-02-01 at 8.29.19 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/1/9149f37c4825ada0fe5a5d96d3d432f0ae683938.png)

 ![Screen Shot 2023-02-01 at 8.29.51 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/7/676fe76e4e062c7ab06a22e47ce8a813d042909f.jpeg)

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/c/8c8ca9c9281f19b7ccbebc35e8624c9a9263fac7.png)

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

 ![Screen Shot 2023-02-01 at 8.35.41 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/5/555a7839e7beac905d021fe93b82283e6baecb98.png)

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](http://Render.com).

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

 ![Screen Shot 2023-02-01 at 8.56.48 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/f/2fc81148d4fac86445d0d8878d8794e95e94726d.png)

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](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:

```bash
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

```

_ℹ **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](http://Render.com).

 ![Screen Shot 2023-02-01 at 8.58.00 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/2/a2fec2826a73e6410d9b5ea41cbc14e1a2b322d5.png)

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:

 ![Screen Shot 2023-02-01 at 8.58.59 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/f/9/f96fc9fe9e54bc8a20784c772a6aa7ba8fcefb21.png)

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

 ![Screen Shot 2023-02-01 at 9.04.40 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/4/844e0ed69368b061edb5495da0b10cd4c38dfadb.png)

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

 ![Screen Shot 2023-02-01 at 9.06.45 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/5/e58ec2157c01f8a275c24c7d81806ec5bd0fa46e.png)

## Installation

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

```bash
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](https://github.com/andrew-hossack/dash-tools/pull/102) if you’re interested. Thanks for reading! ✌

---

<div class="post-metadata">

**Author:** ![andrew-hossack](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@andrew-hossack](https://community.plotly.com/u/andrew-hossack)\
**Post date:** [February 2, 2023, 4:08am UTC](https://community.plotly.com/t/all-in-one-plotly-dash-app-builder-web-deployment-dashboard/72216/2 "2023-02-02T04:08:26Z")

</div>

I have a medium post up [Create and Deploy Plotly Dash Apps to the Internet for Free | by Andrew Hossack | Feb, 2023 | Medium](https://medium.com/@ahossack07/create-and-deploy-plotly-dash-apps-to-the-internet-for-free-49ebca9633da) is anyone wants to share 🙂

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 2, 2023, 2:22pm UTC](https://community.plotly.com/t/all-in-one-plotly-dash-app-builder-web-deployment-dashboard/72216/3 "2023-02-02T14:22:22Z")

</div>

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

---

<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:** [February 2, 2023, 2:48pm UTC](https://community.plotly.com/t/all-in-one-plotly-dash-app-builder-web-deployment-dashboard/72216/4 "2023-02-02T14:48:25Z")

</div>

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

 ![image1](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/9/29b26bbb8d293185c14ab5810b409c2c6b121d0b.png)

---

<div class="post-metadata">

**Author:** ![andrew-hossack](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@andrew-hossack](https://community.plotly.com/u/andrew-hossack)\
**Post date:** [February 2, 2023, 3:05pm UTC](https://community.plotly.com/t/all-in-one-plotly-dash-app-builder-web-deployment-dashboard/72216/5 "2023-02-02T15:05:44Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![andrew-hossack](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@andrew-hossack](https://community.plotly.com/u/andrew-hossack)\
**Post date:** [October 17, 2023, 6:17am UTC](https://community.plotly.com/t/all-in-one-plotly-dash-app-builder-web-deployment-dashboard/72216/6 "2023-10-17T06:17:11Z")

</div>

**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](https://github.com/andrew-hossack/dash-tools)