librelist archives

« back to archive

Where to put Javascript files?

Where to put Javascript files?

From:
David Li
Date:
2014-09-28 @ 04:11
Hi,

I am totally new here. I am using flask to learn web services.  Here is my
Hello World version using Flask.

My flask directory on the server looks like:

..../flask/my_test_main.py
             /templates/test-js.html
             /static/test.js


So my_test_main.py is the Flask code in Python to route to test-js.html
which uses test.js.

The Flask code looks like:

#
# Test js
#
@app.route('/testjs')
def testjs():
    return render_template("test-js.html")


The "test-js.html" looks like:

<body>
    <h1> Application Testing JS! </h1>
    <script type="text/javascript" src="
http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
  </body>


And the "test.js" is:

var main = function () {
    "use strict";
    window.alert("Hello JS World!");
};


$(document).ready(main);


I read somewhere in the doc that test.js should be in the "static"
directory. But when I access the page: http://myserver/testjs, the html is
displayed correctly but the test.js never gets loaded and I see the 404
error:

"GET /test.js HTTP/1.1" 404

Can anyone show me what's went wrong here in loading the Javascript file?

Thanks.

Re: [flask] Where to put Javascript files?

From:
Mehdy Khoshnoody
Date:
2014-09-28 @ 04:59
The problem is that it cannot find the webpage you want.
you are requesting for /test.js
but the route that you defined to handle this is /testjs
in addition it's a good idea to define templates and statics directory when
creating your flask application
Also the path you defined for <script src=test.js"> is wrong.
it means that the html file and the test.js are in the same directory. it's
recommended to use url_for and jinja.

Good Luck

On Sun, Sep 28, 2014 at 7:41 AM, David Li <dlipubkey@gmail.com> wrote:

> Hi,
>
> I am totally new here. I am using flask to learn web services.  Here is my
> Hello World version using Flask.
>
> My flask directory on the server looks like:
>
> ..../flask/my_test_main.py
>              /templates/test-js.html
>              /static/test.js
>
>
> So my_test_main.py is the Flask code in Python to route to test-js.html
> which uses test.js.
>
> The Flask code looks like:
>
> #
> # Test js
> #
> @app.route('/testjs')
> def testjs():
>     return render_template("test-js.html")
>
>
> The "test-js.html" looks like:
>
> <body>
>     <h1> Application Testing JS! </h1>
>     <script type="text/javascript&quo t; src="
> http://code.jquery.com/jquery-2.0.3.min.js"></script>
>     <script type="text/javascript" src="test.js"></script>
>   </body>
>
>
> And the "test.js" is:
>
> var main = function () {
>     "use strict";
>     window.alert("Hello JS World!");
> };
>
>
> $(document).ready(main);
>
>
> I read somewhere in the doc that test.js should be in the "static"
> directory. But when I access the page: http://myserver/testjs, the html
> is displayed correctly but the test.js never gets loaded and I see the 404
> error:
>
> "GET /test.js HTTP/1.1" 40 4
>
> Can anyone show me what's went wrong here in loading the Javascript file?
>
> Thanks.
>
>

Re: [flask] Where to put Javascript files?

From:
Charles
Date:
2014-09-28 @ 09:24
On Sun, Sep 28, 2014 at 11:11 AM, David Li <dlipubkey@gmail.com> wrote:
> Hi,
>
> I am totally new here. I am using flask to learn web services.  Here is my
> Hello World version using Flask.
>
> My flask directory on the server looks like:
>
> ..../flask/my_test_main.py
>              /templates/test-js.html
>              /static/test.js
>
>
> So my_test_main.py is the Flask code in Python to route to test-js.html
> which uses test.js.
>
> The Flask code looks like:
>
> #
> # Test js
> #
> @app.route('/testjs')
> def testjs():
>     return render_template("test-js.html")
>
>
> The "test-js.html" looks like:
>
> <body>
>     <h1> Application Testing JS! </h1>
>     <script type="text/javascript&quo t;
> src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
>     <script type="text/javascript" src="test.js"></script>

Should be

<script src="{{ url_for('static', filename='test.js' }}"></script>

And this will output

<script src="/static/test.js"></script>

Of course you can write /static/test.js directly, but using url_for is
better in case you want to change /static to /public, etc. later. The
path where static files and the route name (/static) is configurable
in flask.

Re: [flask] Where to put Javascript files?

From:
David Li
Date:
2014-09-28 @ 14:05
Hi Charles,

You are right on!
I misunderstood the doc. The doc says I should put my CSS and JS files in
'static'. So I thought Flask has a way to look for these in 'static'
directory by default.
Thanks!

David

On Sun, Sep 28, 2014 at 2:24 AM, Charles <peacech@gmail.com> wrote:

