Deploy and Host Your Streamlit Websites for Free with Render and Streamlit Cloud

now we have done writing the code for our website and whenever we have to run it we go to terminal and write extremely trend main.fi so now you can see this website is running locally on my machine but now if I want to share it with other people or I want to make it accessible on internet then I have to deploy it and host it and that's what we are going to learn in this video so to make it accessible first thing we have to do is we will have to upload our project files on GitHub and before doing that we have to create a new file name requirements.txt which is going to contain all these packages or libraries that we are using for our application so that whenever we are going to deploy or host our website then the then the platform which we are going to use for hosting to know what packages are required for running this application so that you can install them so first of all as I said we have to create a requirements.txt file requirements dot txt make sure to write the same name requirements.txt without any spelling errors and now inside it we will have two options either we can just manually check for all the packages of Frameworks which we are using so here we can see we are using streamlit and streamlit option menu so I will just write them one by one streamed it and then extremely optional and and this name should not contain any spelling errors they should be as it is these are just our local files so no need to write them and after that in this file you can see we have a Firebase admin so I will just write that also Firebase underscore admin and student is already done for home.pi also the same so no need to write them no need to write it again and stream lead service admin is already done so that's all for our project we just we are just using these three models so this was one way to do that and we also have other like command for getting the requirements by using the terminal I will put that command in the description you can check that out so for now we are just saving these model names inside our requirements.txt and after saving them now we will go to GitHub and create a new repo for our project so I'm naming it phone ring tutorial and then create repository now we have to upload the file So This Modern tutorial contains all our project files I will just drag and drop it and you can see it's uploading all the files one by one you can write something to ignore these files we don't need this one so I'm just removing them okay so now we have all our files and requirements.txt now just submit so inside this boundary tutorial we have all of our main files now for hosting we will be using render so render is a platform where we can host our applications and it has a free plan and it's very easy to use so we'll be using that for this video just click on get started and it will ask you for a sign up or login so you can just use your GitHub account for signing in and here I am logged in with my account and you can see I had already posted my pondering website five months ago on using this random website and we also have a deploying service also on this website these are just similar so first of all let me show you how to deploy them on render after that I will show how to use streamlit Community Cloud for deploying so first of all we have to create a new project for our website so we will be using web service and now we will be connecting our repository so as I am logged in through my GitHub account it was already patch all my GitHub repo here if you can't find your repo here like this one we created then you can just simply go to your Apple and copy the link now paste it here and then it should show you the record name after that just click on connect now we have to give a unique name for our website I'm just passing bonding tutorial and it's not showing any errors so it's a valid or a unique name after that you can choose a reason or just keep it as it is then the branch name if you have multiple branches but in this case we just have the main branch so if you don't have to choose anything now root directory this is optional so as you can see here we have our directory inside whichever all files are present so there could be multiple directories through so we have to specify which directory contain our website file so in this case this adapter name is pondering tutorial so I'll just write it here tutorial and after that runtime we'll be using Python 3 then it asks for a build command so this command will be run when we are going to host a website so this will be used for installing all the requirements that we mentioned here so uh it will install extremely and these all other packages then we have to use the start command you can see that whenever we have to run our website we were using this command extremely run main dot pi and we have to pass this command here this command will be used to start the web server for our application so that you can choose a plan so we are going to use free one for this website after that our deploy will be started and you can see all the logs here so it's collecting stream rate and other requirements it will take about two to five minutes so we'll have to wait for that now it's installing all the packages meanwhile you can check here that our first deploy started for add files we upload that's our first comment so whenever I create new commits it will automatically start deploying and now it's starting service with streamlit run 10. so if you I go to this website the link which render is providing us then it should load our website it's still under sources okay so it says your service is live so our website is now accessible on internet it's loading and you can see the URL it's not the that localhost URL whenever someone searches for this link so it will open this website now we can share this website to anyone so it's now accessible everywhere on the internet so that was one way for hosting our website using this platform grinder.com there are other platforms through some of them are paid and some of them are unpaid so it's your choice but this one is currently in September 2023 this one is providing free services and it's working pretty well so I use this one we can use streamlits Community Cloud also for deploying our website so for doing that we can choose continue with Google or continue with GitHub and the process is pretty much same for deploying the websites here no we have to create a new app then select a repository you can also paste the GitHub URL or as you can see it will automatically fetch for newly created a positives so this is our GitHub URL link just remove this after that the main branch then which is our main file box so our main file path you can see is element values this main dot Pi which is responsible for running our website so pass that name here and this is main notepad doesn't exist okay so you can see we have this UI folder or directory here so first of all we have to pass the directory name then slash manual file now it's getting our main file after that we can choose the app URL so this is by default URL given by student for this website and let's say I want to choose a different one phone ring tutorial then if this one is also available and for this one we will have load streamly.app in our URL so that's it and now just click on deploy it will take some time for deploying you can see all the events ongoing in this manage app section so similar to this render.com it will first collect all the requirements or for this running this app and then it will install all the requirements okay so let's add some error no such file or directory okay so it's not getting our Json file I guess there is some issue regarding this folder thing maybe it's unable to access all these files like for main.pi we use monitoring tutorial slash main dot pipe for the source file and I guess it's not getting whole other files so and you can see but I already deployed my main pondering website a while ago on stream it and so I guess that only the folder thing is messing up here so we have to fix that then just remove the file remove the directory and just commit these files inside the main inside the repo directly in instead of creating this folder or as I suggested you should use this random platform for deploying and hosting there that issue won't be present here I'm not deploying it on streamlit again for now and here as I said whenever whenever I am creating or committing something on our GitHub file let's say I am just pasting the URL for a website and when I commit this you can see in events this was for deploy for added files via upload and now I had already commented something on GitHub so it will automatically start the deploy for that comment just let me reload it oh it's not starting because we were using this wondering tutorial folder for posting so whenever I'm doing some changes here then only it will start so I can do just one thing I will just pass this redmi file to online tutorial folder and now it should start the deploy yeah you can see and if you are getting confused with this folder thing then I recommend don't directly use the folder for uploading files on GitHub instead you should just simply drag and drop or create the files directly from this main page instead of creating a folder so you can see with each deploy it's giving the commit name for which deploy is started and the URL will be same for each deploy that's all for this tutorial I hope you learned how to post or deploy your websites extremely websites using render and streamnet cloud and do comment the platform which you liked most vendor or streamlit Cloud for deploying and you can see our website is deployed so that's all for this tutorial thanks

Channel: Beginner's Code Zone

Views: 8,664

Keywords: streamlit, deploy, host, python, website, accessible on internet, render, cloud, streamlit community, hosting, website hosting, free hosting, website deployment, host streamlit website

Id: bXRVgg2iWyc

Length: 14min 16sec (856 seconds)

Published: Tue Sep 05 2023