[new] Share your Dash App with Others on the Web - Render

In this video I'll show you the easiest and fastest way to deploy your app to the web, using Dash Tools by Andrew, a Plotly community member.
Join the Community:
charming-data....
The Code:
github.com/Cod...
The app:
dot-offering-s...
Render for Deployment:
render.com/
Dash Tools:
pypi.org/proje...
Plotly Dash Forum:
community.plot...
The Book of Dash:
nostarch.com/b...
************************************************************************
👉 Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:
Patreon: / charmingdata
GitHub: github.com/spo...
KZbin: / @charmingdata

[@CharmingData]

Join the Charming Data Community -- charming-data.com/ -- to learn more data viz, data apps, and AI integrations.

[@frankfnl]

Thanks Adam! This worked like a charm. Cannot believe how much I've used your videos over the past few years,

[@bryantai5667]

Extremely informative video on how to deploy and update the web app. Clear and concise. Thanks!

[@thomashouweling6450]

Great video! Thank you so much for the clear explanation! I come from data science and my knowledge of programming is suboptimal at best. Deploying dashboard apps has always been my nightmare and I was struggling getting my latest app to run due to an endless series of package incompatibility issues. Dashtools and your video allowed me solve the issue instantly and effortlessly. Thank you so much! I hope you'll keep up the amazing content!

[@CharmingData]

you're welcome Thomas. I'm glad the video was helpful. Just be mindful of Dashtools. I'm not sure how often it's been maintained. The last update was from October. Hopefully, it continues working for many years, but keep an eye out. I just created another video showing how to upload an app to the web with Render. This one is without Dashtools in case you ever need it: kzbin.info/www/bejne/p2nIc4GCmJVobcU

[@shoemakerleve9]

Thanks for the video Adam! I had fun working on this project and am looking forward to hearing feedback from the community.

[@OsvaldoPereira-tj8tp]

Thanks for the tutorial! Woked like a charm for a heavy dash app with maps and charts!

[@MahadiHasan-qi1cb]

I was about to request you to post a video like this one! but you already did. wonderful. you're the best Adam.

[@zulfiiaditto4026]

I am so happy to see your videos :) I learned so much, thanks to you and your channel :) After one year of break, I decided to return and master my viz skills! Thank you for keep doing it!

[@CharmingData]

That's great news, @zulfiiaditto4026. Welcome back. Have you built anything with Dash yet?

[@phillipnorris627]

Thanks for an awesome series of videos. Along with your book, which I started with, they have been so helpful.

[@CharmingData]

Thank you Phillip

[@mbj896]

I rely on these types of tutorials to fill in the gaps between written documentation and actual deployment, and your tutorials are very good! It would also be very interesting if you could put up a tutorial for deploying a Dash app to a WordPress site, given that that is such a common platform for websites.

[@CharmingData]

Thank you for the suggestion :)

[@FrancescoDiCursi]

Your Dash tutorials are gold, thanks for all these infos!

[@CharmingData]

You're welcome.. thanks for watching

[@ivanliu1173]

Hi Adam, Thanks for this informative video. I can use render now in place of heroku. With your clear explanation, I could deploy my app easily. Thank you very much.🙂

[@CharmingData]

You're welcome. I'm glad it was helpful.

[@rubyhu3139]

Thanks for introducing Render, has been very helpful! However, I think you left out an important part which is to choose the server region. Mine was stuck at deploying for more than an hour (and still running as I wrote this comment...) if done through dash tools, but I restarted another deploy directly on Render's website and chose the correct region (in my case, Singapore), and it was up and running within 5 mins. For dash tools the default region seems to be Oregon so anyone outside US West might face the same problem as I did.

[@CharmingData]

Thank you. I just pinned a comment about this.

[@cancella]

Flawless. Easiest deployment tutorial🙌🙌

[@yenhunglin2387]

Great tutorial and instructor. Thank you for sharing🎉

[@CharmingData]

Thank you for watching

[@saraili3971]

Thank you Adam. It' s so updated and helpful.

[@bukunmiadebanjo9684]

Wish I could give this multiple likes. Thank you!!

[@AAStories.]

thank u man, for real

