Returning rendered template with Flask-Restful shows HTML in browser

Question

I am new to Python and Flask. I have a templates folder in the the root of my application whic has two file.

<!DOCTYPE html>
   <html lang="en">
   <head>
     <title>{% block title %}{% endblock title %}</title>

     <link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/united/bootstrap.min.css" rel="stylesheet">
     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/ bootstrap-responsive.min.css" rel="stylesheet">
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div id="main">
    <div class="utility-nav navbar navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">
      {# Navbar goes here. #}
    </div>
   </div>
  </div>
  <div class="content container">
    {% block main %}{% endblock main %}
  </div>
  </div>
</body>
</html>

and

{% extends 'base.html' %}
{% block title %}Page Title{% endblock title %}
{% block main %}
    <h2>This is a child template.</h2>
{% endblock main %}

And then i have the following function

from flask.ext.restful import Resource,request,reqparse
from app.business.login import Login
from app.business.appointments import Appointments 
from app.models.models import User, Address,Appointment
from flask import render_template
    class AppointmentController(Resource):
        def __init__(self):
            pass
        def get(self):
        return render_template('index.html')

so when i start the server up and say http://0.0.0.0:5000/appointment i get

"<!DOCTYPE html>\n   <html lang=\"en\">\n   <head>\n     <title>Page Title</title>\n    \n     <link href=\"http://netdna.bootstrapcdn.com/bootswatch/2.3.2/united/bootstrap.min.css\" rel=\"stylesheet\">\n     <link href=\"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/ bootstrap-responsive.min.css\" rel=\"stylesheet\">\n     <script src=\"http://code.jquery.com/jquery-1.9.1.min.js\"></script>\n     <script src=\"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js\"></script>\n</head>\n<body>\n  <div id=\"main\">\n    <div class=\"utility-nav navbar navbar-fixed-top\">\n    <div class=\"navbar-inner\">\n    <div class=\"container\">\n      \n    </div>\n   </div>\n  </div>\n  <div class=\"content container\">\n    \n\t<h2>This is a child template.</h2>\n\n  </div>\n  </div>\n</body>\n</html>"

Meaning the templates are working but the browser is treating the response as a String and not html. What am i doing wrong.

score 68 · Answer 1 · edited Aug 09 '22 at 11:42

68

I modified the get accordingly. Setting the content type did the trick.

from flask import render_template, make_response

class AppointmentController(Resource):
    def __init__(self):
        pass
    def get(self):
        headers = {'Content-Type': 'text/html'}
        return make_response(render_template('index.html'),200,
                                              headers)

edited Aug 09 '22 at 11:42

Ahmad

8,811
11
76
141

answered Oct 11 '13 at 10:37

AndroidDev

15,993
29
85
119

Is the files extension `.html`? – tbicr Oct 11 '13 at 17:35
1

After tons of irrelevant posts & comments, this one does the trick. – CristianoYL Apr 15 '18 at 23:55
2

Import functions using `from flask import render_template, make_response` – Eido95 Feb 24 '19 at 11:21
or you can use the following code too: Response(render_template('index.html'), 200, mimetype='text/html') but first: from flask import Response – István Döbrentei Aug 03 '19 at 05:57
Nice answer, worked well to me, and if you want to pass some parameters you cand do: return make_response(render_template("index.html", profile=user_info, repos=repos), 200, headers) – tarcnux Aug 26 '19 at 00:01
@AndroidDev Thanks..You are saved my lots of time :) – Gajanan Jun 10 '22 at 03:42

abhishek kasana · Answer 2 · 2020-05-01T05:01:57.960

Solution -

def get(self):
    #headers = {'Content-Type': 'text/html'}
    #return make_response(render_template('login.html'), 200, headers)
    # or just                                                                                        
    return make_response(render_template('index.html'))

# or 

def get(self):
    #return Response(response=render_template('index.html'), status=200, mimetype="text/html")
    # or just
    return Response(response=render_template('index.html'))

Explanation -

The "render_template" function typically returns a string output of rendered template file.

Flask creates response objects for every request. Flask's application instance has a make_response() function, which takes the return value from the route function and populates a Response object with them.

Or we can return the Response class object explicitly as shown in the second example.

Response class has some default attributes if not explicitly provided due to this reason in above examples we can skip the status and headers params. A Response class looks something like,

class Response(BaseResponse):
   status = 200
   mimetype = "text/html"

Returning rendered template with Flask-Restful shows HTML in browser

2 Answers2

Linked

Related