{"id":703,"date":"2017-06-16T23:42:51","date_gmt":"2017-06-16T15:42:51","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=703"},"modified":"2018-09-05T00:32:54","modified_gmt":"2018-09-04T16:32:54","slug":"serve-static-files-python-3-flask","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/serve-static-files-python-3-flask\/","title":{"rendered":"How to serve static files with Python 3 + Flask"},"content":{"rendered":"

Python Flask is a good microframework for building a minimal viable product to validate our ideas on the Internet. A modern web application encompasses documents that tell the web browser how to build the visuals of our web application and communicate with our server backend. Such documents are usually static in nature and are served as they are to the web browser without any processing from the server end. <\/p>\n

Comparing setting up an instance of the Nginx server with adding code in our Flask application, the latter can be a more convenient way for us to realise our minimal viable product. This post documents the proof of concept that I did to serve static files with Python 3 and Flask.<\/p>\n

Sample code to serve static files with Python 3 + Flask<\/h2>\n

The following is the code that I wrote to serve static files that are contained in a directory that is named as \"static\":<\/p>\n

\r\nimport os\r\n\r\nfrom flask import Flask\r\nfrom flask import send_from_directory\r\n\r\nstatic_file_dir = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'static')\r\napp = Flask(__name__)\r\n\r\n\r\n@app.route('\/dir', methods=['GET'])\r\ndef serve_dir_directory_index():\r\n    return send_from_directory(static_file_dir, 'index.html')\r\n\r\n\r\n@app.route('\/dir\/<path:path>', methods=['GET'])\r\ndef serve_file_in_dir(path):\r\n\r\n    if not os.path.isfile(os.path.join(static_file_dir, path)):\r\n        path = os.path.join(path, 'index.html')\r\n\r\n    return send_from_directory(static_file_dir, path)\r\n\r\napp.run(host='0.0.0.0',port=8080)\r\n<\/pre>\n
For this code to work, I had placed it in the same directory level as the directory that is named as \"static\". The first 3 statements imported the os<\/code><\/a> module, the flask.Flask<\/code><\/a> class and flask.send_from_directory<\/code><\/a> function from flask. <\/p>\n
To get the directory that contains the static files, I first get the directory path of the Python file that contains this code<\/a> by calling os.path.dirname(os.path.realpath(__file__))<\/code>. I then call os.path.join<\/code><\/a> to construct the path to the directory that contains the static files and store it in the static_file_dir<\/code> variable.<\/p>\n
I then create an instance of the Flask class for realising the web server and made it available via the app<\/code> variable. With the app variable, I then decorated the serve_dir_directory_index<\/code> function and the serve_file_in_dir<\/code> function with app.route<\/a>. That would cause Flask to direct HTTP GET requests for \/dir<\/code> to serve_dir_directory_index<\/code> and HTTP GET requests for \/dir\/*<\/code> to serve_file_in_dir<\/code>.<\/p>\n
Inside serve_dir_directory_index<\/code>, I call send_from_directory<\/code> to attempt to return a index.html<\/code> that resides in the root level of static_file_dir<\/code>. This would emulate the behaviour of returning a Webserver directory index for \/dir<\/code>.<\/p>\n
Inside serve_file_in_dir<\/code>, I first check whether the requested uri corresponds to an actual file. If not, it would mean that the HTTP GET request is directed at a directory within \/dir<\/code>. For such a case, I changed the path to point to a index.html<\/code> that is located at the root level of that directory. Finally, I used send_from_directory<\/code> to attempt to return the corresponding file back to the web browser.<\/p>\n
The last statement, app.run(host='0.0.0.0',port=8080)<\/code>, starts the web server that listens on port 8080 for incoming HTTP requests.<\/p>\n
Use Nginx for serving files from a static website instead of a Python 3 Flask application<\/h2>\n
A static website is one that are build with static files. If you are deploying a static website as your minimal viable product, it is recommended that you use Nginx to serve the static files instead. In case you need it, this is how to configure Nginx to serve files for a static website<\/a>. <\/p>\n\n