> On Sun, Sep 28, 2014 at 11:11 AM, David Li <dlipubkey@gmail.com> wrote:
> > Hi,
> >
> > I am totally new here. I am using flask to learn web services.  Here is
> my
> > Hello World version using Flask.
> >
> > My flask directory on the server looks like:
> >
> > ..../flask/my_test_main.py
> >              /templates/test-js.html
> >              /static/test.js
> >
> >
> > So my_test_main.py is the Flask code in Python to route to test-js.html
> > which uses test.js.
> >
> > The Flask code looks like:
> >
> > #
> > # Test js
> > #
> > @app.route('/testjs')
> > def testjs():
> >     return render_template("test-js.html")
> >
> >
> > The "test-js.html" looks like:
> >
> > <body>
> >     <h1> Application Testing JS! </h1>
> >     <script type="text/javascript&quo t;
> > src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
> >     <script type="text/javascript" src="test.js"></script>
>
> Should be
>
> <script src="{{ url_for('static', filename='test.js' }}"></script>
>
> And this will output
>
> <script src="/static/test.js"></script>
>
> Of course you can write /static/test.js directly, but using url_for is
> better in case you want to change /static to /public, etc. later. The
> path where static files and the route name (/static) is configurable
> in flask.
>

Re: [flask] Where to put Javascript files?

From:
David Li
Date:
2014-09-28 @ 14:09
And furthermore, I thought this is similar to the "template" directory
where I store the HTML files. I didn't do anything special in Flask code to
point to "template" directory, the only thing I needed is render_template()
and it automatically knew where to look for HTML files.

On Sun, Sep 28, 2014 at 7:05 AM, David Li <dlipubkey@gmail.com> wrote:

> Hi Charles,
>
> You are right on!
> I misunderstood the doc. The doc says I should put my CSS and JS files in
> 'static'. So I thought Flask has a way to look for these in 'static'
> directory by default.
> Thanks!
>
> David
>
> On Sun, Sep 28, 2014 at 2:24 AM, Charles <peacech@gmail.com> wrote:
>
>> On Sun, Sep 28, 2014 at 11:11 AM, David Li <dlipubkey@gmail.com> wrote:
>> > Hi,
>> >
>> > I am totally new here. I am using flask to learn web services.  Here is
>> my
>> > Hello World version using Flask.
>> >
>> > My flask directory on the server looks like:
>> >
>> > ..../flask/my_test_main.py
>> >              /templates/test-js.html
>> >              /static/test.js
>> >
>> >
>> > So my_test_main.py is the Flask code in Python to route to test-js.html
>> > which uses test.js.
>> >
>> > The Flask code looks like:
>> >
>> > #
>> > # Test js
>> > #
>> > @app.route('/testjs')
>> > def testjs():
>> >     return render_template("test-js.html")
>> >
>> >
>> > The "test-js.html" looks like:
>> >
>> > <body>
>> >     <h1> Application Testing JS! </h1>
>> >     <script type="text/javascript&quo t;
>> > src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
>> >     <script type="text/javascript" src="test.js"></script>
>>
>> Should be
>>
>> <script src="{{ url_for('static', filename='test.js' }}"></script>
>>
>> And this will output
>>
>> <script src="/static/test.js"></script>
>>
>> Of course you can write /static/test.js directly, but using url_for is
>> better in case you want to change /static to /public, etc. later. The
>> path where static files and the route name (/static) is configurable
>> in flask.
>>
>
>

Re: [flask] Where to put Javascript files?

From:
Charles
Date:
2014-09-29 @ 00:54
On Sun, Sep 28, 2014 at 9:09 PM, David Li <dlipubkey@gmail.com> wrote:
> And furthermore, I thought this is similar to the "template" directory where
> I store the HTML files. I didn't do anything special in Flask code to point
> to "template" directory, the only thing I needed is render_template() and it
> automatically knew where to look for HTML files.

It is different.

The templates directory is the template root. If you write
render_template('dir/template.html.jinja')
it will be searched relative to templates/. It is processed by the
jinja template engine.

The static directory is the root for static files. It is processed by
the static view. There is a builtin
view called static which is by default mounted in /static/ and look
for  files in the static directory.

Re: [flask] Where to put Javascript files?

From:
David Li
Date:
2014-09-28 @ 21:48
I have two follow-on questions:

1. If I also put my CSS file in 'static' directory, should I use this in my
HTML file:

<link rel="stylesheet" href={{url_for('static',filename="david.css")}}
type="text/css" media="screen" />


2. When I refresh my test-js.html page, I got 304 error. From what I
understand, it's about the content not changed since last update.  Because
of this error, the JS window won't show up again. Is there anyway to avoid
this?

