2

Css and Javascript are not working on my website I'm using Flask framework on PythonAnywhere

Directory sturcture:

home/dubspher/mysite/

 - README.md 

 - app.py

 - index.html

Static/

 - css

 - fonts

 - images

 - js

 - sass

Original version of HTML:

<html>
    <head>
        <title>Dubspher.</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.dropotron.min.js"></script>
        <script src="js/jquery.scrollgress.min.js"></script>
        <script src="js/jquery.scrolly.min.js"></script>
        <script src="js/jquery.slidertron.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-layers.min.js"></script>
        <script src="js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="css/skel.css" />
            <link rel="stylesheet" href="css/style.css" />
            <link rel="stylesheet" href="css/style-xlarge.css" />
        </noscript>
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    </head>

Modified Version but not working:

<html>
    <head>
        <title>Dubspher.</title> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <noscript>
            <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
            <link href="{{ url_for('static', filename='css/skel.css') }}" rel="stylesheet">
            <link href="{{ url_for('static', filename='css/style-xlarge.css') }}" rel="stylesheet">
        </noscript>
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    </head>
    <body class="landing">
            <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js"') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dropotron.min.js"') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.scrollgress.min.js"') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.scrolly.min.js"') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.slidertron.min.js"') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/skel.min.js"') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/skel-layers.min.js"') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/init.js"') }}"></script>

As you can see I moved JS from as suggested on another post! And also moved all the stylesheet files to a new folder called static!

I cleared the cache on my browser but I can see that 404 errors in the inspect mode.

http://dubspher.pythonanywhere.com

App.py

from flask import Flask

# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_folder='/home/dubspher/mysite/')

@app.route('/')
def static_file():
    return app.send_static_file('index.html')

if __name__ == "__main__":
    app.run()
Improve this question
3
  • You didn't post your flask script but if you were following my example, you don't want the subfolder called static in your /home/dubspher/mysite directory. Your css files should be in /home/dubspher/mysite/css. But you'd really need to post your current flask script to be sure. Also you shouldn't be using url_for if you're working with the example that I posted. You'd use url_for if you were going to be using what the original post was about. In my example, url_for isn't necessary. Your src would simply be src="/static/js/jquery.js". Commented Jun 3, 2017 at 5:11
  • @clockwatcher I'm moving files using mv command in bash console so if it's not a problem I'll just keep the static folder and add /static in the path for stylesheets, I added url_for because it worked for someone else! I really appreciate your help. Flask script added! Commented Jun 3, 2017 at 5:23
  • It's better to have all your static resources in a static subfolder. So the way you have it laid in your question now is better designed. So stick with it. You just need to move your index.html folder into the static folder and update the path to your static_folder. Technically, you wouldn't need to use the static_folder parameter at all with the way you have it laid out now. As "./static" relative to app.py is the way flask defaults. All you would need to do is set your static_url_path. But I don't want to confuse you. Give the answer below a try. Commented Jun 3, 2017 at 5:32

1 Answer 1

Reset to default
4

With the files laid out like you currently have them, move your index.html file into the root of static subfolder.

home/dubspher/mysite/

 - README.md 

 - app.py


Static/
 - index.html 

 - css

 - fonts

 - images

 - js

 - sass

And use the following app.py

from flask import Flask

# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path="/static", static_folder='/home/dubspher/mysite/static')

@app.route('/')
def static_file():
    return app.send_static_file('index.html')

if __name__ == "__main__":
    app.run()

And change your index.html links to:

<html>
    <head>
        <title>Dubspher.</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="/static/js/jquery.min.js"></script>
        <script src="/static/js/jquery.dropotron.min.js"></script>
        <script src="/static/js/jquery.scrollgress.min.js"></script>
        <script src="/static/js/jquery.scrolly.min.js"></script>
        <script src="/static/js/jquery.slidertron.min.js"></script>
        <script src="/static/js/skel.min.js"></script>
        <script src="/static/js/skel-layers.min.js"></script>
        <script src="/static/js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="/static/css/skel.css" />
            <link rel="stylesheet" href="/static/css/style.css" />
            <link rel="stylesheet" href="/static/css/style-xlarge.css" />
        </noscript>
        <!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie/v9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="/static/css/ie/v8.css" /><![endif]-->
    </head>

Your stylesheets are referenced in your javascript. Modify init.js so that it references the correct paths:

        global: { href: '/static/css/style.css', containers: 1400, grid: { gutters: ['2em', 0] } },
        xlarge: { media: '(max-width: 1680px)', href: '/static/css/style-xlarge.css', containers: 1200 },
        large: { media: '(max-width: 1280px)', href: '/static/css/style-large.css', containers: 960, grid: { gutters: ['1.5em', 0] }, viewport: { scalable: false } },
        medium: { media: '(max-width: 980px)', href: '/static/css/style-medium.css', containers: '90%', grid: { zoom: 2 } },
        small: { media: '(max-width: 736px)', href: '/static/css/style-small.css', containers: '90%!', grid: { gutters: ['1.25em', 0], zoom: 3 } },
        xsmall: { media: '(max-width: 480px)', href: '/static/css/style-xsmall.css' }
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

If Static is really capitalized on your filesystem, change it to lowercase static. Because I have it lowercase in all the code references.
I guess JS is working but CSS still not found (404) You suggest to use src= in the comment but in your reply you have used href= is that correct? static folder is not capitalized. Thanks!
As you can see I can acces the files directly via url dubspher.pythonanywhere.com/static/css/style.css
Yep. Which means it's working. The problem is that you're loading your style sheets in your javascript code in init.js and you didn't update it. The stylesheets in your index.html aren't actually used --- notice the <noscript> tags surrounding them. I added some lines to your init.js to the answer above.
I just figure it out while browsing in other forums! Thanks so much!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.