[@giolendius]

I love you!

[@TalesIncs]

Thank you again!

[@exlonkgil6465]

I love your videos, maybe some day you can do a video about the jsme tool to draw molecules in dash,. Thanks for all !!

[@omrahulpandey]

Nice tutorial, very useful. It would be very interesting if you could put up a tutorials for: 1. Embedding the plotly dashboards on webpages/websites like the ones we see on news portals during elections. 2. Also which camera and tools are you using for the video😄.

[@CharmingData]

Hi, thanks for the suggestion. What do you mean embed dashboards on webpages? Dash app is a web page. I use Logitech camera and filmora video editing

[@armandogonzalez4404]

​@@CharmingData I think he means cssing the webpage so that the visual display is nice ^^ with its html code, its graphs and everything :)

[@MrAfrokiss]

Thanks for this vidéo. Merci beaucoup!!!👍

[@PedroSouza-fj2fo]

It would be nice to make a tutorial for deploying a dash app to a local server.

[@hasankamkar8331]

Hello Thanks for the great video. I just have a question about the folder structures when we have multiple .py files + .csv files + .css files and .png files in out application. In the video you mentioned that the main app.py file should be located in the src folder, but where do we need to put the rest of files that have been used in the dash app? Thank you so much in advance for answering my question.

[@CharmingData]

hi Hasan, Here's a great post about structuring a Dash app. community.plotly.com/t/structuring-a-large-dash-application-best-practices-to-follow/62739

[@InteligenciadeNegocios]

Good Afternoon Adam I would love to see a video where you deploy an excel file on render. I have tried it several times without success :( Thank you for all

[@CharmingData]

hi there, to deploy an app that uses an excel file, try to organize your files this way: Root folder ----src folder -------data folder -----------the excel file -------init.py file -------app.py ----Procfile ----requirements

[@CharmingData]

Make sure you can read your excel file into a pandas dataframe before deploying. I think you need to download the openpyxl lirbrary. And include that in the requirements.txt file so that Render knows it needs to install that as well when deploying.

[@InteligenciadeNegocios]

@@CharmingData thank you Adam, i really appreciate your help! Thank you, have a nice day

[@duco14]

Thank you for your beautiful tutorial Adam! One question: is it also possible to deploy an Dash app with multiple pages using Render?

[@CharmingData]

Yes it is 🙂

[@geeksy2278]

Thank you very much! This will be super helpful! Which tool do you use to record your screen?

[@CharmingData]

I use filmora film recorder. filmora.wondershare.com/screen-recorder.html

[@andersoncanteli]

Thank you so much Sir!

[@CharmingData]

You're welcome. Thanks for watching

[@WhiteLemon_Official]

Wow great help, can i request guide for deploy in aws ec2?

[@AIdevel]

Hi brother Adam could you please make a video for us about the special features on dash such as the camera 📷 cos I need them in my computer vision projects Thanks

[@saraili3971]

Btw, it seems Deta is another alternative to Heroku. Would you be interested to check it out? The docs look a bit confusing to a beginner like me. 😄 Happy 2023!

[@CharmingData]

Thanks for sharing that with me.

[@Hybritor]

Thanks for the excellent tutorial! Everything was laid very clearly to deploy a dash application. I do have one question though: how do you obtain your DeployWithRender folder that you src/app is in? do we just make our own in our venv? thanks for any help!

[@CharmingData]

Not sure I understand the question. Is this the folder in the github repo?

[@Hybritor]

@@CharmingData @ 1:00 you mention the app.py is in the Deploy with Render Folder, my question is how do I get to that point after creating a working dash app? Thanks for the help!

[@CharmingData]

HI@@Hybritor yes, I just made that folder on my windows machine and called it DeployWithRender, then I created the src folder, and then I made the app.py file and entered the Dash code into that file.

[@petarkoljensic7823]

How could I deploy data used in the script? Making a folder 'data' and placing it in GitHub too?

[@luisguerreropenaranda3618]

I have the same issue, did you find a way to do it?

[@Idkaboutthis78]

Hi, how do I get render to recognise the "assets" folder which contains custom.css and images?

[@WayneBruton]

Nice tutorial, thank you Adam. Quick question, is render just slow or is it Dash?

[@CharmingData]

hi @WayneBruton it's render. Supposedly it speeds up with a paid tier. Dash is fast

[@WayneBruton]

@@CharmingData Thank you Adam

[@marcsand87]

Hi! Want to start by thanking you Adam for your videos, I'm also going to order your new book! :) And now to my question: Is there any way of doing this while having your GitHub repo _private_ instead of public?

[@CharmingData]

Hi @marcsand87. It appears that private repos are also possible. render.com/docs/github

[@harmalhusen6887]

I loved this tutorial, thank you so much! One question: do you know any solution for how to add a simple Login-Page for users? I wouldn't want my Dash App to be public yet. I would either like to invite people by e-mail or create a login for them.

[@CharmingData]

Adding a log in page is not a simple matter. But if you deploy your app with pythonanywhere they offer a built-in username and password for the app that you can share with your users. Only one username and password to enter the app.

[@huum4430]

Hello, I saw your video about how to add password to our dash, and the example was with heroku. How can I do the same with render?

[@CharmingData]

Please attention to the region chosen. Thank you @rubyhu3139. It's important to choose the server region. Mine was stuck at deploying for more than an hour (and still running as I wrote this comment...) if done through dash tools, but I restarted another deploy directly on Render's website and chose the correct region (in my case, Singapore), and it was up and running within 5 mins.

[@AIdevel]

Hi brother Adam could you please make a video about special features on dash such as the camera cos I need to know them so that I can develop my computer vision project using dash

[@FrancescoDiCursi]

I just had this problem: the region should be specified inside the render.yaml file (not on Render)

[@karelvandenhende6801]

@@FrancescoDiCursi How would that work specifically? I added a line with 'location: Frankfurt', but it does not seem to be the correct term. Thanks!

[@FrancescoDiCursi]

@@karelvandenhende6801 It's not 'location', it's 'region'! Modify it with 'region: frankfurt' and it sould be ok . Note, frankfurt should be with lowercase :) Let me know if it works PS. Please Adam pin this comment so it can reach many others :)

