My Workflow for Building any Streamlit Dashboard Project

[@andfanilo]

Still taking questions for my 5k AMA :) andfaniloama.streamlit.app/

[@RoryDavidWatts]

This was unexpectedly entertaining. Great job Fanilo, thank you.

[@andfanilo]

Thank you for the support 🙂 looking forward to your apps!

[@CodingIsFun]

Very cool looking dashboard, Fanilo! *Great job!* 🎉

[@andfanilo]

Thanks a lot 🙂 I kinda had fun solving this ahah

[@vasconcellossilva5867]

Man, you are amazing! Thank you very much for the guide, it was pretty useful and the video flows so nicely cause of the editing and the way you speak that learning from it was just smooth

[@andfanilo]

Thanks for the feedback, it's really appreciated 🥹 I'll keep doing more, so hope to see you around!

[@chrishobley4455]

You can change the playback speed to 0.75 by clicking on the settings

[@pedroluisalcazar9285]

Soooooo goood, loved your video. Please keep going, you are doing an amazing job!

[@andfanilo]

@@pedroluisalcazar9285 if you keep watching the next videos I’ll keep going 😁 thanks for the support!

[@JohnoScott]

Wow this video is excellent. Great pace focusing on a real and complex use case

[@andfanilo]

Ph wow thank you for the kind words, very appreciated 🙂

[@deldridg]

Love your work mate. Great demo and I'm going to give this one a crack. I'll also do some fiddling around to see how I can integrate this into a Django app. I'll also see if I can go really smart and generate dashboards dynamically according to the types of data being fed into the monster. Awesome and cheers from Sydney - Dave

[@andfanilo]

Hey, thank you for the support and for watching 😊 I'm very grateful! I'm pretty sure you've got more than enough flexibility to generate those dashboards in a Django app, looking forward to your final result! I need to relearn Django one day ahah, especially since I discovered the existence of JinjaX... Have a nice day Dave! Fanilo (who has a fond memory of being called by "Hey mate!" for 6 months in Brisbane 😂)

[@christellecornu1039]

Really great video 😊. (just specify pip install pandas==2.0.3 for the moment)

[@soundbeans]

Do you have any idea how i could host a dashboard like this internally in work for colleagues to use? All tutorials show how to deploy it to external hosts but i dont want to deal with that security headache.

[@bartgerritsen11199]

Thats simple! Ask ur IT department to host a server. Then, create a .bat file that runs the streamlit run command in the terminal. Lastly, create a .vbs file that runs the .bat headless. Run the .vbs file. This way, a server is running the streamlit application on the network it is connected on. The webapp can be accessed via the IP provided by the terminal. Happy Streamlit-ing😄

[@soundbeans]

@@bartgerritsen11199 Ok thanks. I hope IT will understand your instructions because I don't haha.. Also one more thing - Can I host multiple apps on that same server?

[@bartgerritsen11199]

@@soundbeans Yes. However, a streamlit app may consume a lot of memory if it is not coded efficiently, so this is something you should consider before deploying the apps. What i usually do is deploying 1 app with multiple pages. Then i’ll add authentication to each page. This works well for me.

[@andfanilo]

Thanks for chiming in Bart! I will just add some worst-case scenarios I have encountered with IT policies: - they may have corporate firewall rules that block ports like Streamlit's 8501, you may have to ask to open them for internal usage or configure your Streamlit app to use port 80 instead - some prevent hosted servers from having access to the Internet, so you wouldn't be able to pip install anything. You'll have to ask for limited Internet access through a corporate proxy, they should know what to do. - this one is extreme and I would advise not to bring it out yourself ahah...hopefully they don't ask you to audit the Python packages and then host them on an internal Pypi so that you can only pip install audited packages instead of installing from the Internet, I have seen this on very sensitive projects and I hope it doesn't happen to you because that's a painful tricky security measure to abide to =) Generally it's just a long conversation to have with IT but as long as you tell them Streamlit is a long-running Python webserver (in Tornado) to which you want your colleagues to access to through an IP, or it in another company webpage, they should be able to guide you.

[@GeekendZone]

Awesome video.

[@andfanilo]

Thanks for the support, look forward to the next one!

[@bedboiko]

Wow, so many solutions in this video!

[@andfanilo]

