Step by step procedures to create a Python Web Application with Flask in Visual Studio 2015

My inclination towards Python is increasing day by day after I started exploring the non-MS world through Raspberry Pi and Debian Linux. This article is an off-shoot of such exploration which I would like to share it with you.

This article requires Python Interpreter and Python Tools for Visual Studio 2015 to be installed in your developer PC. Follow the steps explained in this article to know more about Python Installation and setting up the Visual Studio 2015 for Python development.

There is an out of the box Flask Web Application Template available in Visual Studio which helps to create a Python Web Application in a breeze. That is a straight forward and simple way of approach to create a Python Web application with Flash. The alternative option is to create a Flask application from scratch by adding Python modules and required resources manually on top of an empty Python Web Project. In this article we would cover both the approaches.

Option 1 : OTB Flask Web Project

To create a Flask Web Application from a pre-installed Visual Studio template, open the Visual Studio and select the “Flask Web Project” located under “Python” language.

Click Ok and provide the details of Virtual Environment and Python version in the subsequent steps to create your first flask project.  It is advisable to opt in for “Virtual Environment” as this would create a application specific isolated Python environment , so that we won’t mess-up things with global (Machine wide) python environment.

Hit F5 to run the application. If everything is configured correctly, you would see a site similar to the one displayed below

Option 2: Flask Website from Scratch

As an alternative, you can create a blank Python web project in Visual Studio and include Flask module to this project to convert into a Flask based Python web application

1. Create a new Python Web Project by selecting “Web Project” under Python in Visual Studio

2. Next step to create a Python Virtual Environment. ( This is not mandatory but it is advisable to create a virtual environment to avoid changes to global python installation. )

3. Expand the project in Solution explorer and right click “Python Environments” and select “Add Virtual Environment”. Accept the default environment name “env” and create the python virtual environment. On successful creation of Virtual Environment, Visual studio would automatically point to newly created Virtual Environment instead of Global Python environment

4. Right click “env” ( the name of virtual environment) and select “Install Python Package”

Provide the name of the Package as “Flask” and leave the installation mode to “pip”. The alternate installation mode is “easy_install”. Wait for the installation to complete and you can view “Flask” and its dependent packages in the Solution Explorer on successful installation

5. Now the environment is all set and the next step is to create the actual web application

6. Add an empty Python file named “index.py” (Solution Explorer => Add => New Item) and set it as start-up file (Right click index.py and select “Set as Start up File” in context menu)

7. Add the below code to index.py . The below code snippet is creates a variable by name “data” and passes its value to “index.html” when the user lands at “root” location (“/”) of the website

 from os import environ from flask import Flask,render_template app=Flask(__name__) @app.route('/') def index():     data = {         "title": 'Home Page',         "msg":'Hello World from Flask for Python !!!',         "me": environ.get('USERNAME')}     return render_template('index.html',data=data) if __name__ == '__main__':     HOST = environ.get('SERVER_HOST', 'localhost')     try:         PORT = int(environ.get('SERVER_PORT', '5555'))     except ValueError:         PORT = 5555     app.run(HOST, PORT,debug=True)

8. Add two folders named “templates” and “static” to the project. These are the folders Flask would be looking for html files (templates) and other assets (static)

9. Add a new html file named “index.html” inside the templates folder and copy paste the below html snippet to that file

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta charset="utf-8" />     <title>{{data.title}}</title>     <link href="/static/styles.css" rel="stylesheet" /> </head> <body>     <div class="info">         <h2> Welcome , {{data.me}} <br /></h2>         {{data.msg}}     </div> </body> </html>

10. Add a new file named “style.css” to the static folder and the below css snippet to the file. This file is explicitly added to the project to show where to place static assets instead of adding inline css in html.

 .info {     margin:auto;     text-align:center;     padding-top:20% }

11. Solution Explorer would looks like the below picture after adding html and css

12. That’s it. Hit F5 and now you can expect a website running similar to the one shown below.