{"id":835,"date":"2022-08-22T13:38:00","date_gmt":"2022-08-22T08:08:00","guid":{"rendered":"https:\/\/geekpython.in\/?p=835"},"modified":"2023-08-15T16:32:11","modified_gmt":"2023-08-15T11:02:11","slug":"deploy-streamlit-webapp-to-heroku","status":"publish","type":"post","link":"https:\/\/geekpython.in\/deploy-streamlit-webapp-to-heroku","title":{"rendered":"How To Deploy Streamlit Webapp To Heroku – Complete Guide"},"content":{"rendered":"\n

Developers associated with data science or machine learning probably have web development skills. So they use a framework called Streamlit<\/strong> as a frontend source to serve their ML or Data Science web app.<\/p>\n\n\n\n

Streamlit<\/a> is an open-source, accessible, and straightforward Python framework that allows us to create interactive UI for dashboards, Machine Learning, Data Visualization, and Data Science projects.<\/p>\n\n\n\n

Anyone with no experience in web development can generate an app using Streamlit though it requires some basic knowledge of Python. Data Scientists and Data Engineers often use Streamlit.<\/p>\n\n\n\n

Generating an app using Streamlit is achieved by adding a few streamlit function calls to the existing Python projects. Check out this article on EDA and the data visualization web app using Streamlit<\/a> to learn how to build the frontend for your Python project using Streamlit.<\/p>\n\n\n\n

Once you’ve created an app, you probably want your project to be on the cloud so others can utilize it.<\/p>\n\n\n\n

In this tutorial, we will discuss how we can deploy the Streamlit application to Heroku<\/a>, a platform as a service (PaaS<\/strong>) allowing us to host our applications entirely on the cloud.<\/p>\n\n\n\n

<\/a>Creating a Streamlit Application<\/h2>\n\n\n\n

To deploy an app on Heroku, we need it first. I’ve previously created a Streamlit app “Python: Web app under 100 lines of code using streamlit”<\/em><\/strong><\/a> and explained the process of making it in an article, but I haven’t covered the deployment process. So we’ll use that app and deploy it on Heroku.<\/p>\n\n\n\n

# Importing necessary libraries\nimport streamlit as st\nimport pandas as pd\nimport plotly.express as px\n\nst.title(\"Covid-19 EDA and Visualization\")\n\nst.markdown('''\nA Web App to visualize and analyze the Covid-19 data from India\n* **Libraries Used:** Streamlit, Pandas, Plotly\n* **Data Source:** Kaggle\n''')\n# Inserting Image\nst.image('Covid-Banner.png', caption=\"Image by Sachin\")\n# Reading csv data\ndata = pd.read_csv('Covid-19.csv')\n# Displaying Data and its Shape\nst.write(\"**Covid-19 dataset**\", data)\nst.write(\"Shape of data\", data.shape)\n# Header of sidebar\nst.sidebar.header(\"User Input\")\n# Creating selectbox for Graphs & Plots\ngraphs = st.sidebar.selectbox(\"Graphs & Plots\", (\"Bar Graph\", \"Scatter Plot\", \"HeatMap\", \"Pie Chart\"))\n# Sorting the columns\nindex = sorted(data.columns.unique())\n# Setting default value for x, y, and color\ndefault_index_x = index.index('State\/UTs')\ndefault_index_y = index.index('Total Cases')\ndefault_index_col = index.index('Death Ratio (%)')\n\n# Creating selectbox for x, y and color label and setting default value\nx_label = st.sidebar.selectbox(\"X label Parameter\", index, index=default_index_x)\ny_label = st.sidebar.selectbox(\"Y label Parameter\", index, index=default_index_y)\ncol = st.sidebar.selectbox(\"Color\", index, index=default_index_col)\n\nst.markdown('''\n## **Visualization**\n''')\n\n# Caching the function\n@st.cache(suppress_st_warning=True)\n# function to plot graphs\ndef visualize_plotly(graph):\n    if graph == \"Bar Graph\":\n        st.write(graph)\n        fig = px.bar(data, x=x_label, y=y_label, color=col)\n\n    elif graph == \"Scatter Plot\":\n        st.write(graph)\n        fig = px.scatter(data, x=x_label, y=y_label, color=col)\n\n    elif graph == \"HeatMap\":\n        st.write(graph)\n        fig = px.density_heatmap(data, x=x_label, y=y_label, nbinsx=20, nbinsy=20)\n\n    else:\n        st.write(graph)\n        fig = px.pie(data, values=x_label, names=data[y_label])\n\n    return fig\n\nfigure = visualize_plotly(graphs)\nst.plotly_chart(figure)\n\nst.markdown('''\n## **Report**\n''')\n# Creating buttons to display reports\nif st.button(\"Highest Cases\"):\n    st.header(\"Highest Cases in a State\/UT\")\n    highest_cases = data[data['Total Cases'] == max(data['Total Cases'])]\n    st.write(highest_cases)\n\nif st.button(\"Lowest Cases\"):\n    st.header(\"Lowest Cases in a State\/UT\")\n    lowest_cases = data[data['Total Cases'] == min(data['Total Cases'])]\n    st.write(lowest_cases)\n\nif st.button(\"Highest Active Cases\"):\n    st.header(\"Highest Active Cases in a State\/UT\")\n    high_active_cases = data[data['Active'] == max(data['Active'])]\n    st.write(high_active_cases)\n\nif st.button(\"Lowest Active Cases\"):\n    st.header(\"Lowest Active Cases in a State\/UT\")\n    low_active_cases = data[data['Total Cases'] == min(data['Total Cases'])]\n    st.write(low_active_cases)\n\nif st.button(\"Highest Death Ratio (%)\"):\n    st.header(\"Highest Death Ratio (%) in a State\/UT\")\n    high_death = data[data['Death Ratio (%)'] == max(data['Death Ratio (%)'])]\n    st.write(high_death)\n\nif st.button(\"Lowest Death Ratio (%)\"):\n    st.header(\"Lowest Death Ratio (%) in a State\/UT\")\n    low_death = data[data['Death Ratio (%)'] == min(data['Death Ratio (%)'])]\n    st.write(low_death)<\/pre><\/div>\n\n\n\n
<\/a>Creating Required files<\/h1>\n\n\n\n
We need to add some files in the app’s root directory that allow Heroku to install the requirements and run the application.<\/p>\n\n\n\n
<\/a>requirements.txt file<\/h3>\n\n\n\n
The requirements.txt<\/em> file contains all the libraries that are used in the project or need to be installed for the project to work. We can create it manually or use a Python library called pipreqs<\/code> which will automatically create a requirements.txt<\/em><\/strong> file.<\/p>\n\n\n\n
To generate a requirements.txt<\/em><\/strong> file.<\/p>\n\n\n\n
pipreqs <project-directory-path><\/pre><\/div>\n\n\n\n
The requirements file should look something like the following:<\/p>\n\n\n\n
pandas==1.4.3\nplotly==5.10.0\nstreamlit==1.12.0<\/pre><\/div>\n\n\n\n
<\/a>setup.sh\u00a0and Procfile<\/h3>\n\n\n\n
setup.sh<\/code> and Procfile is used to tell Heroku the needed commands for running the application.<\/p>\n\n\n\n
In the setup.sh<\/code> file, we’ll add the following code that creates a streamlit folder with a credentials.toml<\/code> and a config.toml<\/code> file.<\/p>\n\n\n\n
setup.sh<\/code> file<\/p>\n\n\n\n
mkdir -p ~\/.streamlit\/\n\necho \"\\\n[general]\\n\\\nemail = \\\"your-email@domain.com\\\"\\n\\\n\" > ~\/.streamlit\/credentials.toml\n\necho \"\\\n[server]\\n\\\nheadless = true\\n\\\nenableCORS=false\\n\\\nport = $PORT\\n\\\n\" > ~\/.streamlit\/config.toml<\/pre><\/div>\n\n\n\n
Now we’ll create a Procfile<\/strong> that specifies the commands executed by the app on the startup.<\/p>\n\n\n\n
In the command below, Procfile executes the setup.sh<\/code> file and then calls streamlit run<\/code> to run the application.<\/p>\n\n\n\n
Procfile<\/code> file<\/p>\n\n\n\n
web: sh setup.sh && streamlit run app.py<\/pre><\/div>\n\n\n\n
<\/a>Creating a GitHub repository<\/h1>\n\n\n\n
Now, it’s time to push the code to GitHub<\/strong>. If you haven’t created a GitHub repository, then log in to your GitHub account and follow the steps below:<\/p>\n\n\n\n
\"New<\/figure>\n\n\n\n
Type the repository name and hit the “Create repository<\/strong>” button.<\/p>\n\n\n\n
\"Creating<\/figure>\n\n\n\n
Now that you’ve created a GitHub repository, it’s time to commit and push the code to the repository. Move to the app.py<\/code> directory and copy-paste the following command into your terminal<\/strong>.<\/p>\n\n\n\n
echo \"# Streamlit-App\" >> README.md\ngit init\ngit add . \ngit commit -m \"first commit\"\ngit branch -M main\ngit remote add origin https:\/\/github.com\/your-github-username\/repository-name.git\ngit push -u origin main<\/pre><\/div>\n\n\n\n
Here, a git repo will be initialized in the current directory, and instead of adding git add README.md<\/code>, we’re running git add .<\/code> to stage all the files in our current directory.<\/p>\n\n\n\n
<\/a>Deploying to Heroku<\/h1>\n\n\n\n
We need a Heroku account to deploy any application on their platform. In general, Heroku is free to use but to get more features, we’ll have to pay.<\/p>\n\n\n\n
<\/a>Creating a Heroku account<\/h2>\n\n\n\n
To create an account on Heroku, click here<\/a>. I’ve already created an account, so I’ll log in to my account.<\/p>\n\n\n\n
There are two methods to deploy applications on Heroku:<\/p>\n\n\n\n
    \n
  1. Using Heroku UI (Manually)<\/li>\n\n\n\n
  2. Using Heroku CLI<\/li>\n<\/ol>\n\n\n\n
    <\/a>Using Heroku UI (Manually)<\/h2>\n\n\n\n
    Using Heroku UI, we can manually deploy our application by performing the below steps.<\/p>\n\n\n\n
    Click on the “Create new app<\/strong>” to create a new app.<\/p>\n\n\n\n
    \"Creating<\/figure>\n\n\n\n
    Then enter the name of the app and then hit “Create app<\/strong>” to move on to the next step.<\/p>\n\n\n\n
    \"Configuring<\/figure>\n\n\n\n
    Click on the “GitHub<\/strong>” option to connect to GitHub on Heroku, search for application repository<\/strong>, and hit “Connect<\/strong>“.<\/p>\n\n\n\n
    \"Uploading<\/figure>\n\n\n\n
    In the last step, click “Enable Automatic Deploys<\/strong>“, select the branch, and hit “Deploy Branch<\/strong>“.<\/p>\n\n\n\n
    \"Deploying<\/figure>\n\n\n\n
    Now, wait until Heroku completes the build process of our application and deploys it on the cloud. After completing the deployment process, we can see our application live on the cloud. Here you can see the application covid19visualization<\/a>.<\/p>\n\n\n\n
    \"Live<\/figure>\n\n\n\n
    <\/a>Using Heroku CLI<\/h2>\n\n\n\n
    To deploy our application on Heroku from the terminal, we need to download the Heroku CLI<\/a>. Heroku CLI requires Git. If you haven’t installed it yet, then complete the Git installation<\/a> or refer to this article on Getting Started on Heroku with Python<\/a>.<\/p>\n\n\n\n
    <\/a>Log in to Heroku<\/h4>\n\n\n\n
    After setting up the Heroku CLI, we can log in to the Heroku account. Open your terminal, move to the app.py<\/code> directory, and run the heroku login<\/code> command. You will be asked to press any key, redirecting you to the Login<\/em><\/strong> window.<\/p>\n\n\n\n
    PS D:\\SACHIN\\VS_projects\\streamlit\\Covid-19_EDA App> heroku login\nheroku: Press any key to open up the browser to login or q to exit: \nOpening browser to https:\/\/cli-auth.heroku.com\/auth\/cli\/browser\/1f44be15-907a-4c85-8490-9f6f66e5830e?requestor=SFMyNTY.g2gDbQAAAA4xNTcuMzcuMTU2LjEyMm4GAEjfTbaCAWIAAVGA.ja9bfS30WQXj7SoiyTzMwxN6Ryvo3RSJF4BhaPWqe8o     \nLogging in... done\nLogged in as <your-username><\/pre><\/div>\n\n\n\n
    \"Heroku<\/figure>\n\n\n\n
    <\/a>Deploying the app<\/h2>\n\n\n\n
    After the log-in process, we need to create a Heroku instance for the app by using the command heroku create<\/code> in the terminal.<\/p>\n\n\n\n
    heroku create <your-app-name><\/pre><\/div>\n\n\n\n
    It’s your choice to type a name for your app otherwise just run the heroku create<\/code> command.<\/p>\n\n\n\n
    \"Creating<\/figure>\n\n\n\n
    Push the code using the following command to that instance.<\/p>\n\n\n\n
    git add .\ngit commit -m \"commit message\"\ngit push heroku master<\/pre><\/div>\n\n\n\n
    After running the command git push heroku master<\/code>, Heroku will automatically detect that it is a Python app and installs the packages from the requirements.txt<\/code> file. After completing the build process, we can see the following log in the terminal.<\/p>\n\n\n\n
    remote: -----> Discovering process types\nremote:        Procfile declares types -> web\nremote:\nremote: -----> Compressing...\nremote:        Done: 142.4M\nremote: -----> Launching...\nremote:        https:\/\/covid19visualization.herokuapp.com\/ deployed to Heroku\nremote: This app is using the Heroku-20 stack, however a newer stack is available.\nremote: To upgrade to Heroku-22, see:\nremote: https:\/\/devcenter.heroku.com\/articles\/upgrading-to-the-latest-stack\nremote:\nremote: Verifying deploy... done.\nTo https:\/\/git.heroku.com\/covid19visualization.git\n * [new branch]      master -> master<\/pre><\/div>\n\n\n\n
    \n
    This app is using the Heroku-20 stack which is an old stack, however, we can upgrade to Heroku-22 which is a newer stack. Here’s how to upgrade an app stack<\/a>.<\/p>\n<\/blockquote>\n\n\n\n
    <\/a>Checking if the app is running<\/h4>\n\n\n\n
    Now we can check if our app is deployed successfully and running on the web using heroku ps:scale web=1<\/code>.<\/p>\n\n\n\n
    \"Checking<\/figure>\n\n\n\n
    Finally, run the command heroku open<\/code> and this will open the app using your default browser, or manually enter the app’s URL<\/strong> in the browser to open the application.<\/p>\n\n\n\n
    Visit my GitHub repository for Source Code<\/a>.<\/p>\n\n\n\n
    <\/a>Conclusion<\/h1>\n\n\n\n
    We’ve learned how to deploy a Streamlit app on Heroku using two methods.<\/p>\n\n\n\n
    The first method we used is Heroku UI or manually deploying our app from the Heroku website by performing some simple steps.<\/p>\n\n\n\n
    The second method we used is Heroku CLI, Heroku C<\/strong>ommand L<\/strong>ine I<\/strong>nterface helps us perform the deployment process completely from the terminal.<\/p>\n\n\n\n
    \n\n\n\n
    That’s all for now<\/strong>.<\/p>\n\n\n\n
    Keep Coding\u270c\u270c<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Developers associated with data science or machine learning probably have web development skills. So they use a framework called Streamlit as a frontend source to serve their ML or Data Science web app. Streamlit is an open-source, accessible, and straightforward Python framework that allows us to create interactive UI for dashboards, Machine Learning, Data Visualization, and Data Science […]<\/p>\n","protected":false},"author":1,"featured_media":848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[2,34],"tags":[47,31,35,48],"class_list":["post-835","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-python","category-streamlit","tag-heroku","tag-python3","tag-streamlit","tag-webapp","entry","has-media"],"_links":{"self":[{"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/posts\/835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/comments?post=835"}],"version-history":[{"count":4,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/posts\/835\/revisions"}],"predecessor-version":[{"id":1363,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/posts\/835\/revisions\/1363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/media\/848"}],"wp:attachment":[{"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/media?parent=835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/categories?post=835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekpython.in\/wp-json\/wp\/v2\/tags?post=835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}