😆 I admit this is jam-packed with small nuggets ahah, I could probably make a 2h course out of it 🫠

[@letuan930]

Great tutorial and sharing. I like your style of sharing alot

[@andfanilo]

Thank you, it means a lot to me 🥹 I'll keep finetuning my style over the coming months so I hope to keep seeing you around

[@eduedu7199]

Thanks for your educational video, very well done!

[@andfanilo]

Thanks for watching, hope to see you around again :)

[@PepBytes]

Hi Fanilo, very cool stuff! How do you share your apps with your colleagues? I’m trying to create streamlit apps for my colleagues but we haven’t found an optimal way to share our apps with others so far

[@andfanilo]

Thanks for the support :) I don't have a single solution, deployment I find is a case by case scenario depending on what your IT department authorizes: - Can you build/deploy a Docker container in a hosted internal PaaS/IaaS environment? That would be the easiest way. If there is an internal Docker registry, your colleagues may even be able to pull your Docker image to run locally instead of connecting to your deployed instance. - Otherwise, you can ask for a small dedicated server with Python installed and host your scripts there. The only problems you may encounter are whether this server has access to the Internet for a limited time to pip install the packages (some companies may ask for a full audit of those packages and then a copy of those to an internal Pypi, another question to ask), and eventual corporate firewall blocking Streamlit ports for your colleagues trying to connect to the server's IP, that would be conversations to have with IT. Streamlit is "just" a long-running Tornado webserver, IT may have procedures to operate those (and maybe they even have load-balancer / reverse proxy recommendations in front of the Streamlit Tornado webserver for authentication github.com/andfanilo/streamlit-nginx-basicauth and caching www.tornadoweb.org/en/stable/guide/running.html#running-behind-a-load-balancer . I prefer that to managing authentication yourself at Streamlit level using a component like Streamlit-Authenticator, though you can do that for smaller-scale projects) - I do have a video for using stlite to build an executable from a Streamlit app, but it still comes with a lot of constraints like no access to filesystem or not all Python dependencies being Pyodide-ready...I personally think of it as a last-resort solution. If your company has a hosted Gitlab, you may even use stlite to host a small Streamlit app in a Gitlab pages website ahah - If nothing internal works, Streamlit Cloud or Huggingface Spaces to show it works and then long internal discussions 🙃 In my company, for some projects I have access to a small server and IT policies decide who has access to the IP of the server to connect to the Streamlit app. But it's not always the case...on some projects we can't have a server to share and I put instructions to my colleagues on installing Python/Conda/Streamlit to run the app on their workstations 🥲 which can be a pain Hope it helps brainstorm solutions for you

[@JohnMitchellCalif]

very clear and engaging! Subscribed.

[@andfanilo]

Welcome aboard! Thanks for the support, very appreciated :D

[@mytube1000javed]

Thanks for such a great video. How to hide code from user of the app?

[@robieism]

Thank you Fanilo!

[@andfanilo]

Thanks for watching, hope to see you on the next one :)

[@molinodeviento8598]

I understand nothing but it is so interesting!😃

[@andfanilo]

Thanks for watching for the entertainment then 😁 how did you end up watching this I wonder??

[@molinodeviento8598]

@@andfanilo I am learning python, but I am at "scissors rock paper" code stage of learning 🤣 However, I hope in the future I will be able to prepare KPI dashboards with python just like you. Keep up the great job. Your new subscriber.

[@fenixchow1]

Thank you very much, as always!

[@andfanilo]

Thanks again for the support :D see you around!

[@escoladetecnologia]

Daria para carregar o arquivo Excel no próprio dashboard e no código o Pandas AI ? Valeu 👍

[@johnh6498]

I seem to get 2 clickable icons at the top-right of the gauge. 1 is a camera icon and other is a chart icon. How can I get rid of them? some browsers always show and some only when you hover over. I tried hovermode=False on layout_update but no joy. thoughts?

[@andfanilo]

