Why can't I load a Processing.js sketch with Flask?

Question

I'm trying to use processing.js on my website but I keep getting the error: "processing.min.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)"

I'm using Flask's render_template() to load in the test.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Processing.js</title>
    <script src="processing.min.js"></script>
  </head>
  <body>
    <h1>Processing.js</h1>
    <script type="text/processing">
    void setup() {
        size(400,200);
        textAlign(CENTER, CENTER);
        background(0,0,100);
        fill(255,230,75);
        text("Processing.js", width/2, height/2);
        noLoop();
      }

      void draw() {
      }

      void mouseMoved() {
        stroke(255);
        point(mouseX, mouseY);
        redraw();
      }

      void mousePressed() {
        line(0,mouseY,width,mouseY);
        line(mouseX,0,mouseX,height);
        println(mouseX, mouseY);
      }
    </script>
    <canvas></canvas>
  </body>
</html>

The flask file that I then run is simply:

from flask import Flask,request,render_template
app = Flask(__name__)

@app.route("/")
def hello():

    return render_template('test.html')

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

When I run this on the local host: http://127.0.0.1:5000/ I see the header Processing.js but no actual canvas element.

score 1 · Answer 1 · edited May 23 '17 at 11:59

According to Flask docs

Dynamic web applications also need static files. That’s usually where the CSS and JavaScript files are coming from. Ideally your web server is configured to serve them for you, but during development Flask can do that as well. Just create a folder called static in your package or next to your module and it will be available at /static on the application.

And as davidism commented, use the url_for template method to reference files

<script type="text/javascript" src="url_for('static', filename='processing.js')"></script>

Assuming that your static files (.js and .css) are in static folder.

Why can't I load a Processing.js sketch with Flask?

1 Answers1