[@srinivasaprasad6003]

Hi Adam, am looking for help in deploying Python Dash application in Azure. any such video is available, please share. thanks!

[@nenlepi4888]

thanks for the great tutorial! i was successfully able to deploy my dash app, but certain features don't work properly. the hover effect on some of the visualisations (like choropleth and bar chart) do not work, and the bootstrap css styling does not load at all. how do i fix this issue?

[@CharmingData]

make sure you declare the bootstrap script inside app = Dash(__name__).

[@ferranbadia3122]

Hello, awesome content. I'm starting to learn to visulize data qith python and these videos are sooooooo helpful, thanks a milion. One question, if I have a .env file with my authenticate data which I dont wanna push to github it will be possible create a web service like that?? Thank u again

[@CharmingData]

Sure. Just write in your gitignore file the .env so it doesn't get pushed.

[@marialetiziafasci9358]

Thank you for the great video! I would like to create an app that uses my own data stored in a file. Where should I store the file?

[@CharmingData]

On a csv sheet is best

[@marialetiziafasci9358]

@@CharmingData Got my first app with my own data available online *.* Thank you so much for the great video!

[@wiztech2732]

I can not see Quick Setup in Github at 6'12. It does not come up automaticaly. How I can get those code for creating new resitory on the command line?

[@CharmingData]

hi @wiztech2732 . I don't think Dash Tools is up to date anymore. Try deploying your app to the web on render with this video tutorial: kzbin.info/www/bejne/fmKZlY2DjtKpp9Efeature=shared

[@wiztech2732]

Thanks@@CharmingData

[@WayneBruton]

@Charming Data Hi Adam, Completely off topic but I am not sure if you check out comments on some of your older posts. I have quick question on Chloropleth Maps. Is it possible to import your own topojson file into plotly say for a region not part of the standard maps in plotly. For example, say South Africa and all its provinces (States)?

[@CharmingData]

Hi @waynebruton, Yes, that should be possible. I think there are examples of that on the Plotly forum

[@farahnazjafari]