Hey! From memory if I understood correctly (can't test right now) it should be a config to add to the plotly Figure call, like in plotly.com/python/configuration-options/#preventing-the-modebar-from-appearing LMK if it works

[@johnh6498]

@@andfanilo thanks. close. I am using st.plotly_chart (as shown in your video) and not figure.show (used in the link above). so not sure how to define and pass the conf to a function. maybe a newbie question.

[@andfanilo]

Oh yeah, st.plotly_chart has a **kwargs argument, which means any keyword argument is passed by streamlit into figure.show, so you can add config=config to the st.plotly_chart call too ``` config = {'displayModeBar': False } st.plotly_chart(fig, config=config) ```

[@johnh6498]

@@andfanilothat worked great! Thanks. is there a list of other config parameters I can use/set? the gauges seem to have a big white space below the gauge. is this a st.column or st.container or a st.plotly thing? I tried looking at height with no luck. thoughts? thanks again!

[@changjunlee2759]

Very nice. but your code have some trouble with my environment. "ModuleNotFoundError: No module named 'duckdb'". Surely, I have install duckdb as 'pip install duckdb' and installed sucessfully. Show me how fix the problem...Thank you...

[@changjunlee2759]

I solved the problem. Thank you...^^

[@andfanilo]

Nice! What was the issue?

[@fabianpetersen2452]

Im a frontend dev and learning python, i started using streamlit to create a dashboard and was thinking, how can customise the dash using grid 😅

[@andfanilo]

Hey there! I'm not sure you picked the easiest Python dashboard tutorial on KZbin, there's a lot going on with Pandas / DuckDB + SQL / Plotly / Streamlit 😁. I hope you learn something useful out of it! To your question, unfortunately no, Streamlit's design system for now limits you to columns and nested columns with gap/alignment arguments: docs.streamlit.io/develop/api-reference/layout/st.columns . So with Streamlit you're doing horizontal flexbox for now. Though there is a 3rd party component from the dev team you could try: arnaudmiribel.github.io/streamlit-extras/extras/grid/ . And some components get picked from this library to go into Streamlit if they see a lot of usage, so maybe you'll help push a future native grid integration by using this --- Even if there's no grid, I still think it's good to learn Python using Streamlit because of the ultra fast feedback loop =) When you feel ready with your Python skills, you could try building a Flask/FastAPI API that returns frontend code and communicates with your Python API. You could also try FastHTML fastht.ml/ by Jeremy Howard, a very well known Python figure, the project is still very young but it's Python mixed with HTMX, maybe you'll like it :) Finally, if you played with Next.js, Reflex may be the closest Python alternative I tried: reflex.dev/ That's it by level of complexity. Good luck on the journey!

[@couragetheman4598]

Great video!!! what extension are you using to make your local host show in vs code?

[@andfanilo]

Thank you for the support :D Ah, actually my localhost is not embedded in VSCode, they are put side-by-side but I also configured VSCode so that the top bar matches the top bar height of the Streamlit app 🙂 it's a neat trick eheh (it's this config: gist.github.com/andfanilo/ae99aed9c454a46c1dbfe6a0b9fa0012 )

[@datadiego]

thx. do you have a best initial virtual env for streamlit ? please create a video for setup with poetry

[@andfanilo]

I'm usually running a conda environments per Streamlit project (docs.streamlit.io/get-started/installation/anaconda-distribution but using Anaconda prompt command line). docs.streamlit.io/get-started/installation/command-line should be helpful too I've heard good things about poetry and hatch, will add to my list of things to maybe make a video about one day, thanks for sharing!

[@AndyTutify]

I am a big fan of your st_echarts component, but you usually prefer plotly?

[@andfanilo]

Hello! Yeah, I'm just more used to Plotly so I naturally go for it when I'm in a rush 😅 maybe when I have more time for a project I'd give ECharts a go

[@greenberetg.b6793]

hi ! i have a question, have you ever taught at Supinfo school in Lyon ?

[@andfanilo]

I did for 3 years a long time ago yes 😬 but I don't plan to go back there now

[@greenberetg.b6793]

@@andfanilo i know you. I was your student xd your face looked very familiar, then i listened to your voice and noticed your accent then i saw in your profile France. I thought that's him for sure. Very impressive and high quality videos you're making. Keep it up.

[@andfanilo]

@@greenberetg.b6793 Damn the world sure is small XD Thanks for the support, hopefully more interesting than me struggling with the supinfo slides ^^ Have a nice day!

[@kisho2679]

how could MathJax be integrated into Python by using streamlit to display LaTex as mathematical expressions in a web application?

[@andfanilo]

