Skip to content
    geeksforgeeks
    • Interview Prep
      • DSA
      • Interview Corner
      • Aptitude & Reasoning
      • Practice Coding Problems
      • All Courses
    • Tutorials
      • Python
      • Java
      • ML & Data Science
      • Programming Languages
      • Web Development
      • CS Subjects
      • DevOps
      • Software and Tools
      • School Learning
    • Tracks
      • Languages
        • Python
        • C
        • C++
        • Java
        • Advanced Java
        • SQL
        • JavaScript
        • C#
      • Interview Preparation
        • GfG 160
        • GfG 360
        • System Design
        • Core Subjects
        • Interview Questions
        • Interview Puzzles
        • Aptitude and Reasoning
        • Product Management
        • Computer Organisation and Architecture
      • Data Science
        • Python
        • Data Analytics
        • Complete Data Science
        • Gen AI
        • Agentic AI
      • Dev Skills
        • Full-Stack Web Dev
        • DevOps
        • Software Testing
        • CyberSecurity
        • NextJS
        • Git
      • Tools
        • Computer Fundamentals
        • AI Tools
        • MS Excel & Google Sheets
        • MS Word & Google Docs
      • Maths
        • Maths For Computer Science
        • Engineering Mathematics
        • School Maths
    • Python Tutorial
    • Data Types
    • Interview Questions
    • Examples
    • Quizzes
    • DSA Python
    • Data Science
    • NumPy
    • Pandas
    • Practice
    • Django
    • Flask
    • Projects
    Open In App

    Introduction to Web development using Flask

    Last Updated : 11 Jul, 2025
    Comments
    Improve
    Suggest changes
    39 Likes
    Like
    Report

    Flask is a lightweight and flexible web framework for Python. It's designed to make getting started with web development quick and easy, while still being powerful enough to build complex web applications. It is an API of Python that allows us to build web applications.

    It was developed by Armin Ronacher. Flask's framework is more explicit than Django's framework and is also easier to learn because it has less base code to implement a simple web application. Flask Python is based on the WSGI(Web Server Gateway Interface) toolkit and Jinja2 template engine.

    Advantages of Flask

    • Flask is a lightweight backend framework with minimal dependencies.
    • Flask is easy to learn because its simple and intuitive API makes it easy to learn and use for beginners.
    • Flask is a flexible Framework because it allows you to customize and extend the framework to suit your needs easily.
    • Flask can be used with any database like:- SQL and NoSQL and with any Frontend Technology such as React or Angular.
    • Flask is great for small to medium projects that do not require the complexity of a large framework.
    • Flask Documentation.

    Getting Started With Flask

    Python3 is required for the installation of the Python Web Framework Flask. You can start by importing Flask from the Flask Python package on any Python IDE. For installation on any environment, you can execute the command "pip install flask" on your terminal. Let's look at an example of a basic flask app.

    Python
    from flask import Flask     
    app = Flask(__name__)   # Flask constructor 
      
    # A decorator used to tell the application 
    # which URL is associated function 
    @app.route('/')       
    def hello(): 
        return 'HELLO'
      
    if __name__=='__main__': 
       app.run(debug=True) 
    

    Explanation:

    • Flask(__name__): Creates the Flask app.
    • @app.route('/'): Defines the home route (/).
    • def hello(): creates a function that is bound with '/' route and returns "HELLO" when the root page is accessed.
    • app.run(debug=True): runs the app in debug mode. It ensure that app is not need to restart manually if any changes are made in code.

    Build Flask Routes in Python

    Web frameworks provide routing technique so that user can remember the URLs. It is useful to access the web page directly without navigating from the Home page. It is done through the following route() decorator, to bind the URL to a function.

    Python
    # decorator to route URL 
    @app.route(‘/hello’) 
    
    # binding to the function of route 
    def hello_world():     
        return ‘hello world’ 
    

    Explanation: If a user visits http://localhost:5000/hello URL, the output of the hello_world() function will be rendered in the browser.

    One alternate way of doing this is by using "add_url_rule()" function of an application object, it can also be used to bind URL with the function similar to the above example.

    Python
    def hello_world():
        return ‘hello world’
      
    app.add_url_rule(‘/’, ‘hello’, hello_world)
    

    Variables in Flask

    Variables in flask are used to build a URL dynamically by adding the variable parts to the rule parameter. It is passed as keyword argument. Here's an example.

    Python
    from flask import Flask 
    app = Flask(__name__) 
    
    @app.route('/hello/<name>') 
    def hello_name(name): 
        return 'Hello %s!' % name 
    
    if __name__ == '__main__': 
        app.run(debug = True) 
    

    Output:

    variable
    Snapshot of a variable URL

    Explanation: parameter of route() decorator contains the variable part attached to the URL '/hello' as an argument. Hence, if URL like "http://localhost:5000/hello/GeeksforGeeks" is entered then "GeeksforGeeks" will be passed to the hello() function as an argument.

    Besides the default string type, Flask also supports int, float, and path (which allows slashes for directories). Flask's URL rules use Werkzeug’s routing module, ensuring unique URLs following Apache's conventions. Here's an example.

    Python
    from flask import Flask 
    
    app = Flask(__name__) 
    
    @app.route('/blog/<int:postID>')
    def show_blog(postID): 
        return 'Blog Number %d' % postID  
    
    @app.route('/rev/<float:revNo>')
    def revision(revNo): 
        return 'Revision Number %f' % revNo  
    
    if __name__ == '__main__': 
        app.run(debug=True)
    

    Run the application and type the following URLs in a browser-

    http://127.0.0.1:5000/blog/555

    blog
    Snapshot of /blog URL

    http://127.0.0.1:5000/rev/1.1

    rev
    Snapshot of /rev URL

    Explanation:

    • /blog/555 captures 555 as an integer and returns "Blog Number 555".
    • /rev/1.1 captures 1.1 as a float and returns "Revision Number 1.100000" (default float format).

    Build a URL in Flask

    Dynamic Building of the URL for a specific function is done using url_for() function. The function accepts the name of the function as first argument, and one or more keyword arguments. See this example

    Python
    from flask import Flask, redirect, url_for
    app = Flask(__name__)
    
    
    @app.route('/admin')  # decorator for route(argument) function
    def hello_admin():  # binding to hello_admin call
        return 'Hello Admin'
    
    
    @app.route('/guest/<guest>')
    def hello_guest(guest):  # binding to hello_guest call
        return 'Hello %s as Guest' % guest
    
    
    @app.route('/user/<name>')
    def hello_user(name):
        if name == 'admin':  # dynamic binding of URL to function
            return redirect(url_for('hello_admin'))
        else:
            return redirect(url_for('hello_guest', guest=name))
    
    
    if __name__ == '__main__':
        app.run(debug=True)
    

    To test this, save the above code and run through python shell and then open browser and enter the following URLs-

    http://localhost:5000/user/admin

    admin
    Admin

    http://localhost:5000/user/ABC

    ABC
    guest/ABC

    Explanation:

    The above code has a function named user(name), accepts the value through input URL. It checks that the received argument matches the 'admin' argument or not. If it matches, then the function hello_admin() is called else the hello_guest() is called.

    HTTP method are provided by Flask

    Python Web Framework Flask support various HTTP protocols for data retrieval from the specified URL, these can be defined as:-

    MethodDescription
    GETThis is used to send the data in an without encryption of the form to the server.
    HEADprovides response body to the form
    POSTSends the form data to server. Data received by POST method is not cached by server.
    PUTReplaces current representation of target resource with URL.
    DELETEDeletes the target resource of a given URL

    Serve HTML and Static Files in Flask

    A web application often requires a static file such as javascript or a CSS file to render the display of the web page in browser. Usually, the web server is configured to set them, but during development, these files are served as static folder in your package or next to the module. See the example in JavaScript given below:

    Python
    from flask import Flask, render_template
    
    app = Flask(__name__)
    
    @app.route("/")
    def index():
        return render_template("index.html")
    
    if __name__ == '__main__':
    app.run(debug=True)
    

    HTML File (index.html)

    Create a Template folder "templates" in your project directory. This Template folder will contain all the HTML files of the project and they will be rendered through our flask app using render_template method (we will learn about it in detail later).

    html
    <html> 
    
    <head> 
        <script type = "text/javascript"
            src = "{{ url_for('static', filename = 'hello.js') }}" ></script> 
    </head> 
        
    <body> 
        <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
    </body> 
        
    </html> 
    

    JavaScript file (hello.js)

    Create a static folder that will contain all the javascript and CSS files. It will be sibling of the templates folder.

    javascript
    function sayHello() { 
        alert("Hello World") 
        } 
    

    To serve this javascript code in a flask app, link it with a HTML file (index.html in this case) in the template folder using this line of code in the head section -

    <script type = "text/javascript" src = "{{ url_for('static', filename = 'hello.js') }}" ></script>

    Run the application by executing "python app.py" in the terminal and visit the development URL- http://127.0.0.1:5000

    Output:

    app
    Home Route
    flash
    Rendering flask message using the js file

    Cookies in Flask

    A Cookie is a form of text file which is stored on a client's computer, whose purpose is to remember and track data pertaining to client's usage in order to improve the website according to the user's experience and statistic of webpage.

    The Request object contains cookie's attribute. It is the dictionary object of all the cookie variables and their corresponding values. It also contains expiry time of itself. In Flask, cookie are set on response object. See the example given below:

    app.py code

    Python
    from flask import Flask, request, render_template, make_response
    
    app = Flask(__name__) 
    @app.route('/') 
    
    def index(): 
        return render_template('index.html') 
    
    @app.route('/setcookie', methods = ['POST', 'GET']) 
    def setcookie(): 
        if request.method == 'POST': 
            user = request.form['nm'] 
            resp = make_response(render_template('cookie.html')) 
            resp.set_cookie('userID', user) 
            return resp 
    
    @app.route('/getcookie') 
    def getcookie(): 
        name = request.cookies.get('userID') 
        return '<h1>welcome '+name+'</h1>'
    if __name__ == "__main__":
        app.run()
    

    HTML code ( index.html )

    html
    <html> 
    <body> 
        
        <form action = "/setcookie" method = "POST"> 
            <p><h3>Enter userID</h3></p> 
            <p><input type = 'text' name = 'nm'/></p> 
            <p><input type = 'submit' value = 'Login'/></p> 
        </form> 
            
    </body> 
    </html> 
    

    HTML code ( cookie.html )

    html
    <html> 
        <body> 
            <a href="/getcookie">Click me to get Cookie</a> 
    </body> 
    </html> 
    

    Run the application and visit http://127.0.0.1:5000 in your browser. The form submits to '/setcookie', where the set function stores a cookie named userID. The cookie.html page includes a link to the getcookie() function, which retrieves and displays the cookie value in the browser. Output snippets are below:

    Enter user ID into the form and click "Login".

    Enter-user-id
    Home Route

    Click on "Click me to get Cookie"

    setcookie
    cookie.html gets rendered

    "/getcookie" route takes the User ID from cookies and renders welcome along with it.

    getcookie
    /getcookie route

    Sessions in Flask

    A session is the time between a user logging in and logging out of a server. Session data is stored on the server in a temporary folder, and each user is assigned a unique session ID.

    Session ID

    The Session object is a dictionary that contains the key-value pair of the variables associated with the session. A SECRET_KEY is used to store the encrypted data on the cookies.

    Example:

    Session[key] = value // stores the session value
    Session.pop(key, None) // releases a session variable

    Other Important Flask Functions

    redirect

    It is used to return the response of an object and redirects the user to another target location with specified status code.

    Syntax: Flask.redirect(location, statuscode, response)

    Parameters:

    • location: The URL to redirect to.
    • statuscode (optional): HTTP status code (default is 302, which means "Found" or temporary redirect).
    • response (optional): Used to modify the response before sending.

    abort

    It is used to handle the error in the code.

    Syntax: Flask.abort(code)

    The code parameter can take the following values to handle the error accordingly:

    • 400 - For Bad Request
    • 401 - For Unauthenticated
    • 403 - For Forbidden request
    • 404 - For Not Found
    • 406 - For Not acceptable
    • 425 - For Unsupported Media
    • 429 - Too many Requests

    File-Uploading in Flask

    File Uploading in Flask needs an HTML form with enctype attribute and URL handler, that fetches file and saves the object to the desired location. Files are temporary stored on server and then on the desired location. The HTML Syntax that handle the uploading URL is :

    form action="http://localhost:5000/uploader" method="POST" enctype="multipart/form-data"

    Example:

    Python
    from flask import Flask, render_template, request
    from werkzeug.utils import secure_filename
    
    app = Flask(__name__)
    
    @app.route('/upload')
    def upload_file():
        return render_template('upload.html')
    
    @app.route('/uploader', methods=['GET', 'POST'])
    def upload_file():
        if request.method == 'POST':
          f = request.files['file'] 
          f.save(secure_filename(f.filename)) 
          return 'file uploaded successfully'
            
    if __name__ == '__main__': 
        app.run(debug = True)
    

    Sending Form Data to the HTML File of Server

    A Form in HTML is used to collect the information of required entries which are then forwarded and stored on the server. These can be requested to read or modify the form.

    Python
    from flask import Flask, render_template, request
    
    app = Flask(__name__)
    
    @app.route('/')
    def student():
        return render_template('student.html')
    
    @app.route('/result', methods=['POST', 'GET'])
    def result():
        if request.method == 'POST':
            result = request.form
            return render_template("result.html", result=result)
    
    if __name__ == '__main__':
    app.run(debug=True)
    

    Explanation:

    • '/' URL loads student.html, which contains a form.
    • form submits data to /result.
    • result() function:
      • Retrieves form data from request.form.
      • Stores it in a dictionary.
      • Sends it to result.html for rendering.

    HTML Code ( result.html )

    HTML
    <!doctype html> 
    <html> 
    <body> 
        
        <table border = 1> 
            {% for key, value in result.items() %} 
            
                <tr> 
                <th> {{ key }} </th> 
                <td> {{ value }} </td> 
                </tr> 
                
            {% endfor %} 
        </table> 
            
    </body> 
    </html> 
    

    HTML Code ( student.html )

    html
    <html> 
    <body> 
        
        <form action = "http://localhost:5000/result" method = "POST"> 
            <p>Name <input type = "text" name = "Name" /></p> 
            <p>Physics <input type = "text" name = "Physics" /></p> 
            <p>Chemistry <input type = "text" name = "chemistry" /></p> 
            <p>Maths <input type ="text" name = "Maths" /></p> 
            <p><input type = "submit" value = "submit" /></p> 
        </form> 
    </body> 
    </html> 
    
    input_values
    Input values to the HTML form
    Template_output
    Template as the output

    Alert messages in Flask

    Alert can be defined as a pop-up or a dialog box that appears on the web-page or like alert in JavaScript, which are used to inform the user. This in flask can be done by using the method flash() in Flask. It passes the message to the next template.

    Syntax: flash(message, category)

    Prameters:

    • message- actual text to be displayed
    • category(optional)- to render any error or info.

    Example

    Python
    from flask import Flask
    app = Flask(__name__)
    
    # /login display login form
    
    
    @app.route('/login', methods=['GET', 'POST'])
    # login function verify username and password
    def login():
        error = None
    
        if request.method == 'POST':
            if request.form['username'] != 'admin' or \
                    request.form['password'] != 'admin':
                error = 'Invalid username or password. Please try again !'
            else:
    
                # flashes on successful login
                flash('You were successfully logged in')
                return redirect(url_for('index'))
        return render_template('login.html', error=error)
    
    Create Quiz

    K

    kartikeya shukla 1
    Improve

    K

    kartikeya shukla 1
    Improve
    Article Tags :
    • Python

    Explore

      Python Fundamentals

      Python Introduction

      2 min read

      Input and Output in Python

      4 min read

      Python Variables

      4 min read

      Python Operators

      4 min read

      Python Keywords

      2 min read

      Python Data Types

      8 min read

      Conditional Statements in Python

      3 min read

      Loops in Python - For, While and Nested Loops

      5 min read

      Python Functions

      5 min read

      Recursion in Python

      4 min read

      Python Lambda Functions

      5 min read

      Python Data Structures

      Python String

      5 min read

      Python Lists

      4 min read

      Python Tuples

      4 min read

      Python Dictionary

      3 min read

      Python Sets

      6 min read

      Python Arrays

      7 min read

      List Comprehension in Python

      4 min read

      Advanced Python

      Python OOP Concepts

      11 min read

      Python Exception Handling

      5 min read

      File Handling in Python

      4 min read

      Python Database Tutorial

      4 min read

      Python MongoDB Tutorial

      3 min read

      Python MySQL

      9 min read

      Python Packages

      10 min read

      Python Modules

      3 min read

      Python DSA Libraries

      15 min read

      List of Python GUI Library and Packages

      3 min read

      Data Science with Python

      NumPy Tutorial - Python Library

      3 min read

      Pandas Tutorial

      4 min read

      Matplotlib Tutorial

      5 min read

      Python Seaborn Tutorial

      3 min read

      StatsModel Library - Tutorial

      3 min read

      Learning Model Building in Scikit-learn

      6 min read

      TensorFlow Tutorial

      2 min read

      PyTorch Tutorial

      6 min read

      Web Development with Python

      Flask Tutorial

      8 min read

      Django Tutorial | Learn Django Framework

      7 min read

      Django ORM - Inserting, Updating & Deleting Data

      4 min read

      Templating With Jinja2 in Flask

      6 min read

      Django Templates

      5 min read

      Build a REST API using Flask - Python

      3 min read

      Building a Simple API with Django REST Framework

      3 min read

      Python Practice

      Python Quiz

      1 min read

      Python Coding Practice

      1 min read

      Python Interview Questions and Answers

      15+ min read
    top_of_element && top_of_screen < bottom_of_element) || (bottom_of_screen > articleRecommendedTop && top_of_screen < articleRecommendedBottom) || (top_of_screen > articleRecommendedBottom)) { if (!isfollowingApiCall) { isfollowingApiCall = true; setTimeout(function(){ if (loginData && loginData.isLoggedIn) { if (loginData.userName !== $('#followAuthor').val()) { is_following(); } else { $('.profileCard-profile-picture').css('background-color', '#E7E7E7'); } } else { $('.follow-btn').removeClass('hideIt'); } }, 3000); } } }); } $(".accordion-header").click(function() { var arrowIcon = $(this).find('.bottom-arrow-icon'); arrowIcon.toggleClass('rotate180'); }); }); window.isReportArticle = false; function report_article(){ if (!loginData || !loginData.isLoggedIn) { const loginModalButton = $('.login-modal-btn') if (loginModalButton.length) { loginModalButton.click(); } return; } if(!window.isReportArticle){ //to add loader $('.report-loader').addClass('spinner'); jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', { PRACTICE_API_URL: practiceAPIURL, PRACTICE_URL:practiceURL },function(responseTxt, statusTxt, xhr){ if(statusTxt == "error"){ alert("Error: " + xhr.status + ": " + xhr.statusText); } }); }else{ window.scrollTo({ top: 0, behavior: 'smooth' }); $("#report_modal_content").show(); } } function closeShareModal() { const shareOption = document.querySelector('[data-gfg-action="share-article"]'); shareOption.classList.remove("hover_share_menu"); let shareModal = document.querySelector(".hover__share-modal-container"); shareModal && shareModal.remove(); } function openShareModal() { closeShareModal(); // Remove existing modal if any let shareModal = document.querySelector(".three_dot_dropdown_share"); shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" })); document.querySelector(".hover__share-modal-container").append( Object.assign(document.createElement('div'), { className: "share__modal" }), ); document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" })); const socialOptions = ["LinkedIn", "WhatsApp","Twitter", "Copy Link"]; socialOptions.forEach((socialOption) => { const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" }); const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` }); const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` }); const shareLink = (socialOption === "Copy Link") ? Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) : Object.assign(document.createElement('a'), { className: "link-container" }); if (socialOption === "LinkedIn") { shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`); shareLink.setAttribute('target', '_blank'); } if (socialOption === "WhatsApp") { shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`); shareLink.setAttribute('target', "_blank"); } if (socialOption === "Twitter") { shareLink.setAttribute('href', `https://twitter.com/intent/tweet?url=${window.location.href}`); shareLink.setAttribute('target', "_blank"); } shareLink.append(icon, socialText); socialContainer.append(shareLink); document.querySelector(".share__modal").appendChild(socialContainer); //adding copy url functionality if(socialOption === "Copy Link") { shareLink.addEventListener("click", function() { var tempInput = document.createElement("input"); tempInput.value = window.location.href; document.body.appendChild(tempInput); tempInput.select(); tempInput.setSelectionRange(0, 99999); // For mobile devices document.execCommand('copy'); document.body.removeChild(tempInput); this.querySelector(".share__option-text").textContent = "Copied" }) } }); // document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu")); } function toggleLikeElementVisibility(selector, show) { document.querySelector(`.${selector}`).style.display = show ? "block" : "none"; } function closeKebabMenu(){ document.getElementById("myDropdown").classList.toggle("show"); }
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Campus Training Program
  • Explore
  • POTD
  • Job-A-Thon
  • Blogs
  • Nation Skill Up
  • Tutorials
  • Programming Languages
  • DSA
  • Web Technology
  • AI, ML & Data Science
  • DevOps
  • CS Core Subjects
  • Interview Preparation
  • Software and Tools
  • Courses
  • ML and Data Science
  • DSA and Placements
  • Web Development
  • Programming Languages
  • DevOps & Cloud
  • GATE
  • Trending Technologies
  • Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
  • Preparation Corner
  • Interview Corner
  • Aptitude
  • Puzzles
  • GfG 160
  • System Design
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.
See More

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences