javascript html http flask chessboard.js

chessboard.js board image is not showing up in browser

I am trying to build a very simple webapp with Flask to play chess against my python chess engines. However, I am new to javascript, html and css and I cannot get the chessboard.js board image to show up in my browser. Here is my html body code snippet (The script link lines are actually located in the head section). Very simple, no input or anything yet. I just want to get the image to show up! '''

  <link rel="stylesheet" href="css/chessboard-0.3.0.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/chessboard-0.3.0.min.js"></script>
  <div id="board"></div>
  <button id="startBtn">Start Position</button>
  <script>
      var board = Chessboard('board', 'start')
      $('#startBtn').on('click', board.start)          
  </script>

I have included all the required script links (or so I believe after reading countless tutorials and documentation) and I also have all the css/, js/ and img/ folders from the latest chessboard.js download in the same folder as this html file (just like I read in a tutorial).

All that shows up in my browser when you open it with Flask is the text and the "Start Position" Button (no effect when you click it).

Why does the chessboard image not show up in my browser (Firefox)?

Do I need to modify the img folders in any way or possibly the .js file? Is there anything wrong with my HTML or do I need to do something extra with JS?

EDIT: I just realized that I am now getting these Errors when starting up from Flask:

"GET /css/chessboard-0.3.0.min.css HTTP/1.1" 404 -

"GET /js/chessboard-0.3.0.min.js HTTP/1.1" 404 -

However, when I just open the HTML file in my browser, it works just fine (after I fixed some permission issues) and the board image shows up. It seems to be a problem with the Flask implementation, so here is my code for that

app = Flask(__name__)

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

@app.route("/chessgame")
def chessgame():
    return render_template('chessgame.html')


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

To sum up, I've tried everything I could think of and spent way to many hours on this, so any help is very much appreciated!!

Best regards,

Tim

Solution

So I finally solved it!

It turned out to be a combination of three issues:

Permission issue - make sure to set the permission of all the js and css files to executable with chmod 755
html and flask integration issue: instead of loading the scripts like I did, flask apparently wants all css and js files in a /static directory and imported like this: <script src="{{ url_for('static', filename='js/chessboard-1.0.0.js') }}"></script>
after I fixed all of that, the small board piece images inside the chessboard did not show up. Yu have to navigate into the chessboard-1.0.0.js file and change line 579 from config.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png' to config.pieceTheme = 'static/img/chesspieces/wikipedia/{piece}.png'

This fixed all of the problems I was having. The chessboard.js does now work fine with flask and looks super cool!

Best regards, Tim