"Hi, I am looking for a video tutorial on how to deploy my Dash app privately on a section of my website's server, preferably with the option to set up a username and password. Please guide me."

[@FPLMundo]

Thanks Adam! I would love to know what you see as the pros/cons of Render vs PythonAnywhere vs Heroku from a Dash app perspective. ( My background is I previously used pythonanywhere as per your excellent video, but my new app has some Async modules which do not seem to be compatible. I signed up to Heroku but then found they do not have local storage. Maybe Render will be the one !)

[@mackas33]

Hi, I don't know if it's on my end or if the video is blurry.

[@CharmingData]

I tested it and I see it clear on my end.

[@lucaschiqui]

Hi Adam, this worked for me, but what happens if your app is going to be used by more than 100 people? Should you choose a payment subscription of Render?

[@CharmingData]

hi Lucas, yes, a payment subscription would be best. But make sure you talk to Render about scalability, especially if many people will be using the Dash app at once. For example, if 10 people are clicking the same dropdown, triggering the same callback, they would have to wait in line to gain access to the callback, depending on how many workers you have set up.

[@lucaschiqui]

@@CharmingData thanks, I'll contact to the team of render!

[@ianbenjamin1865]

PLS help, i did everything in the video and my app when i run it works but when i click the button it runs an algorithm that calculates some data then it doesn't fill the DASH table, i don't know if it's because i have 4 files in the src folder, but I don't know how to find the error, the code works fine locally

[@CharmingData]

If it runs locally but doesn't run on render, it's probably because the app on render is not able to read the files from the src folder. Can you make your app structure like this and try again? MyApp |── src | |-- app.py | └── ... └── data └── YourCsvFileName.csv

[@ianbenjamin1865]

@@CharmingData I have that structure but the same thing keeps happening to me, the app starts and it seems to work but when I start to use it it doesn't fill the tables that it has to fill. Do I have any way to see step by step what is happening in the code that does not work well in render?

[@ianbenjamin1865]

I put all the files together in one and it continues to work fine locally, but the problem is when I load it in render, it doesn't comply with the dash callbacks, it seems to me and that's why it doesn't update the table

[@CharmingData]

@@ianbenjamin1865 I think it has to do with the way that render reads data files

[@alzbetahurova5606]

Hello, is it possible to install R on render? I have rpy in my requirements (because I want to generate report in R after button is clicked) but the deploy fails on "Error: rpy2 in API mode cannot be built without R in the PATH or R_HOME defined. Correct this or force ABI mode-only by defining the environment variable RPY2_CFFI_MODE=ABI" Did anyone solved it?

[@CharmingData]

Not sure, sorry. I never tried installing R on render. I work in Python.

[@leannalo6798]

Thank you! I am following along and sucessfully pushed the files to github, but the 'Project Requirement: Pushed to GitHub' deployment requirement is not showing the green checkmark. Any thoughts as to why?

[@CharmingData]

It's hard to say. Check if you have installed latest version of dash-tools. Make sure to push your repo to github through the command line or pycharm terminal, rather than copying the files (drag and drop) directly into the repo.

[@alzbetahurova5606]

I had similar issue. Path to my project included white spaces. For me, replacing the with spaces with underscores, solved the issue. Maybe you also have whitespaces in the project path?:)

[@Sebastian-xw3zh]

Hello Adam and thank you for your videos, how can I add google analytics to my dash app? I have tried one solution that embeeds it in an html.Script inside the app.layout but it doesn´t seem to work

[@CharmingData]

Hi Sébastian, I've never done that..I'm really not sure.

[@InteligenciadeNegocios]

Good Afternoon Adam. I tried to deploy my app but i got the following error; AttributeError: 'Flask' object has no attribute 'before_first_request'. Did you mean: '_got_first_request'? Maybe you know what i missing? Thank you :)

[@CharmingData]

Hello, What if you try to install flask version 2.2.4 github.com/DataDog/dd-trace-py/issues/5671

[@InteligenciadeNegocios]

@@CharmingData thank you for your prompt response. I will try it. Thank you

[@richardkiy4048]

If I wanted to add user profiles where people can log into accounts is this only available as an enterprise feature or is there another way I could do this?

