Hosting a Web Application using Heroku

Hello !
The point of me writing this blog is not to only tell about how to host a website ( I mean that is there of-course) but more than that, something which is not majorly known and understood is the arrangement of the directories. And this is the part which usually gives one a hard time while hosting, otherwise git add, commit and push is no biggie.

So, I'll try my best to clear that out, that how do we arrange our Program Files for a smooth hosting. (Also I wasted 6 hours just because of the lack of this knowledge, until a friend helped me out, so I think it's a pretty important aspect).

I have developed a Web Application using Flask Framework (Python Language) and in Visual Studio 2017. Visual Studio has a built-in option to create a environment which arranges all the directories according to a Flask Framework, but we have to make changes in that in accord to Heroku.

Also Fun Fact : - GitHub does not host flask web applications. It is as of now only limited to static web pages and if I change my dynamic web application to a static web application a lot of functionalities drop so anybody who is trying to host a dynamic website on GitHub, that's not happening.

Okay Let's Start

The first thing would be that if you are planning to make changes in the web application after hosting it, I suggest that you make a copy of all the files your program is in.
Because the issue is that once you host your web application from the original program files, then you won't be able to see the changes on local domain easily (you'd have to run the program from the command prompt every time which is cumbersome) so that's why I suggest that keep the original one for all the changes, see them in local domain, and then just copy the code onto the folder which you have used to host your entire web application.

STEP 1

Make a virtual environment if you have not already, activate it and download all the packages you have used in your web application in the virtual environment.Make the virtual Environment outside the where you have your program files. Type the following commands -

$ python -m venv venv

$ .\venv\Scripts\activate

Upgrade pip if you don't have the latest version using the following command

$ python -m pip install —upgrade pip

pip install all the necessary packages used in your program

If you already have a virtual environment then go to the command prompt, activate your virtual environment and type pip freeze and check the list of pre-installed libraries, install if any is missing.

STEP 2

Install a WSGI application server, we use gunicorn . A Python WSGI (Web Server Gateway Interface) is a way to make sure that web servers and python web applications can talk to each other. So in short install gunicorn.

$ pip install gunicorn

STEP 3

Type the following command to see what all packages are installed.

$ pip freeze

Copy the results which got from PIP freeze into a text file named requirements.txt and save it where your run.py (runserver,py or app.py) file is there. 
Now if you are using an already made environment like I have you would already have a requirement.txt file just go and copy paste the pip freeze results on to that.

STEP 4

Here comes the best part which is organisation of files !! Let's go.

Open requirements.txt and verify that it is correct

There must be a file which you would have where you have written on how your app is running. It is basically the file where you are importing your app from your project it usually has the commands as below.

from project_name import app
if name=="main":
app.run()

If you don't have such a file then make one and insert the above command in it or if you using already made environment like I am then you must be having a runserver.py something similar name file which would have some similar contents to the command shown.

After that rename your runserver.py or whatever file in which you have written the command to the name app.py

Now in the folder where you have your app.py create a new file named Procfile (note the P capital) and write in that file the following

web : gunicorn app:app

Save this file without any extension.

Note : - to save this file without an extension once you have written down the content of the file in a text file go to save as and there after typing the heading of the file which is Procfile put a dot so it the name of the file would look like Procfile. and the type would be all files and then click on save

STEP 5

Now go to the folder from your command prompt where your app.py is there. You can also type dir and check if app.py is actually there or not. Once that is verified type the following commands

$ git init
 $ heroku git:remote -a webscroller (in your case except for webscroller write the name of ur app which u entered while making heroku dashboard) (also refer to the dashboard commands for this part it ll be better)
$ git status

STEP 6

After this type the following commands to upload your file into the git and merge your code into the master branch

$ git add -A
$ git commit -am "Initial commit"
$ git push heroku master

And after this go to your website URL (which will be displayed as a result of the last command)...

...and Voila your Web App should be up !