How to Build, Deploy, & Share a Python Application in 20 minutes! (Using Shiny)
This is a quick-start guide to Shiny for Python. It's part 1 of a multi-part series. Data scientists need to quickly build web applications to create and share interactive visualizations, giving others a way to interact with data and analytics. Shiny helps you do this. In this video, we'll walk you through the basics of setting up Shiny for Python, creating your first app, and deploying it so others can use it. We'll cover: - Installing Shiny and necessary dependencies - Writing and running your first Shiny app - Basic UI and server structure - Deploying your app online - Helpful Links Shiny for Python Homepage: https://shiny.posit.co/py/ The link to the final app can be found here: https://keithgalli.shinyapps.io/final-app/ Follow along with the code examples provided in this repository: https://github.com/KeithGalli/shiny-python-projects Check out the complete documentation here: https://shiny.posit.co/py/api/express/ Stay tuned for part 2, where we'll dive deeper into advanced features and customization options. --- Video Timeline! 0:00 - Intro to Shiny & Video Overview 1:43 - Getting Started with the Shinylive Playground 2:44 - Building a custom visualization with Shinylive 5:18 - Easily sharing the code/application for a Shinylive app 6:12 - Building a Shiny Express App locally (VSCode) 9:40 - How to run app if you're not using VSCode 10:17 - Further customization of our app (adding title, using CSV data, dynamic input) 17:15 - Deploying our Shiny app to the web 21:20 - Conclusion & what's coming next in the series Video by @KeithGalli All videos in the series: Part 1 - How to Build, Deploy, & Share a Python Application in 20 minutes! (Using Shiny): https://www.youtube.com/watch?v=I2W7i7QyJPI&t=0s Part 2 - How to make Interactive Python Dashboards! (Reactivity in Shiny): https://www.youtube.com/watch?v=SLkA-Z8HTAE&t=0s Part 3 - How to make your Python Dashboard look Professional! (Layouts in Shiny): https://www.youtube.com/watch?v=jemk7DoN4qk&t=0s Part 4 - How to combine Matplotlib, Plotly, Seaborn, & more in a single Python Dashboard! (Shiny for Python): https://youtu.be/xDgO5hB4-VU?si=kk20yhdpsBqkMYcC Part 5 - How to Perfect Your Python Dashboard with Advanced Styling! (HTML/CSS - Shiny for Python): https://youtu.be/uYZUS-eFbqw
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hey what's up everyone my name is Keith Gally and in this video we're going to see how we can build, share, and deploy a Shiny for Python application within 20 minutes.
So if you're not familiar with Shiny for Python it is a framework that allows us to build web applications in Python that are just very easy to spin up, they're efficient, and they really allow us to build everything from the simplest dashboard to full-fledged complex web apps. To get started I recommend checking out the link in the description which will bring you to this home page that you see here. One thing that I think is worth just mentioning real quick is that there's this gallery that has all sorts of different projects that you can build in Shiny.
A common project you might want to build is a dashboard so here we see a restaurant tipping dashboard. It's interactive, I can toggle these different things, I can uncheck dinner, and we can see how everything changes. We can also build even more complex things such as this super zip explorer that looks at all the zip codes in the United States and it kind of ranks them and evaluates them on these different criteria that you see over here on the right side. So if I zoom in the area kind of updates and we can see that like if I wanted to let's say zoom in on this area of Philadelphia I can see these different zip codes and then I can even go into this data explorer and kind of evaluate them a little bit more I guess concretely.
In this video series we're going to specifically be working on building a dashboard that looks kind of like this. It's going to be on sales data but we'll focus on something very simple for this first video just to get started.
Exploring the Shiny playground
On this same home page there's another area you can go to which is playground where we can start seeing code samples and actually really getting started super quickly. So go to the playground again links are in the description and the first thing we see is just like a toggle bar here that is using Shiny. As we see as we update this toggle we see that it is doing n times two so 52 104. It's interactive, cool.
You probably want to do something a little bit more complex than that so next we can look at like apps with plots same type of you know scroll bar or what do you call this toggle bar input slider I guess we'll use the actual name and we can see that the graph updates and as you go down you can get into very complex things like even building a wordle app via Shiny. Really cool stuff I recommend exploring these different apps that you can use you can use Plotly, Altair, any of your favorite Python graphing libraries but we'll start with this app with a plot.
This is cool but it's just random data so kind of a starting point that I recommend is using this playground and actually building something that might be meaningful to you. Also linked in the description is a GitHub repo and in that repo we can access some just simple CSV data so this is students and it's some test scores on a random exam so one way that I might spin up a Shiny app really quickly is I might take this data so I'll call this testscores.csv I'll paste it in and you can you know add files right here in this little playground area I'll save that and then I can actually reference that data by doing something like df equals let's do a couple things we're going to want to import pandas probably import pandas as pd we'll probably want to be able to access this easier using the pathlib so pathlib import path and I can access this file by doing file path equals path file so this is the file we're currently editing dot parent so it's the parent directory and then I can simply do testscores.csv and then I can load this file in with pandas by doing pd.read.csv file path and then instead of this histogram here we can very easily have our data be set to test scores equals df and then if we looked at that column was score df score maybe we do even dot values pass in the test scores and we're going to just rerun this application oh sorry kind of a special syntax here testscores.csv and we can see that this is a the data from our test scores and we can toggle the number of bins in our histogram very easily you can see it kind of is a normalish distribution around I would say 80 probably get a little bit more granularity there with some people performing really well and then as we zoom out some people performing very much not as well.
Sharing via the playground URL
One really cool thing we can do here with Shiny is we can share this actual editor here in this application so I'm going to share the application url I'll open up a new tab paste that in and in this url actually everything that we have saved is already encoded so you can just share this link that's the easiest way to share a Shiny application quickly you could also have share the actual editor url one one caveat here is I would just be careful to share anything that's like sensitive data there was no actual names or anything involved in this test scores data frame so I'm fine sharing it it'd probably be fine for a teacher to share it as long as it's been anonymized but just kind of things to think about when you're sharing a link that has all your kind of code right there in the url.
a link that has all your kind of code right there in the url.
Setting up locally
Cool that's a great starting point next let's build something a little bit more I guess robust and or work our way up to something more robust github link is in the description we're going to take this repo we're going to clone it locally so go ahead and open up a terminal window I'm going to go into my code directory and we can get this code locally by doing something like git clone and then pasting in that link I already have this locally so I'm going to skip this step but we then would have a shiny python projects file here and my next step recommendation is to create a virtual python environment to get all the dependencies you need to run shiny locally so to do that I'm going to do I'm going to run this command which will create a virtual environment called shiny in my ends folder and then I can activate that by doing source ends shiny bin activate.
If you don't understand what I'm doing here with this virtual environment don't worry too too much about it a lot of these steps will work without necessarily doing this it's just good practice to have a virtual environment like this and then finally in this repo there is a requirements.txt file so to get all of the python dependencies we're going to want to do a pip3 or pip depending on what version you have install dash r requirements.txt and that should install everything in our virtual environment. If you're curious what was in that requirements.txt it's just the python libraries that we'll need for these tutorials in this series you can add more as you see fit the important ones really are shiny and shiny widgets I would say those are the most important and maybe actually any widget as well.
Cool we have that next use your code editor of choice I personally like to use visual studio code so I'm going to go ahead and open up visual studio code and open up this repo within my visual studio code so open it's in code shiny python projects go ahead and open that and we're going to go into this sales folder I'm going to create a new file there and we'll call it app.py. Okay if you're using visual studio code there's a couple things I recommend if you do command shift p if you're on a mac you can select your interpreter and you can select that shiny virtual environment we just set up and also the best way to run shiny apps locally with visual studio code is to go ahead and go to the extensions and look up shiny go ahead and install this.
Building the app
Finally we can go back to our app and really a good starting point is just to go ahead and copy that code that we saw in the shiny examples maybe we'll do something a little bit different maybe let's do like a plotly plot here we have some plotly graphs I'm going to go ahead and copy this code I'm going to paste it into my app and a great check is does this work we should be able to run this right away and it should work so we can click the once you have the extension installed you can click this button here and we see that the application does work cool and this fillable option lets it kind of extend to fill the screen.
If you're not using visual studio code there's other ways to run this you can go ahead and do the following from your command line so we are in the sales folder and we can run something like shiny run dash just reload launch browser our app is we're in the app directory so we can just do app.py and we can go ahead and run this I got this command from the shiny docs which are also linked in the description and as you can see it popped up on my other monitor but we have our little interactive plotly graph here running.
But let's make this a little bit more custom to us let's add some you know extra features whatnot so let's look at the docs and we're using shiny express specifically so shiny express python I recommend going to components we can see all these different things we can use you also might want to check out like layouts a lot of interesting things here and templates also have a lot of cool stuff that you can do and kind of get off the ground running with and if you click on these I'll show you exactly how to do it but we'll specifically look at our reference we can start by actually filling in a title that's more applicable so we can say sales dashboard video one of five save that.
Another thing we'll probably want to do is edit our tab here what shows up if you launch this in the browser so we might have that be the same thing I recommend going to the documentation to you know see this type of stuff so looking at the documentation for the page ops that we're playing with we see that the title here and we also by doing that it defaults the window title which is this little tab thing we're seeing here to whatever the title is so I'm happy with that.
Within our app let's maybe add you know let's make this custom to our data so a good starting point with our data is we can go to the examples we can see someone read a csv let's just copy this you can look at this code as you see fit but we're going to paste this in now we have our data frame and we need to import some libraries and make some fixes so import pandas as pd we're going to need to import reactive specifically so maybe we just copy in what imports they had there too and then let's just clean this up so delete this add this move this to the top doesn't really matter where this is positioned and this is duplicate right I guess we might want to have render cool.
And let's make a custom graph that's specific to our sales data so this should be data sales csv this would be pd.read csv and finally we can make something a little bit different here so how would we do df equals the data our sales data and we'll set this to df we don't want a histogram let's do a bar chart x will be the look at our sales data product and the y data will be the number sold so we'll probably have to do some processing on this we'll do df dot group by product dot count a good starting point is to render a data frame see what's in our data frame and maybe we just group by the product and we aggregate the quantity ordered so we get let's make a graph of the most popular products so group by product get the quantity ordered and we're going to get could do the count we could also do n largest just take five let's say that'll be our new top sales we'll call this and then finally this will be top sales product and we might have to reset the index y will be quantity ordered and let's see what this gives us comment out this data frame for now notice i missed something small here i actually wanted to sum the quantity ordered and then take the five largest this should update my chart that's what i'm expecting cool.
And then i think as a last thing that we might want to just see real quick i could very easily add some sort of input slider or input numeric how about let's do how about let's do call this n label it number of items we'll give it a default value of five but we'll say the range can be from 1 to 20 and one thing that's cool that you can do with shiny is that i can immediately we'll see that this should pop up i'll do min equals zero max equals 20 we can increase this number and then finally one thing that's cool is that we could replace this five with the value and we grab the value by doing input that we input it here and then this is the variable name so in this case it's n so input dot n will then allow us to showcase a specific number of items in our chart and as we can see as i increase this we see more and more items.
Deploying to shinyapps.io
Cool so that's a basic app that was built using Shiny for Python so now next step finally is how could we deploy this to have a link that anyone could access. Quick side note the best way to deploy will depend on your shiny app and who you want to share it with for example if data security and authentication are top of mind for you or you work in a larger organization you might want to consider some of the professional posit options such as posit connect that can be found under self-hosted deployments. Alternatively if you're just getting started and building a small public shiny app shinylive or shinyapps.io are great options you can find all the information under the deploy button here on the home page.
For now we're going to go to shinyapps.io and deploy there you'll want to log in create an account if you don't have one sign up with google quick so i'm creating an account on shinyapps.io maybe we'll call this like keith shiny i already have an account so this is kind of just to show you the process you'll follow follow these steps so you want to set up rs connect on your account so you want to set up rs connect on your account and we probably want to start with python install this that should be included in the pip the requirements.txt you want to add this once you've done that and then you can deploy using this command again i already have an account that's separate from this one so i'll be using that for the purpose of this i just want to show you those steps.
So we can go ahead we're in our sales folder we have our app.py i'm going to paste in that command we just saw it will know to find the app so i'm going to just do dot slash because we're already in that folder the name it's actually my account is keith galley and then we give this a title the title we'll say is sales video one if i run this command we see that it is building installing files we also see that we got this warning about the requirements.txt file not being in that repo so it actually might be the best play to have this requirements.txt and actually put it directly in the sales folder and just have a requirements.txt in each of the projects that we're building minute detail but installing files installing files basically the requirements.txt lets us deploy this and lets shiny know what our requirements are when we deploy this to the cloud.
And if we go to that shiny apps shinyapps.io to our account we'll see that this new application that we just built is being deployed oh no i think it got annoyed because of not having the requirements.txt so i'm going to try this one more time you're allowed five free applications and then you can upgrade your account to always access more applications so let's try that command so let's try that command again and we now have our requirements.txt in that repo and we can see that it's now deploying it's gone through the necessary installation steps and it is deploying our instance and look at that we now have our sales dashboard right here online you can share this link you can edit this ready to go.
look at that we now have our sales dashboard right here online you can share this link you can edit this ready to go.
So hey we built this application we shared it both with the url using that student test score data and then we also saw how we can actually deploy this to a web url with our more sophisticated sales dashboard. Starting in the next videos in the series we will build off of this we will really drill into this reactive components and what we can do with these reactive components we'll see how we can stylize our dashboards to make them way more interesting and way more pretty and we'll work on some other features seeing how we can combine many different types of plots many different types of visuals to make this a really impressive looking application. Hope you enjoyed this video if you did make sure to throw this video a thumbs up subscribe if you haven't the next video in this series will be up in the next two weeks.
