Deploy a Plotly Dash data visualization app for free on Google Cloud Run in a few simple steps.

hi everyone my name is federico tartarini and in this video i'm going to show you how you can deploy on google cloud run this very nice web application created with the plotly dash what is pottery dash plot lead rush is a productive framework for building web analytics platform if you want to find out more about plot lead dash you can visit their website but basically it allows you to create a very nice web application with very little python code you don't need any front-end development skill so you don't need to know learn javascript or you don't need to learn react you can just work with your python skill and create a very nice web application the only problem is that if you want to share your work with someone else you need to deploy this web application online and sometimes there are some other solutions but they are not very good as google cloud run i'm not supported by google cloud run and they're not paying me for this video but i find it a very nice tool online that you can use it basically for free to deploy your application so we're going to deploy a simple dash plotter application just because i want to keep it simple the scope of this video is not to show you how to create an application with dash plotly but instead is to show you how to deploy it on google cloud run so we're going to use this boilerplate code that is on their website i'm going to put a link in the description and we will have to change it a little bit but i will show you all the things that we need to do in order to create the charts like this one here that i show you before we are going to use plottery express which i think it also is a great tool again developed by plotly and there are a lot of beautiful plots that you can create with plotly express these are just few of the examples of the chart that you can create again just have a look at their documentation and then select the chart that most suits your need we're going to use google cloud run google cloud run it provides a serverless environment so you don't have to maintain your server worry about on time or upgrade or update the servers google will take care of that we're going to put all our application inside the docker container and then we're going to build it and deploy to google cloud run why i'm selecting google cloud run to deploy my application because it has a very good free tier so of course you can be charged if you use your application a lot but this is the free the year offered by google cloud run and if you just want to showcase your application with the friends family or even share it online on twitter or linkedin i think these tier is quite generous and most likely you will not be billed for your application and as you can see here you get a 300 credit for to spend on google cloud so that shouldn't be an issue pricing shouldn't be an issue for you if you have a small application and you want to showcase your work we're going to deploy the application we're going to create a project on the google cloud console and i'm going to show you all the code so follow along with me follow all my steps but don't worry too much about the code copy and pasting it because i'm going to use some boilerplate code and i'm going to put it down in the video description i'm going to create a project using by charm by charm ide so i'm going to create a new project here on my computer and i'm going to save it in downloads and i'm going to create a virtual environment if you work with a web application it's always a good practice to create a virtual environment why you need to create a virtual environment is because you might have different packages installed on your computer inside python but then you want to make sure that that application is working regardless of the packages that you install or uninstall on your computer so we want to create a virtual environment inside our project in order to make sure that we can test that specific application with those specific requirements so we're going to create a new application and we're going to use python 3.8 as a base interpreter and we're going to click here on create pycharm will create a new project for us it's going to take a little bit of time because it's creating the virtual environment and is doing that automatically of course you don't have to use pytharm you can use any other id or alternatively you can just use even the command line i think pycharm is quite nice because it offers a lot of features and there is the community edition which is also free again i'm not sponsored by pycharm but i think it's a good tool that's why i'm using it but feel free to use any text editor or just to write the code from the command line will work anyway so i'm going to fast forward this section until pycharm has created a virtual environment for us great by charm has created the environment for us i'm going to use presenter mode just so you can see better what i'm doing but basically i will have the terminal here at the bottom the project directory here on the left and the code here in the center of the screen so the first thing that we want to check is the python packages that are installed in our virtual environment and this command the pip list should return just pip and setup tools so these are bare bone packages that are installed with python so the first thing that we need to do is to create an app.pi file so we can click here in the project directory right click new python file here and we're going to call it app and then inside here we're going to copy the code the boilerplate code from dash so let me just go back to the website here and i'm going to copy this boilerplate code to create this application so first thing that we want to do is to test this application locally so we can press here on the play button alternatively in the terminal we can type python and then up dot pi of course we get the error because we haven't installed dash as we saw before the only two packages that were installed are pip and setup tools so let's go and install the dash so we do pip install dash in the terminal alternatively with pytharm you could also click here on the error message alt enter and then you say install package dash but i'm going to do it from the terminal so i'm going to install dash dash comes with other dependencies so he is going to install automatically plotly dashcore components and html and we just need to install pandas so in the meantime while we are installing all these packages let's go and create another file here inside our repository new and then we're going to call it file and then we're going to call it requirements dot text inside this requirement.text we're going to put all the requirements that we needed for our project to work while this is important it is important because the google cloud run needs to know which dependencies are needed for our application to work so in order to tell it that we just need to specify all the python packages that python needs to run our application so basically inside here i'm going to save it all the pack i'm going to list all the packages that we need for our application application to work so we need dash we need to pandas and blockly you don't need to specify the version technically you could just leave it this part here empty you can just say dash i would recommend you to specify the version 2 because dash might release a new version of dash or pandas may release a new version of their package and then may create errors and your application may no longer work so it's better to specify the version of the python package that you want then test locally that if you update this package when it's going to be released everything is working and then you can update here in the requirement file to build it and deploy our application we're going to need to package our application inside the docker container don't worry too much about that i'm going to explain what i'm going to write in the docker file it's going to be simple and you don't need to change it much so just follow along with me so we're going to create a new file and we're going to call it docker file so this is going to create a docker file here and inside the docker file we just have to copy again some boilerplate code in this case we are going to use python 3.8 and we are specifying it here from python 3.8 then we need to specify what is inside the docker our environment working directory and what we need to do so basically we need to copy inside everything that is in the source directory inside this python project inside the docker this is a standard docker code don't worry too much about it you don't have to change it then we're going to install the packages with ppinstall requirements.txt again is as you would do on local but then we need to install of course all the packages inside docker then we need to expose the port the application and we need to run this command with command the python app.pi and this is the same command that we're going to run locally to in to start our application so now that all our packages have been installed let me see which packages we have so we have a paper we have dash now we have flask we still don't have pandas so we need to do pip install pandas great we have installed pandas so we can type here in the terminal python app dot pi and this hopefully should run our application locally fantastic you can see the dash is running on this port and this location so we can click here and we can see our dash application locally hello dash dash our web application framework for python so let's go back into pytharm let's change a little bit the source code here as you can see now the red line are gone because you have installed all these packages and we're going to change hello dash and um web application from python and we say youtube tutorial okay we save that let's see if it has reloaded so if i refresh youtube tutorial so as you can see i have changed our application of course feel free to add a new chart to change the application based on your needs and you can find other tutorials or if you want to find out more how to use dash and blockly and plot express maybe just write down a comment in the video description and i can release new videos based on your request but just have a look at their source documentation you can find a lot of example on how to add chart with plotted express and dash so now that we have our application working locally we just need to do a couple of more things in order to deploy it on google cloud run so the first thing that we need to do is to go back here inside our project inside app.pi and we just have to slightly modify this app.pipe file so instead of the bug true we're going to see the bug false because we want to deploy this application and we don't want to have it in the back room then we just have to change the host and host we are going to say 0.0.0.0 and then we want to specify the port in which we want to expose this application in the web and is 8080. so inside here the dockerfile we are also exposing the same port 8080 okay so actually let me change this so we're going to change the export expose the port 8080 the final thing that we need to do and you you will not have to do it in your case but i'm going to do it right now just to show you all the commands that we need to do to deploy our project so i'm going to create a readme file so we're going to call it readme.now and inside here i'm going to copy all the commands that are needed for you to deploy your application to google cloud run so let me copy here and let me explain what you are doing here so you are going to type two commands in the terminal the first one is to build the application in docker and submit it and so we're going to build it online because you don't need to have docker installed for this tutorial on your computer of course if you have docker installed on your computer you can also build it locally and then you can send the image online you can just push the image but we're going to leverage google cloud run and google cloud platform sorry and we're going to build it online so we don't even need to have docker installed locally what we need to change in this command or what you will need to change in this command is this and every time you see project okay so this is my project name this is my specific project name and you will not be able to push your application to my project you will have to push it to your project how can you create a project and how can you find out the name of the project well that's super simple you can go here in google cloud platform and then you can click on console once you click on console you're going to be prompted with this landing page or you might be in a different part of the page just click here at the top in testbed and if you don't see anything you will see create a new project so you click here at the top and you will see all the project that i have if you don't have any project here just create a new project and just simply create a new project for your specific application so you can call it dash plotter in youtube i have already a project created so i'm not going to create another one the important thing that you not need to know down is that the title of the project that you you put over there when you click on your project is going to be this one name but when we deploy we need to use this id okay so in this case i've copied testbed310521 so if i go back into my code as you can see i've copied testbed310521 here here here and inside project here so in four locations another thing that you might want to change but you don't need to change specifically is the name of your application so in my case i call it dash youtube and we are going to actually change the name because dash youtube is already there so if i go in google cloud run so i click here at the top i click on google cloud run you can see that my application is actually running and is visible to the to the public so anyone with a public url can actually visit this application so what we're going to do is to create another application so we're going to change the name and we're going to deploy so we're going to call it dash youtube example so since i'm changing it up there i need to change it also here how can you run these two command in order to run this two command you need to have installed on your computer which is also another requirement that i forgot to mention before you need to have installed on your computer the google cloud sdk so you can just type google cloud sdk and then install and then you will find in the instruction to install google cloud sdk it's super simple inside your terminal you can just type this command here and you're going to be prompted with an installation and then you just have to follow the steps but it's very simply explained here on their documentation so just follow along with this guide i'm going to put a link down in the description on how to follow along with that great so we have done everything so now we can go back to our project and we can just run these two comments here bear in mind that as i previously mentioned you need to have google cloud sdk installed if you don't want to install google cloud sdk for any reason on your computer i have another video and i will put a link here at the top in which i show you how you can sync this project with github and then you can clone it inside the google cloud platform and you can deploy it honestly i think it's better that you install the google cloud sdk because it's going to make your life easier so we can open a new terminal here and we're going to just copy and paste this command here so we are going to submit we are going to build it this process is going to take a few minutes actually and i'm going to fast forward it great we get a success message as you can see here at the bottom success there was a small error here but don't worry too much about it you see running people as a route will break packages and permission is not a big problem it's just an error that i get maybe i should try to find a solution to that but it's not going to break your build process and right now we have built our application and we successfully built so we didn't get any error in the build inside the docker container the last thing that we need to do is to deploy our application because at the moment is not deployed yet so if you go back here into the google cloud console so if you go inside here inside my project inside the google cloud run instances that are running the application you will see that there is only this application inside a project you can build more than one application you're not limited to one application per project is up to you how you organize it usually i have one project peer application and then inside the project you can have a database or something else some google cloud functions but it's up to you how you organize that so basically here we have youtube but we don't have dash youtube example because we haven't pushed it yet so let's go back to our terminal here so we just have to run this second command so we're going to run deploy the image that we just created and then we are going to say platform manager so google cloud run is going to manage everything we have to specify the project name because that's the project name that we we need to specify and we need to allow unauthenticated calls what does it mean it means that everyone can see your application because if you don't put this tag here just be very mindful that you do if you don't put this tag here you will only be able to see the application but no one else will be able to see your application so it really depends on your application and what you need to do but in my case i want to showcase my work with other people so i need to make sure that is allow and authenticated so i'm going to copy this line of code here here at the bottom inside the terminal and we are going to run this one it's going to ask us a couple of questions let's see the question so here we have the service name and this is the name that is going to appear here inside the google cloud platform inside here google cloud run i'm happy with the dash youtube example so i'm going to just press enter i need to specify where i want to deploy my application i'm currently in singapore so i'm going to select asia south or asia southeast i mean it doesn't really matter as long as it's close to your users and you never know where all your users are going to be so in my case i'm going to just select 6 for the moment and then press enter and this is going to deploy our application so as you can see here is doing something in the background and i will fast forward again this section here and i will show you once everything is ready fantastic so everything was fine you can see a lot of okay messages everything was good we can see that the service has been deployed 100 of the traffic and we can click on the service url so if you click here we're going to be redirected to the service url and this should load our application it might take a little bit of time for the first time to load and here we are hello dash dash web application framework for python so everyone can actually now access my application using this url if you want to if you forget this url once you close the terminal you can always go inside here into the google cloud console refresh this page and now you will see that there are two applications one is youtube example that's youtube example so we click here and then here at the top you will see the url that you can use to access your application so if i click here again i'm going to reload the same application if you now want to change your application it's super simple you just have to go inside here app.pi and then you can just change the code as i previously done here maybe you could remove this youtube tutorial and then you can do all the steps that we did before so you are going to build it first with this command here and then we are going to deploy with the same command here i really hope you find this video interesting if you have any question or if you face any issues while following along in the video just feel free to leave a comment down in the video description or just leave a nice comment if you find this video useful i would really appreciate if you could just like my video and subscribe to my channel because that would really help me a lot to grow as a youtube channel and that also motivates me to release more video like this one thank you very much for listening and if you want to support this channel please consider buying me a coffee via the website buy me a coffee i put the link down in the video description below see you next time

Channel: Federico Tartarini

Views: 846

Rating: 4.909091 out of 5

Keywords: deploy plotly dash on google cloud run, deploy plotly dash on Google Cloud console, plotly cloud run, Deploy plotly express app, dash cloud run, deploy plotly dash, plotly data visualization app, dash data visualization app, deploy plotly dash app, plotly express and dash, dash plotly, plotly express, data science, data analysis, plotly dash serverless deployment, deploy python app to google cloud, plotly express python

Id: 1VewIO2Yhmo

Length: 23min 1sec (1381 seconds)

Published: Sun Jun 06 2021