Python Flask page not rendering with external CSS and Javascript

Question

I created a Python Flask app with a template that had the HTML/CSS/Javascript in one HTML file. This rendered fine.

I would like to separate the CSS and Javascript files into thier own files. I did this and modified the HTML file to accomodate the new locations of the CSS and Javascript files.

However the page will not render. I get a 'Not Found' error page when I open it.

I would like to separate the CSS and Javascript so that I play around with the Javascript without having the manage the HMTL and CSS. Any help would be appreciated.

Here is the original HTML file that worked:

{% extends "base.html" %}

{% block title %}test.com{% endblock %}

{% block page_content %}

    <title>cytoscape-dagre.js demo</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

    <!-- for testing with local version of cytoscape.js -->
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>

    <style>
        body {
            font-family: helvetica;
            font-size: 14px;
        }

        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
        }

        h1 {
            opacity: 0.5;
            font-size: 1em;
        }
    </style>

    <script>
        $(function(){

            var cy = window.cy = cytoscape({
                container: document.getElementById('cy'),

      boxSelectionEnabled: false,
      autounselectify: true,

                layout: {
                    name: 'dagre'
                },

                style: [
                    {
                        selector: 'node',
                        style: {
                            'content': 'data(id)',
                            'text-opacity': 0.5,
                            'text-valign': 'center',
                            'text-halign': 'left',
                            'background-color': '#11479e'
                        }
                    },

                    {
                        selector: 'edge',
                        style: {
                            'width': 4,
                            'target-arrow-shape': 'triangle',
                            'line-color': '#9dbaea',
                            'target-arrow-color': '#9dbaea',
                            'curve-style': 'bezier'
                        }
                    }
                ],

                elements: {
                    nodes: [
                        { data: { id: 'n0' } },
                        { data: { id: 'n1' } },
                        { data: { id: 'n2' } },
                        { data: { id: 'n3' } },
                        { data: { id: 'n4' } },
                        { data: { id: 'n5' } },
                        { data: { id: 'n6' } },
                        { data: { id: 'n7' } },
                        { data: { id: 'n8' } },
                        { data: { id: 'n9' } },
                        { data: { id: 'n10' } },
                        { data: { id: 'n11' } },
                        { data: { id: 'n12' } },
                        { data: { id: 'n13' } },
                        { data: { id: 'n14' } },
                        { data: { id: 'n15' } },
                        { data: { id: 'n16' } }
                    ],
                    edges: [
                        { data: { source: 'n0', target: 'n1' } },
                        { data: { source: 'n1', target: 'n2' } },
                        { data: { source: 'n1', target: 'n3' } },
                        { data: { source: 'n4', target: 'n5' } },
                        { data: { source: 'n4', target: 'n6' } },
                        { data: { source: 'n6', target: 'n7' } },
                        { data: { source: 'n6', target: 'n8' } },
                        { data: { source: 'n8', target: 'n9' } },
                        { data: { source: 'n8', target: 'n10' } },
                        { data: { source: 'n11', target: 'n12' } },
                        { data: { source: 'n12', target: 'n13' } },
                        { data: { source: 'n13', target: 'n14' } },
                        { data: { source: 'n13', target: 'n15' } },
                    ]
                },
            });

        });
    </script>


<body>
    <h1>cytoscape-dagre demo</h1>

    <div id="cy"></div>

</body>

{% endblock %}

While here is the new code that is not working as I expect:

{% extends "base.html" %}

{% block title %}test.com{% endblock %}

{% block page_content %}


    <title>cytoscape-dagre.js demo</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

    <!-- for testing with local version of cytoscape.js -->
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>

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

    <body>
         <h1>cytoscape-dagre demo</h1>

         <div id="cy"></div>

    </body>

{% endblock %}

Are you getting the "Not found" from Flask or from the URLs? When you view source, are you seeing the URLs you expect? — cwallenpoole, Nov 28 '16 at 14:10
Please, could you tell us more about the environment?: * What are the url/path of the main page and also the css/js files? * Are the request direct or througt any kind of proxy? — pbacterio, Nov 29 '16 at 10:25

score 3 · Accepted Answer · answered Nov 23 '16 at 14:11

3

The solution was to make sure the flask application had a view.

The following code was missing from the view.py file.

@main.route('/graph4', methods=['GET'])
def graph4():
    return render_template('graph4.html')

Otherwise the html, js, and css was correct.

answered Nov 23 '16 at 14:11

ForgottenKahz

268
3
24

I was about to suggest this in the above comment. – cwallenpoole Nov 28 '16 at 14:11

score 1 · Answer 2 · answered Nov 22 '16 at 21:15

1

Close those spaces after the equal sign after rel, type, and href.

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

to

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

Looks as if that is the culprit.

answered Nov 22 '16 at 21:15

[link=http://stackoverflow.com/questions/22259847/application-not-picking-up-css-file-flask-python?answertab=votes#tab-top]Look here and see if this doesn't help[/link], I'll look around a little more for a solution. – Nov 23 '16 at 18:21

score 0 · Answer 3 · answered Nov 22 '16 at 21:19

0

The only difference i see is that your script appears after style in working case and before it in broken.

answered Nov 22 '16 at 21:19

Gray Fox

357
3
10

It may for two scripts but not for css I think. The only other possible issue is wrong path but I guess you wouldn't make a question about this. – Gray Fox Nov 23 '16 at 05:06

Python Flask page not rendering with external CSS and Javascript

3 Answers3