{"id":454,"date":"2020-08-21T06:24:25","date_gmt":"2020-08-21T06:24:25","guid":{"rendered":"https:\/\/shreyapohekar.com\/blogs\/?p=454"},"modified":"2021-05-26T19:59:25","modified_gmt":"2021-05-26T19:59:25","slug":"deploy-a-django-web-application-on-pythonanywhere-for-free","status":"publish","type":"post","link":"https:\/\/shreyapohekar.com\/blogs\/deploy-a-django-web-application-on-pythonanywhere-for-free\/","title":{"rendered":"How to deploy a Django Web Application for free on pythonanywhere"},"content":{"rendered":"\n<p>Unlike applications that are built with php or javascript, python web applications require a bit of setup to get the applications up and running.<\/p>\n\n\n\n<p>There are multiple platforms available that provides a free hosting platform for python applications. Few of them are heroku and digial ocean. But recently, I stumbled upon pythonanywhere.com which I found really interesting as its tag line suggests, Host, run, and code Python in the cloud!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is pythonanywhere??<\/h2>\n\n\n\n<p>pythonanywhere provides a full-fleged python environment. All the python versions comes pre-installed. The quickstart installers offers support for <a href=\"https:\/\/www.pythonanywhere.com\/details\/django_hosting\">Django<\/a>, <a href=\"https:\/\/www.pythonanywhere.com\/details\/web2py_hosting\">web2py<\/a>, <a href=\"https:\/\/www.pythonanywhere.com\/details\/flask_hosting\">Flask<\/a>, and <a href=\"https:\/\/www.pythonanywhere.com\/details\/bottle_hosting\">Bottle<\/a> where minimalisitic setup is required to get the application running!<\/p>\n\n\n\n<p>Here I will show to deploy a django web application on pythonanywhere. So lets get started!!<\/p>\n\n\n\n<p>Register an account with pythonanywhere. Its free!!<\/p>\n\n\n\n<p>Under the free account, the user can setup only one web app. To elevate the offerings, the user will be required to upgrade to premium.<\/p>\n\n\n\n<p>This is how the dashboard looks like<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"259\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-2.png\" alt=\"\" class=\"wp-image-457\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-2.png 600w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-2-300x130.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption>pythonanywhere dashboard<\/figcaption><\/figure>\n\n\n\n<p>You can go into the console section to open a new bash or a python console. All the files present in your project can be visually viewed under the Files section. Under web section, we need to do the actual work of defining the settings for the application. In the bottom right of the image, there is a webapp listed with our username followed by the pythonanywhere.com. You can also add your custom domain but that requires upgrade to premium.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Clone the repo<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Open a new console and clone the repository from the github. I will clone my repository for this demonstration. <a href=\"https:\/\/github.com\/shreyapohekar\/djcommerce.git\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/shreyapohekar\/djcommerce.git<\/a><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background\"># git clone <a href=\"https:\/\/github.com\/shreyapohekar\/djcommerce.git\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/shreyapohekar\/djcommerce.git<\/a><\/pre>\n\n\n\n<p>When we have our django project cloned, a virtual environment has to be created. It can be created using mkvirtualenv<\/p>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background scroll\">```nix\n08:07 ~ $ pwd\n\/home\/shreyapohekar\n\n08:07 ~ $ mkvirtualenv --python=\/usr\/bin\/python3.7.5 myenv\nThe path \/usr\/bin\/python3.7.5 (from --python=\/usr\/bin\/python3.7.5) does not exist\n08:11 ~ $ mkvirtualenv --python=\/usr\/bin\/python3.7 myenv                                                                                            \nRunning virtualenv with interpreter \/usr\/bin\/python3.7\nAlready using interpreter \/usr\/bin\/python3.7\nUsing base prefix '\/usr'\nNew python executable in \/home\/shreyapohekar\/.virtualenvs\/myenv\/bin\/python3.7\nAlso creating executable in \/home\/shreyapohekar\/.virtualenvs\/myenv\/bin\/python\nInstalling setuptools, pip, wheel...\ndone.\nvirtualenvwrapper.user_scripts creating \/home\/shreyapohekar\/.virtualenvs\/myenv\/bin\/predeactivate\nvirtualenvwrapper.user_scripts creating \/home\/shreyapohekar\/.virtualenvs\/myenv\/bin\/postdeactivate\nvirtualenvwrapper.user_scripts creating \/home\/shreyapohekar\/.virtualenvs\/myenv\/bin\/preactivate\nvirtualenvwrapper.user_scripts creating \/home\/shreyapohekar\/.virtualenvs\/myenv\/bin\/postactivate\nvirtualenvwrapper.user_scripts creating \/home\/shreyapohekar\/.virtualenvs\/myenv\/bin\/get_env_details\n```<\/pre>\n\n\n\n<p>Once the virtual environment is created, install django with pip. You can ignore this step if you already have it listed in the requirements.txt<\/p>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background\"># pip install django<\/pre>\n\n\n\n<p>Now install the requirements.txt<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installing the requirements.txt<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\">(myenv) 08:19 ~ $ cd djecommerce\/\n(myenv) 08:19 ~\/djecommerce (master)$ pwd\n\/home\/shreyapohekar\/djecommerce\n(myenv) 08:19 ~\/djecommerce (master)$ pip install -r requirements.txt<\/pre>\n\n\n\n<p>After installing all the modules,  migrate command of manage.py can be used to create tables<\/p>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background scroll\">(myenv) 08:24 ~\/djecommerce (master)$ python manage.py migrate\nOperations to perform:\n  Apply all migrations: account, admin, auth, contenttypes, core, sessions, sites, socialaccount\nRunning migrations:\n  Applying contenttypes.0001_initial... OK\n  Applying auth.0001_initial... OK\n  Applying account.0001_initial... OK\n  Applying account.0002_email_max_length... OK\n  Applying admin.0001_initial... OK\n  Applying admin.0002_logentry_remove_auto_add... OK\n  Applying admin.0003_logentry_add_action_flag_choices... OK\n  Applying contenttypes.0002_remove_content_type_name... OK\n  Applying auth.0002_alter_permission_name_max_length... OK\n  Applying auth.0003_alter_user_email_max_length... OK\n  Applying auth.0004_alter_user_username_opts... OK\n  Applying auth.0005_alter_user_last_login_null... OK\n  Applying auth.0006_require_contenttypes_0002... OK\n  Applying auth.0007_alter_validators_add_error_messages... OK\n  Applying auth.0008_alter_user_username_max_length... OK\n  Applying auth.0009_alter_user_last_name_max_length... OK\n  Applying auth.0010_alter_group_name_max_length... OK\n  Applying auth.0011_update_proxy_permissions... OK\n  Applying core.0001_initial... OK\n  Applying core.0002_auto_20200810_1649... OK\n  Applying core.0003_auto_20200811_0659... OK\n  Applying core.0004_userprofile... OK\n  Applying sessions.0001_initial... OK\n  Applying sites.0001_initial... OK\n  Applying sites.0002_alter_domain_unique... OK\n  Applying socialaccount.0001_initial... OK\n  Applying socialaccount.0002_token_max_lengths... OK\n  Applying socialaccount.0003_extra_data_default_dict... OK<\/pre>\n\n\n\n<p>After creating the tables, We will create a web app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a web app<\/h2>\n\n\n\n<p>In the dashboard, there was an option for web in the navbar. Click that.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It creates a new domain name as username.pythonanywhere.com. Click next<\/li><li>Now we need to select the framework. Although you can select Django here. but I will select manual configuration to show how everything works.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"391\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-3.png\" alt=\"\" class=\"wp-image-459\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-3.png 484w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-3-300x242.png 300w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>In the next step, you will have to select the version of python that you used for your project. Mine was python3.7. Click next<\/li><li>Again click next for the path, keeping it default.<\/li><\/ul>\n\n\n\n<p>This creates your web app but a bit of configuration needs to be done!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuration<\/h2>\n\n\n\n<p>Following above steps, creates a webapp. Let&#8217;s configure.<\/p>\n\n\n\n<p>Scroll down to the section of code and check your working directory and WSGI configuration file.<\/p>\n\n\n\n<p>Next, under virtualenv, enter the name of the virtual environment that you created. Mine was myenv. Click the tick mark and it will automatically take the path.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"679\" height=\"318\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-4.png\" alt=\"\" class=\"wp-image-460\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-4.png 679w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-4-300x141.png 300w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-4-640x300.png 640w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/figure>\n\n\n\n<p> Now click the WSGI configuration file in code section. You will see a file with a lot of comments. Actually, these are settings for all the frameworks. The reason being that we opted for manual configuration.<\/p>\n\n\n\n<p>Remove everything apart from django setting code. It should look something like this. Make sure you uncomment the lines have single # only.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"721\" height=\"378\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-5.png\" alt=\"\" class=\"wp-image-461\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-5.png 721w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-5-300x157.png 300w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-5-640x336.png 640w\" sizes=\"(max-width: 721px) 100vw, 721px\" \/><\/figure>\n\n\n\n<p>Change the path to the name of the folder that got cloned in your working directory. Also, change the DJANGO_SETTINGS_MODULE to the name of the project that you might have created. Mine was djcommerce.settings. Make sure that you save the file and exit.<\/p>\n\n\n\n<p>Now under the dashboard, got to the files section in navbar. The directory structure of your project will be displayed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"273\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-6-1024x273.png\" alt=\"\" class=\"wp-image-462\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-6-1024x273.png 1024w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-6-300x80.png 300w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-6-768x205.png 768w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-6-640x171.png 640w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-6.png 1177w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>project directory structure<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Note the contents of settings.py<\/h2>\n\n\n\n<p>Open settings.py in a new tab and add the following lines.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background\">STATIC_URL = '\/static\/'\nSTATIC_ROOT = '\/home\/shreyapohekar\/djecommerce\/static'\nSTATICFILES_DIRS = (os.path.join(os.path.dirname(<strong>file<\/strong>), '..\/static_in_env\/'),)\nMEDIA_URL = '\/media\/'\nMEDIA_ROOT = ''\nEMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'<\/pre>\n\n\n\n<p>The folder where all the static files will be collected is named static ( present under the root of the project.  Also, STATICFILES_DIRS is defined to tell django that static files can be loaded from static_in_env folder as well. But wait!!! static folder is not present in my directory structure.<\/p>\n\n\n\n<p>For that, the collectstatic command has to be run that collects all the static files from the project and stores in the static folder that is created automatically.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background\"># python manage.py collectstatic<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"377\" height=\"296\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-7.png\" alt=\"\" class=\"wp-image-463\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-7.png 377w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-7-300x236.png 300w\" sizes=\"(max-width: 377px) 100vw, 377px\" \/><figcaption>directory structure of static folder<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"387\" height=\"248\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-8.png\" alt=\"\" class=\"wp-image-464\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-8.png 387w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-8-300x192.png 300w\" sizes=\"(max-width: 387px) 100vw, 387px\" \/><figcaption>directory structure of static_in_env folder<\/figcaption><\/figure>\n\n\n\n<p>You see the difference between the above 2 images? These extra folders are present in static because the UI for admin panel is handled in those (that is by default present in django)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding the static files settings<\/h2>\n\n\n\n<p>Once again, go to the web section in navbar and scroll down to static files section. And it should look something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"590\" height=\"219\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-9.png\" alt=\"\" class=\"wp-image-465\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-9.png 590w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-9-300x111.png 300w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><figcaption>specifying the static url and the directory<\/figcaption><\/figure>\n\n\n\n<p>Make sure that you reload the app to apply all the changes<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"103\" src=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-10.png\" alt=\"\" class=\"wp-image-466\" srcset=\"https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-10.png 513w, https:\/\/shreyapohekar.com\/blogs\/wp-content\/uploads\/2020\/08\/image-10-300x60.png 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/figure>\n\n\n\n<p>And, your are all set to launch your application that is deployed over cloud.<\/p>\n\n\n\n<p>That&#8217;s all for this blog post. Hope you all enjoyed reading it and the content solved your purpose. Do like and share!!<\/p>\n\n\n\n<p>See you in the next one \ud83d\ude42 Until then, happy learning!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Deploy django web applications for free on pythonanywhere. Also solve the hassle of storing static files.<\/p>\n","protected":false},"author":1,"featured_media":467,"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":"","ocean_second_sidebar":"","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":"","ocean_custom_header_template":"","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":"","ocean_menu_typo_font_family":"","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":"","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":"on","ocean_gallery_id":[],"footnotes":""},"categories":[256,255,257],"tags":[260,261,258,259,262],"class_list":["post-454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-django","category-python","category-web-application","tag-deploy","tag-django","tag-python","tag-pythonanywhere","tag-settings-py","entry","has-media"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/posts\/454"}],"collection":[{"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/comments?post=454"}],"version-history":[{"count":5,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/posts\/454\/revisions"}],"predecessor-version":[{"id":830,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/posts\/454\/revisions\/830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/media\/467"}],"wp:attachment":[{"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/media?parent=454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/categories?post=454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/tags?post=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}