Trouble with hosting template files using Flask [duplicate]












0















This question already has an answer here:




  • How to serve static files in Flask

    13 answers



  • Link to Flask static files with url_for

    2 answers




I want to host 3 files that are in /Project/templates in app.py using the Flask framework. Here is what it looks like.



Project
├── templates
│ ├── index.html
│ ├── index.js
| └── style.css
├── app.py


How do I host these files in app.py using the Flask framework? Here is my attempt at it, but it is giving me a blank page.



from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index_html():
return render_template('index.html')

@app.route('/index.js')
def index_js():
return render_template('index.js')

@app.route('/style.css')
def style_css():
return render_template('style.css')

if __name__ == '__main__':
app.run(debug=True)









share|improve this question













marked as duplicate by davidism flask
Users with the  flask badge can single-handedly close flask questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 at 14:42


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.











  • 3




    In development, use the static folder, in production use your webserver.
    – Klaus D.
    Nov 23 at 2:39
















0















This question already has an answer here:




  • How to serve static files in Flask

    13 answers



  • Link to Flask static files with url_for

    2 answers




I want to host 3 files that are in /Project/templates in app.py using the Flask framework. Here is what it looks like.



Project
├── templates
│ ├── index.html
│ ├── index.js
| └── style.css
├── app.py


How do I host these files in app.py using the Flask framework? Here is my attempt at it, but it is giving me a blank page.



from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index_html():
return render_template('index.html')

@app.route('/index.js')
def index_js():
return render_template('index.js')

@app.route('/style.css')
def style_css():
return render_template('style.css')

if __name__ == '__main__':
app.run(debug=True)









share|improve this question













marked as duplicate by davidism flask
Users with the  flask badge can single-handedly close flask questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 at 14:42


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.











  • 3




    In development, use the static folder, in production use your webserver.
    – Klaus D.
    Nov 23 at 2:39














0












0








0








This question already has an answer here:




  • How to serve static files in Flask

    13 answers



  • Link to Flask static files with url_for

    2 answers




I want to host 3 files that are in /Project/templates in app.py using the Flask framework. Here is what it looks like.



Project
├── templates
│ ├── index.html
│ ├── index.js
| └── style.css
├── app.py


How do I host these files in app.py using the Flask framework? Here is my attempt at it, but it is giving me a blank page.



from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index_html():
return render_template('index.html')

@app.route('/index.js')
def index_js():
return render_template('index.js')

@app.route('/style.css')
def style_css():
return render_template('style.css')

if __name__ == '__main__':
app.run(debug=True)









share|improve this question














This question already has an answer here:




  • How to serve static files in Flask

    13 answers



  • Link to Flask static files with url_for

    2 answers




I want to host 3 files that are in /Project/templates in app.py using the Flask framework. Here is what it looks like.



Project
├── templates
│ ├── index.html
│ ├── index.js
| └── style.css
├── app.py


How do I host these files in app.py using the Flask framework? Here is my attempt at it, but it is giving me a blank page.



from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index_html():
return render_template('index.html')

@app.route('/index.js')
def index_js():
return render_template('index.js')

@app.route('/style.css')
def style_css():
return render_template('style.css')

if __name__ == '__main__':
app.run(debug=True)




This question already has an answer here:




  • How to serve static files in Flask

    13 answers



  • Link to Flask static files with url_for

    2 answers








javascript python html css flask






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 23 at 2:21









Anonymous

685




685




marked as duplicate by davidism flask
Users with the  flask badge can single-handedly close flask questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 at 14:42


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.






marked as duplicate by davidism flask
Users with the  flask badge can single-handedly close flask questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 at 14:42


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.










  • 3




    In development, use the static folder, in production use your webserver.
    – Klaus D.
    Nov 23 at 2:39














  • 3




    In development, use the static folder, in production use your webserver.
    – Klaus D.
    Nov 23 at 2:39








3




3




In development, use the static folder, in production use your webserver.
– Klaus D.
Nov 23 at 2:39




In development, use the static folder, in production use your webserver.
– Klaus D.
Nov 23 at 2:39












1 Answer
1






active

oldest

votes


















1














I believe that index.js and style.css are static files. So to access them, create a folder static in the same directory as templates. So the structure looks like this



Project
├── templates
│ └── index.html
├── static
│ ├── index.js
│ └── style.css
└── app.py


and then in the templates, for example, index.html, include them by



<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">





share|improve this answer




























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    I believe that index.js and style.css are static files. So to access them, create a folder static in the same directory as templates. So the structure looks like this



    Project
    ├── templates
    │ └── index.html
    ├── static
    │ ├── index.js
    │ └── style.css
    └── app.py


    and then in the templates, for example, index.html, include them by



    <script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">





    share|improve this answer


























      1














      I believe that index.js and style.css are static files. So to access them, create a folder static in the same directory as templates. So the structure looks like this



      Project
      ├── templates
      │ └── index.html
      ├── static
      │ ├── index.js
      │ └── style.css
      └── app.py


      and then in the templates, for example, index.html, include them by



      <script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
      <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">





      share|improve this answer
























        1












        1








        1






        I believe that index.js and style.css are static files. So to access them, create a folder static in the same directory as templates. So the structure looks like this



        Project
        ├── templates
        │ └── index.html
        ├── static
        │ ├── index.js
        │ └── style.css
        └── app.py


        and then in the templates, for example, index.html, include them by



        <script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">





        share|improve this answer












        I believe that index.js and style.css are static files. So to access them, create a folder static in the same directory as templates. So the structure looks like this



        Project
        ├── templates
        │ └── index.html
        ├── static
        │ ├── index.js
        │ └── style.css
        └── app.py


        and then in the templates, for example, index.html, include them by



        <script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 23 at 5:49









        illusion

        1468




        1468















            Popular posts from this blog

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Calculate evaluation metrics using cross_val_predict sklearn

            Insert data from modal to MySQL (multiple modal on website)