[@CharmingData]

Hey, I'm sure it's possible to figure out how to do it with open source libraries. But it's pretty complicated. Dash Enterprise offers this.

[@padula77]

Hi Adam, thanks for the video, I am unfortunatley stuck with 'git init'. can you describe the steps needed once I have installed 'Git'..what I have to do.? because now when I write 'git init' from my terminal I got an error. like the command is not reconized..

[@CharmingData]

hi Carlo, I had that happen to me once. I had to reinstall git on my computer and it worked.

[@manthanmistry1205]

Is the process same for multi page dash app deployment?

[@CharmingData]

It should be similar

[@deepkurdi]

it is great videos indeed works good. but, what if my CSV file is stored locally on desktop? i tried but got file exisit could you help? please

[@CharmingData]

@@deepkurdi can you try to upload your CSV file to GitHub and read the raw link into your app?

[@emanbap]

Hi! Thanks for the video. Do you know if you can deploy a Dash app on Wordpress? I've tried to put just a static plotly . But would it be possible to put an actual app? It would be great a tutorial about it :)

[@CharmingData]

I'm not sure..I don't think so, but if it's possible, I'll gladly make a video on it. Let me know if you find out before me 😉

[@jorisdeleeuw9665]

Hey Adam, thanks for the tutorial! I have to login when I try to create a new repository on the command line. And my login doesn't work... How come you do not have to insert your username and password when doing this?

[@CharmingData]

Are you using dash Tools and it's requiring you to log in?

[@GorostiMantxo]

Thanks for the video, was really helpful and I could deploy my app However, I'm using and upload button where the user will select the excel file to do the analysis on. For some reason I have not been able to make it work in the deployed version of the app (works fine when running local). I'm trying to load it by using the following code (from the dash web): content_type, content_string = contents.split(',') decoded = base64.b64decode(content_string) df = pd.read_excel(io.BytesIO(decoded)) and the last line seems to fail for some reason I don't comprehend. Am I missing something or why doesn't this work in the web when it works on my local computer? Thanks in advance

[@CharmingData]

hi, can you please ask this question as a new topic on the Plotly Forum and let me know when you post it. community.plotly.com/ I think there could be a few people I know there that could help you.

[@dikshitsuvarna3011]

Looking at Your few quite dash tutorials just made a Dashboard, but I am not able to share the link here.. since youtube will delete comments if I add an external website link😅

[@CharmingData]

I'd love to see your dashboard. You can send it to [e-mail]

[@christellecornu1039]

Render will, as Heroku, soon not free available. Is ther's any other solution ? Moreover how the app manage with mathplotlib ? Thanks for you videos

[@CharmingData]

I don't think that's completely accurate. I saw that render will raise their costs but they promised to keep their free tier. If you saw otherwise, can you please share the link that says they will stop offering a free tier.

[@christellecornu1039]

@@CharmingData thanks for your quick answer. It will be ok if they still have a free tier. I tried to push my app but I get this message : FileNotFoundError: [Errno 2] No such file or directory: 'data/df_clean_newport.csv' In the scr, I have a data folder with the dataset, a pages folder with the 3 pages and the app

[@WayneBruton]

@@christellecornu1039 Hi, I am getting the same error

[@WayneBruton]

I managed by connecting to the raw data on GitHub

[@kinectintell]

Hi, will this also work for multipage app and with a link to external database?

[@CharmingData]

Hi, it should

[@AIdevel]

Hi Adam does render offer this deployment service for free ?

[@CharmingData]

yes, it does.

[@celestinhakizimana3424]

Hi Adam, i tried all the steps and at the end i got message of failed to deploy. any help i got the message: Deploy failed for c29af32: add all my app files

[@shoemakerleve9]

Are you able to view the Render logs for your deploy? There might be some more information there.

[@celestinhakizimana3424]

@@shoemakerleve9 what do you mean by render logs?

[@Scadufax-d1l]