I don't know a lot of MathJax. Have you tried docs.streamlit.io/library/api-reference/text/st.latex ? Or Markdown with LaTeX expressions, by wrapping them in "$" or "$$" (the "$$" must be on their own lines). I thought most basic features of MathJax worked in there, but maybe for the more complex ones you'll have to use components.html docs.streamlit.io/library/components/components-api#stcomponentsv1html , inject the mathjax and use it in the same block (the following is not tested, it's just a draft I expect to be a good starting point) ``` components.html(f''' mathjax code... ''') ```

[@rockNbrain]

Great job dude 🎉

[@andfanilo]

Thanks for the support, very grateful 😁

[@kevinoudelet]

Thank you so much !

[@andfanilo]

Thank you for watching, see you on the next one!

[@aidenstyle8604]

Thank You, Brah!

[@andfanilo]

Thanks for watching, hope you'll be around for the next one :)

[@maloukemallouke9735]

Excellent i love it.

[@andfanilo]

Thanks for watching! If didn’t yet, check out my latest video too, it is another way of doing Google sheets Streamlit dashboard but in the same video style 😁

[@arithmetique1]

well done ! one question : is it possible to reproduce the frames arround every chart of the original dashboard and center the charts in a way they look very well positioned like the original ones with streamlit/plotly ?

[@andfanilo]

Hey! Hmmm I haven't tried, but I'd say, with some crazy CSS Markdown trick maybe (look through my CSS and IFrame hack videos)...unfortunately I tried using the CSS at local Plotly level and it didn't seem to work :/ you really need to style the div container of the Plotly graph, not the plotly graph itself Honestly, if you're looking to do an exact replica, a more flexible library like NiceGUI/Dash or going FastAPI+Plotly.js+a CSS framework would be way easier IMO. That's another video I'd like to make one day, not being scared to go from Streamlit to a JS/CSS framework Have a nice day!

[@SophiaYangDS]

Great video 🙌

[@andfanilo]

Thank you :D I guess I have to plan a Panel version of this video one day 😁

[@SophiaYangDS]

Yes pls @@andfanilo

[@ramizali7731]

Great video!

[@andfanilo]

Thanks for the support 🤗 hope to see you on the next one!

[@mzeeshans58]

Whoa...those 9 minutes are heaviour than 10 hours lecture...

[@shopzyte]

can you please tell me what a sample xlsx looks like with a link to it?

[@andfanilo]

Sorry, I forgot to include it 😅 as soon as my internet comes back I’ll push the file on the GitHub link in the description! EDIT: sample data was pushed to Github repo: github.com/andfanilo/social-media-tutorials/tree/master/20230816-stdashboard

[@shopzyte]

@@andfanilo thank you so much!

[@odessasingh4771]

You are a god

[@andfanilo]

Thanks for watching :) see you on the next video!

[@kage2g]

Awesome

[@andfanilo]

Thanks for watching, hope to keep seeing you around :)

[@ularkadutdotnet]

Nice

[@andfanilo]

Thanks for watching :)

[@habimanajeandedieu1370]

I love you

[@abdulazizarrantisi6190]

can you hosting it

[@andfanilo]

Could try on streamlit.io/cloud

[@laurendc8696]

All I heard were animals like penguins and pandas... (Joke aside, as a very interested newbie, I love your videos)

[@andfanilo]

Ahahah yeah welcome to the Python Zoo 😁 hope you have fun!

[@danielbartley516]

Your editing is too fast and not enough pauses. Your words may be informative but it’s too dense for me to absorb without effort to undo that editing on my side.

[@andfanilo]

Hello, thanks for the feedback. You can still go grab the source code if you want, or you’ll find other good tutorials on KZbin that are slower paced (45mn-1h) with no editing that may fit your learning style better Have a nice day!

[@JohnoScott]

Disagree. The pace is excellent covering the right topics at the right moment. I am very impressed

[@falkez1514]

I feel that too but i mostly binge watch Fanilo for information and ideas, when I find something interesting, I deep dive into it. I'm pretty sure Fanilo does this on purpose to keep the video lenght reasonable

[@pixaim69]

Just change the play back speed.

[@kzalesak4]

Speed: 0.75

[@shopzyte]

BinderException: Binder Error: Referenced column "Year" not found in FROM clause! Candidate bindings: "df.YEAR_ID"