Easy Method to Handle Static JS Files During Flask Development

If your project has many JS files in the static directory, maintaining import links can be a pain.

This is a simple method to import all JS files from the static directory with three lines of code:

{% for file in js_files %}
  <script type="text/javascript" src = {{file}}>  </script>
{% endfor %}

Now I will explain how to generate and pass the js_files object to the front end.

Given a static folder organized like this each file would need to be imported using a url which can quickly become difficult to maintain.

First we need to import the listdir module.

import os
from os import listdir

The following function can be used on the backend to generate a list of urls.

def compile_javascript():
    # Defining the path to the folder where the JS files are saved
    path = 'static/javascript'
    # Getting all the files from that folder
    files = [f for f in listdir(path) if isfile(join(path, f))]
    # Setting an iterator
    i = 0
    # Looping through the files in the first folder
    for file in files:
        # Building a file name
        file_name = "javascript/" + file
        # Creating a URL and saving it to a list
        all_js_files_1[i] = url_for('static', filename = file_name)
        # Updating list index before moving on to next file
        i +=1
return(all_js_files)

Then all you need to do is run the function within your route and pass the list into the render_template function.

@app.route("/", methods = ['GET','POST'])
@app.route("/index" , methods = ['GET','POST'])
def index():
    all_js_files = compile_javascript()
return render_template('index.html', 
                       title = 'Home',
                       js_files = all_js_files)

Then with the js_files object available to the front end the following three lines of code inside the body of your html will import any files within the javascript folder.

{% for file in js_files %}
  <script type="text/javascript" src = {{file}}>  </script>
{% endfor %}

If you have a lot more JS files you might want to break them down into sub directories within the javascript folder from the previous example. This method can easily be expanded to accommodate a more complex file structure.

Considering a static folder structured like this:

To account for these sub folders we will alter our compile_js function to loop through both folders, create two lists, then combine then before returning it.

def compile_javascript():
    # Defining the path to the first folder
    path = 'static/javascript/JS_DIR_1'
    
    # Getting all the files from that folder
    files = [f for f in listdir(path) if isfile(join(path, f))]
    
    # Setting an iterator
    i = 0
    
    # Looping through the files in the first folder
    for file in files:
        
        # Building a file name
        file_name = "javascript/JS_DIR_1/" + file
        
        # Creating a URL and saving it to a list
        js_files_1[i] = url_for('static', filename = file_name)
        
        # Updating list index before moving on to next file
        i +=1
    # Defining the path to the second folder
    path = 'static/javascript/JS_DIR_2'
    
    # Getting all the files from that folder
    files = [f for f in listdir(path) if isfile(join(path, f))]
    
    # Setting an iterator
    i = 0
    
    # Looping through the files in the second folder
    for file in files:
        
        # Building a file name
        file_name = "javascript/JS_DIR_2/" + file
        
        # Creating a URL and saving it to a list
        js_files_2[i] = url_for('static', filename = file_name)
        
        # Updating list index before moving on to next file
        i +=1
# Combining both lists of URLs
    all_js_files = js_files_1 + js_files_2
    
    return(all_js_files)

And since the list of urls returned is exactly the same as our old version it can be handled by the same method as well (running the compile_js function in the route and passing it through the render_template function).

Now you can add or rename any files within the define directories and they will automatically be imported. Notice also that nowhere in the code is an actual file name written. This is a helpful strategy to avoid annoying errors of broken links caused by silly spelling mistakes.