Thank you, man. Great tutorial. But does anyone in the comment section have this error on the log panel: "raise exceptions.NoLayoutException( dash.exceptions.NoLayoutException: The layout was `None` at the time that `run_server` was called. Make sure to set the `layout` attribute of your application before running the server. " ? I get this error even though I set the app.layout = html.Div(etc). I replaced the bootstrap components with plain html and css, but it still does not work :( How can I deploy it properly without this error? Thank you

[@CharmingData]

Does it tell you on what line of code the error was generated?

[@italo.buitron]

It's necessary to be public?

[@CharmingData]

I don't think so, Italo.

[@italo.buitron]

@@CharmingData I deployed my app, don't need to be public. Thx for the guide!!! Love it!

[@CharmingData]

@@italo.buitron Congratulations :)

[@johanloango7362]

Thanks a lot Adam, I have this error - FileNotFoundError: [Errno 2] No such file or directory:

[@CharmingData]

hey there, When do you get that error? Can you provide more information please.

[@LuisLopez-sc1qc]

deberian enseñar publicar en azure este dash seria genial

[@valentinteruggi4251]

Hello! I have my app.py in the following directory Project/src/app.py. I did install dashtools in the project directory (Project), however every time I want to use the dashtools command (for example, dashtools gui or run). It displays an error saying that the the command is not found (dashtools). Error: dashtools : The term 'dashtools' is not recognized as the name of a cmdlet, function, script file, or operable program. Any solution?

[@CharmingData]

Sorry, I'm not sure. Dashtools hasn't been updated by the author in a while, so there might be bugs there.

[@WayneWu-g5o]

Hello! thank you for the tutorial, I have successfully deploy my app. However, when I click the button which pulls data from pg admin (connects to google cloud postgres), it gives me the error: [2023-11-29 22:44:13 +0000] [49] [CRITICAL] WORKER TIMEOUT (pid:62) Nov 29 02:44:15 PM[2023-11-29 22:44:15 +0000] [49] [ERROR] Worker (pid:62) was sent SIGKILL! Perhaps out of memory? Nov 29 02:44:15 PM[2023-11-29 22:44:15 +0000] [63] [INFO] Booting worker with pid: 63 Could you provide osme insight onw hat this means? thank you!!

[@CharmingData]

That error could mean a few things. One option is that your calculation is taking more than 15-30 seconds, in which case Render will call a time out and de-active the app

[@WayneWu-g5o]

@@CharmingData got it. thank you so much for the help. I have increaes the time out to 1800 seconds and it worked

[@scolippi4318]

​@@WayneWu-g5oHi, seems that I have a simmiliar problem. Could you tell me where did you increase the time out? I can't find any information about this. Thanks in advance!

[@WayneWu-g5o]

@@scolippi4318 You can go to settings and use this gunicorn main:server -t [time1] --keep-alive [time2]

[@WayneWu-g5o]

@@scolippi4318 do you still need help?

[@rahulmadhusudannambiar7250]

Hi Adam, Thank you for the informative video. My question is regarding enviromnment variables. I have an api key which I am passing as an an environment variable(in the environment). Later in the source code, I call the api via os.environ.get('api-key'). Not only api key, the data from the api key is stored in to a database and the credentials to this post gres sql database is also passed via environment variable. In the data visualisation, I use sqlAlchemy as an engine to access this database. But sqlAlchemy throws an error: "sqlalchemy.exc.OperationalError: (psycopg2.OperationalError) could not translate host name "None" to address: Name or service not known" The above error tells me that the os.environ.get('api-key') is giving a none as a outout. Wondering if you or any one have come accross this error.

[@CharmingData]

Hi Rahul, no i have never came across this error. I'm not sure. Hopefully someone else here can help.

[@rahulmadhusudannambiar7250]

@@CharmingData Thank you. I tried passing these variables directly by hard coding it to the code. It works fines and gets deployed. I guess its something to do with render that is unable to access the environ variables.

[@smokinginthefishroom]

I keep getting an error of dashtools: command not found after installing dashtools after successfully installing. Can anyone help me?

[@CharmingData]

What kind of error do you get?

[@emadahmed2652]

+ dashtools gui + ~~~~~~~~~ + CategoryInfo : ObjectNotFound: (dashtools:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException I am using VS studio and it gives me that@@CharmingData