How to write and deploy a Python web app with Shiny Express and Posit Team
Winston Chang at Posit joined us to share a quicker and simpler way of writing Shiny applications in Python, called Shiny Express With Shiny Express you can create interactive data dashboards and data-driven applications faster than ever. Helpful resources: ️ Introducing Shiny Express: https://shiny.posit.co/blog/posts/shiny-express/ ️ Shinylive: https://shinylive.io/py/examples/ ️ Component Gallery: https://shiny.posit.co/py/components/ ️ VS Code Shiny extension: https://marketplace.visualstudio.com/items?itemName=Posit.shiny-python ️ Q&A recording: https://youtube.com/live/zg4LP4lkihM?feature=share rsconnect-python package: https://pypi.org/project/rsconnect-python/ ️ Follow-up links: Event Survey: https://forms.gle/8AcMAnjfPFSTQZJK6 Posit Team: https://posit.co/products/enterprise/team/ Request evaluation: pos.it/chat-with-us Posit Team demo resources: pos.it/demo-resources What will you learn? If you’re new to Shiny → you’ll get started writing and deploying your first Shiny Express application in Python. If you already know Shiny → you’ll see how Shiny Express can make your development experience quicker and more efficient. Happy with the way things are? No need to change what you’re doing! We think of Shiny Express and Shiny Core as complementary, and intend to support both syntaxes indefinitely. Last month’s Workflow with Posit Team Demo featured Shiny in R and used bslib for custom theming, which you can check out here in the recording: https://youtu.be/O6WLERr5bKU?feature=shared LIVE Q&A ROOM for ~11:30 am on Feb 28th: https://youtube.com/live/zg4LP4lkihM?feature=share There is no need to register; join us here on YouTube at the time above or you can add to your calendar using the link below: pos.it/team-demo We host these Workflow Demos on the last Wednesday of every month, so you can use the link above to add the recurring event as well. #python
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hi everyone, my name is Winston Chang and I'm a software engineer at Posit. Today I'm going to talk about Shiny Express for Python. Shiny Express is a new way of writing Shiny applications that lets you create web apps even more quickly and easily than before.
First off, let's have a quick overview of what Shiny is. Shiny is a framework for writing interactive web applications with R and more recently with Python. It's focused particularly on data-driven applications, so if you want to create a data dashboard that shows real-time data, or if you want to create a web app that lets users interact with and explore a dataset, Shiny is a great tool for doing that. And you don't need to know HTML, JavaScript, and CSS to create a powerful, attractive application with Shiny. The idea is that with Shiny, you can just do this with Python code.
For this presentation, I'm going to talk about Shiny in the context of Python, because I'm talking about Shiny Express and Shiny Express is currently just for Python. Before Shiny Express, we had Shiny, just Shiny, which we're now calling Shiny Core to help distinguish between that and Shiny Express. Shiny Express is a more concise, easier-to-use syntax for writing Shiny applications, but it's based on the same technology as Shiny Core.
We'll see how to get started with Shiny Express and create your first Shiny app, and then I'll show you how to deploy applications to Posit Connect, which is a hosting platform that runs on a server in your organization, or deploy to Shinyapps.io, which is a hosted server from Posit where you don't have to manage your own server.
Shiny app examples
All right, let's just take a look at some examples of what you can do with Shiny. So here's one that shows air pollution data at different points in time. If we go all the way back to the 90s, you can see there's just a lot more air pollution back then, and we can select different data sources. Then there's also, we can interact with the filtering here to show different ranges of years of data to show, and as we can see over time, deaths have just been decreasing air pollution.
Here's another example. It's an educational example, and it demonstrates how a parameter, adjusting a parameter can change this coefficient estimates. Change this, you can see the plot updates, and scroll down, there's some educational content here on this page, and then there's some more plots that were affected by that slider from up above.
Here's a simulation of the motion of the Earth and Moon and a hypothetical planet X. All right, so if we can adjust some of these parameters for the way that simulation works, then run the simulation, then you can see how those things move, and we can adjust the parameters here, like change the starting speed of the Earth and the direction of motion, and then rerun the simulation and see how things would be different.
And finally, here's one more. It's a data dashboard for exploring data. In this case, it's data about tips at a restaurant. So we could just look at data from lunches, data from dinners, and change the range of the restaurant bills, and we can look at this data table here and sort based on the gender of the person who paid.
Getting started with shinylive
So let's get started. To get started for learning, I suggest you use shinylive.io, which lets you run Shiny without having to install anything on your computer. So we're going to start here. This is the main Shiny website. We'll click on Shiny for Python, and then we'll click on Playground, and then this will take you to shinylive.io. Or you can just type shinylive.io in their location bar, and you'll go straight to this page.
What we have here is a very basic Shiny application. This is sort of the minimal Shiny application that will do anything in response to the user's input. So we've got a slider here, and then we've got this text here that changes in response to the slider. So n times 2 is 40, move the slider, 52, n times 2 is 104.
Great. Now let's take a look at the Python code for this. So we say up here, from Shiny Express, import some things here, and then we say UI.inputSlider, n, this is a label that tells Python how to access the value later, and capital N, that's the text label up here, and then the minimum, maximum, and the starting value. That makes the slider appear in the app.
And then next we have this thing here, which is a render text. It's a decorator, which makes text show up in the application. We say def text, we just give this some name. The name of the function is just txt. And this returns a string, but this string, the code for this, it accesses input.n. So when we say input.n, that actually refers to this n over here. So input.n times 2.
And then we can, you know, if we comment this out, for example, and then rerun the app, we'll just hit the play button, then it just doesn't show up there in the app. All right, so now I'm going to uncomment, rerun, and it shows up again. And we can just, you know, we can play around with this, we can change these values to n times 100, and rerun that.
Shiny Express vs Shiny Core
Now, this is the app written in Shiny Express, and here's the same app written in Shiny Core. So as you can see, there's a bit more code involved for Shiny Core. Let's take a quick comparison between the code for Shiny Express and Shiny Core.
Okay, so this is for Shiny Express. You can see the code is quite a bit shorter, and this is the code for Shiny Core. Now, for Shiny Express, we just would declare a slider, and it would show up on the page, and we'd declare this render text, and that would also just show up on the page. For Shiny Core, it's a bit different.
Well, first off, we're importing from Shiny instead of importing from Shiny Express. Also, we need to create the UI completely separately from the server logic application. So you create this thing called app UI, and it consists of UI.pageFluid, which is just sort of a page-level wrapper for all the content. And then inside of that, we have these nested function calls for other components. So one of them is UIInputSlider, which is the same as for Shiny Express. But then we also had to add this output text, and we pass it the string txt. So this output text wasn't necessary in Shiny Express, but we needed to put it in Shiny Core.
Now, this whole UI here, this creates HTML that gets sent to the web browser. All right, so the next main component is the server logic. So we say def server. This is a function. It takes input, output, and session as parameters. And then we do the same thing that we did in the Shiny Express app, where we say render text and give it this function.
Now, this txt, the name of this function, corresponds to this txt over here. If these didn't match, then nothing would show up in the web application. So it's very important that those are the same. OK, so we've got our UI and the server components, and then we put them together and save it in a variable named app. All right, so this is how we do it here. We just pass it to this capital A app function.
All right, so you can see there's more code involved for Shiny Core, but it's a bit more structured. And that can be useful in some cases, but if you want to be able to create an app quickly and with a minimum of fuss, then Shiny Express is going to be the way to go.
but if you want to be able to create an app quickly and with a minimum of fuss, then Shiny Express is going to be the way to go.
Exploring examples and the component gallery
All right, now back in the shinylive interface, I want to show you some other things you can learn in these examples. So you can sort of browse these and take a look. Here's an application with a plot. This is a matplotlib. And in order to create the plot, we just say we use this decorator at render.plot. And then we give this history. We call it defhistogram. And then we just run our matplotlib plotting code as we normally would. And then this creates an application where you can move the slider and it'll redraw the plot in response to the slider.
It can also be useful to load in files like a CSV. So there's an example of that here, and it also shows how to create a nice table here. Different types of tables here. And so there's a number of other interesting examples here that you can learn from.
Now, another place that you can go if you've got an idea in mind for an application that you want to build is the Shiny for Python website. Under components, this is the component gallery. So there's a lot of different types of inputs. We just used a slider before, but there's all sorts of other things that you can have. So for example, action buttons, if you click on it, it does something, check boxes, date inputs, number inputs, passwords, radio buttons, select inputs.
Here's our sliders again, and so on, which is kind of cool. And then there's also a bunch of different outputs here. So we saw some of these before, grid and data tables, images, plots, maps, and so on. These are all a really useful resource for just getting some ideas of what's possible. And if you want to see the code for one of these components, you can just click on the little arrow here, and it'll take you to a page with the example with both Express and Core.
We've got another section in the component gallery that's really useful. So if we go to components, to layouts, the previous components we saw were the input and output components, but to create a nice looking application, you also have a lot of layout components that you can use to arrange things in a way that is helpful. So like nav bars, and that's the navigation bar at the top or the bottom, sidebars, apps, panels and cards, and so on.
Now, these pictures here are just sort of schematic pictures, but I'll show you what it looks like. For example, the sidebar on the left, right? On that, it's running the app for real and using Shiny Live, so that's what a sidebar looks like. And that's with the sidebar on the right here. And you can even put it within something that's called, something called a card.
Now with Shiny Express, the way that you declare these layouts is you say with UI.card, and then within that block, you just put stuff in there. So you can put a card header in there, and then inside of that, you put a layout sidebar and so on.
So let's just give this a shot here. So let's try, there's a really basic sidebar layout example, and this little lightning bolt here will open this application in Shiny Live. Let's click that. Okay, so here's a sidebar and the main content. Now, we can actually just bring over some of our code that we used before. So let's go back to our really basic example, and we can put stuff in the sidebar.
So actually let's copy all this code and bring it over to here. Put the sidebar with your sidebar there, and then we have to indent this. It's nice that this, the red squiggles there remind us to do that. Get all that other stuff. And hit play. And what we'll see is the sidebar here will have, will contain the slider, right? And everything that's outside of the with UI sidebar, in this case, just the render text will show up in the main content area, this app.
So then we can just copy over some other stuff for this example. So here's a plot, right? And I'll copy this. Actually, I'm gonna copy everything over because we need these imports as well. All right, so if we, that there, move those imports up to the top, and we hit button to rerun the application. And then here we have the app. It still has this text up here, this N times two, and then it also has this plot.
Now we can nest these things further. So we can say with UI.card, card is a really useful layout component. Put that in there. Well, let's just hit play. When the plot is in a card, we can do the same thing for this text there. That can be in its own. All right, so that, the card sort of, it separates the stuff that's in the card from things that are in other cards, and it makes it look really nice.
Running Shiny locally in VS Code
Now I'm gonna switch away from shinylive.io, this website, and edit code on my local system, my personal system, running Shiny in Python on my computer, the traditional way, instead of using Shiny Live in the browser. There's a few reasons for this. First, although Shiny Live is a great platform for learning and experimenting with things, because it doesn't require any installation of anything in your computer, it is subject to browser security restrictions. For example, it can't access files on disk, and it can't access a database on the network.
Next, there's a lot of Python packages that can't yet run in the browser. So we used ones for these examples that will run in the browser, but there's many that don't run in the browser yet. And finally, I wanna demonstrate how to deploy applications to a server running Posit Connect, and also shinyapps.io, not shinylive.io, but shinyapps.io. And to do those deployments, I need to do it using Python on my computer. I can't do it from this shinylive.io web interface.
So the editor I'm using is Visual Studio Code, and I've already created a directory here. There's nothing in it, but now I'm gonna set up Shiny that I'm able to run my app. Okay, so I'll open a terminal here. That's by clicking on there, and I'll use pip to install Shiny. So pip install Shiny. And I also wanna run, since I wanna run the app that I was using previously, I was using matplotlib there, so I need to install matplotlib.
Okay, great. Now I'm gonna take the code that I wrote before from shinylive, and I'll put it in a file here. So create a new file, paste in the code, save this, call it app.py.
Now in VS Code, there is a Shiny extension that you can install, and I've already installed it here. And if I hit the play button here, it will run the application in this side panel here. Great, it works just as we expected, and I can make it a little bit bigger so that it looks like this with the sidebar actually on the side. When the window's narrow, it'll actually move the sidebar to the bottom.
Deploying to Posit Connect
Good, it's working. All right. And I'll press Control C in this terminal here to stop the Shiny process from running. And now we can deploy this on a Connect server.
To do a deployment to a Connect server, best practice is to add requirements.txt file so that the server knows exactly which packages are needed to run the app. So we'll create a new file, and I'm gonna list shiny and matplotlib. Save this as requirements.txt.
Okay, now we also need a Python package called rsconnect-python. So I'll install that. rsconnect-python. I'll go install that from PyPI. And now we have a command line tool called rsconnect.
Okay. A little bit bigger. And there's various commands you can run there. The command we wanna do is rsconnect-deploy. I'll say rsconnect-deploy. And so if I just run that, it'll list the types of deployments I can do. So we want shiny. So I'll say rsconnect-deploy shiny. And then I need to call it the name of my server. The one that I'm using is called Colorado. And I want to deploy the application from this directory, so I'll put dot. Okay, so I'll go run that. And it is doing the deployment.
Okay, now that the deployment is done, we can take a look at it. So let's copy this URL and paste it into the browser. Okay, so the app is loaded. Now, there's all this other stuff around it. These are controls for you as the administrator of the application. And you can see this app works as it did when we were running it locally.
But if you wanna open it by itself without all of this administrative control stuff, click on this Open Solo, and it'll go to a different URL, and it'll just open the app by itself. And again, this app will continue to work. And this URL, you can share with other people to let them view the app.
Now, with Posit Connect, you can control who can view it. So you can make it so that anyone can view it without having to log in, or all users on this Connect server, or you can specify specific users or groups on this server who are allowed to view the app. All right, so if I wanna make this so that anyone can look at it, I'll click on Anyone, and then Save the Changes. And then anybody can go to that URL and take a look at this application.
Deploying to shinyapps.io
Another option for deployment is shinyapps.io, which is Posit's hosted service. Let's go. Now, this is shinyapps.io, not shinylive.io. There's a difference there. If we go to shinyapps.io, there's some information here about how to sign up and log in and deploy applications to it. And I'll run through a quick deployment of the app to shinyapps.io.
So to deploy to shinyapps.io, I can use the rsconnect program again, and I'll give it the same command that I did before, rsconnect deploy shiny. But this time, I'm using a different server name. For this account that I'm using, it's called gallery. That points to my shinyapps.io account, and I use deploy it from this directory. Okay, and now that the deployment is done, we can look at it in the web browser. So there it is. Our app is running on shinyapps.io.
Thanks for joining me as we took a look at Shiny Express and how to use Shiny Express. And how to deploy Shiny apps to Posit Connect servers and shinyapps.io. If you want to learn more about Shiny and Shiny Express, you can just go to the website right here, and you can click on Get Started, and it'll take you to a tutorial that covers the stuff that I talked about and a whole lot more. And the educational materials now use Shiny Express by default. So you'll just learn Shiny Express automatically by going through this tutorial.
Thanks again, and I hope you enjoy using Shiny. Thanks so much, Winston, for the amazing demo, and I know the community is going to love using Shiny Express, especially those that are new to Shiny or are exploring writing their very first Shiny application in Python.
For those joining us live, YouTube should automatically push you over to the live Q&A room right now, but if for any reason it doesn't, the link will be in the YouTube description below as well. And if you'd like to ask questions anonymously, feel free to use the Slido link you see on your screen now. Also, for those that would like to try out Posit Team, we've also included a link on the screen which can be used to schedule a short meeting with us here at Posit. And with that, let's hop on over to the Q&A. See you in a second.