Thanks.


On Sun, Sep 28, 2014 at 7:09 AM, David Li <dlipubkey@gmail.com> wrote:

> And furthermore, I thought this is similar to the "template" directory
> where I store the HTML files. I didn't do anything special in Flask code to
> point to "template" directory, the only thing I needed is render_template()
> and it automatically knew where to look for HTML files.
>
> On Sun, Sep 28, 2014 at 7:05 AM, David Li <dlipubkey@gmail.com> wrote:
>
>> Hi Charles,
>>
>> You are right on!
>> I misunderstood the doc. The doc says I should put my CSS and JS files in
>> 'static'. So I thought Flask has a way to look for these in 'static'
>> directory by default.
>> Thanks!
>>
>> David
>>
>> On Sun, Sep 28, 2014 at 2:24 AM, Charles <peacech@gmail.com> wrote:
>>
>>> On Sun, Sep 28, 2014 at 11:11 AM, David Li <dlipubkey@gmail.com> wrote:
>>> > Hi,
>>> >
>>> > I am totally new here. I am using flask to learn web services.  Here
>>> is my
>>> > Hello World version using Flask.
>>> >
>>> > My flask directory on the server looks like:
>>> >
>>> > ..../flask/my_test_main.py
>>> >              /templates/test-js.html
>>> >              /static/test.js
>>> >
>>> >
>>> > So my_test_main.py is the Flask code in Python to route to test-js.html
>>> > which uses test.js.
>>> >
>>> > The Flask code looks like:
>>> >
>>> > #
>>> > # Test js
>>> > #
>>> > @app.route('/testjs')
>>> > def testjs():
>>> >     return render_template("test-js.html")
>>> >
>>> >
>>> > The "test-js.html" looks like:
>>> >
>>> > <body>
>>> >     <h1> Application Testing JS! </h1>
>>> >     <script type="text/javascript&quo t;
>>> > src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
>>> >     <script type="text/javascript" src="test.js"></script>
>>>
>>> Should be
>>>
>>> <script src="{{ url_for('static', filename='test.js' }}"></script>
>>>
>>> And this will output
>>>
>>> <script src="/static/test.js"></script>
>>>
>>> Of course you can write /static/test.js directly, but using url_for is
>>> better in case you want to change /static to /public, etc. later. The
>>> path where static files and the route name (/static) is configurable
>>> in flask.
>>>
>>
>>
>

Re: [flask] Where to put Javascript files?

From:
Charles
Date:
2014-09-29 @ 00:50
On Mon, Sep 29, 2014 at 4:48 AM, David Li <dlipubkey@gmail.com> wrote:
> I have two follow-on questions:
>
> 1. If I also put my CSS file in 'static' directory, should I use this in my
> HTML file:
>
> <link rel="stylesheet" href={{url_for('static',filename="david.css")}}
> type="text/css" media="screen" />

All files in static can be references that way. I wouldn't call it
should, but it's the recommended way.

> 2. When I refresh my test-js.html page, I got 304 error. From what I
> understand, it's about the content not changed since last update.  Because
> of this error, the JS window won't show up again. Is there anyway to avoid
> this?

test-js.html is a template. It is not accessed by the browser but
rendered by the server into a HTML page.
A 304 response is processed by the browser using the browser cache so
it should not matter to the user.
You should not see a 304 response unless you manually modify the
request header adding an If-Modified-Since line.

Re: [flask] Where to put Javascript files?

From:
Davi Garcia
Date:
2014-09-29 @ 13:08
On Sun, Sep 28, 2014 at 9:50 PM, Charles <peacech@gmail.com> wrote:
> A 304 response is processed by the browser using the browser cache so
> it should not matter to the user.
> You should not see a 304 response unless you manually modify the
> request header adding an If-Modified-Since line.

What about if the we change the header of response, applying a
no-cache? For example:

response = Response(data)
response.headers["Cache-Control"] = "no-cache"

Re: [flask] Where to put Javascript files?

From:
Jon Ribbens
Date:
2014-09-29 @ 14:08
On Mon, Sep 29, 2014 at 10:08:37AM -0300, Davi Garcia wrote:
> On Sun, Sep 28, 2014 at 9:50 PM, Charles <peacech@gmail.com> wrote:
> > A 304 response is processed by the browser using the browser cache so
> > it should not matter to the user.
> > You should not see a 304 response unless you manually modify the
> > request header adding an If-Modified-Since line.
> 
> What about if the we change the header of response, applying a
> no-cache? For example:
> 
> response = Response(data)
> response.headers["Cache-Control"] = "no-cache"

Then the browser will not cache the response, so when it requests the
same URL again it will not send an If-Modified-Since header, so the
web server will not respond with 304.