Flask Development Part 3: File Structure

This is Part 3 of a series of articles that will walk you through the basics of Flask Web Development by developing and hosting a simple CRUD application.

This series is split into 6 parts:

1. A simple Hello World app
2. Rendering HTML templates.
3. Building a scaleable file structure.
4. Configuring a database.
5. Handling user login and registration.
6. Adding CRUD (Create, Read, Update, Delete) functionality.

Part 3: Building a Scalable File Structure.

So far we just have one file for the backend python code and one file for the front end html code. As our app gets more complex and we add more code we will want to split these off into multiple files. We will also want to be able to add in images, javascript files, user uploads, and more.

Let’s go ahead and set up a more robust file structure.

This structure give us 3 main directories:

1. Backend: Houses all our Python files that handle routing, CRUD actions, and form validation.
2. Static: Houses all our image, JS, and CSS files. These will be stored on the client side in their browsers cache.
3. Templates: Houses all our HTML files.

Within the backend directory there are 3 .py files and a sub-directory, also with 3 .py files.

1. config.py: This will set up our app and our database.
2. forms.py: This will create all the flask forms.
3. index.py: This will handle all the requests and routing.
4. CRUD/create.py: This will contain all of our functions that create database objects.
5. CRUD/update.py: This will contain all of our functions that update database objects.
6. CRUD/delete.py: This will contain all of our functions that delete database objects.

Now let’s move our app configuration code to our config.py file and our routes to the index.py file.

First we will move this code to the config.py file.

from flask import Flask
app = Flask(__name__)

Next, we will add an argument to the line where we create the instance of the Flask class.

from flask import Flask
app = Flask(__name__, template_folder='../templates')

Since we are going to be putting our routes in our index.py file within the ‘backend’ directory this will tell flask where to look for our HTML templates within our new file structure.

Then we will move this code to the index.py file.

from config import app
from flask import Flask, render_template
@app.route('/')
@app.route('/index')
def hello_world():
    return render_template('index.html')

Now our app.py file is just:

if __name__ == '__main__': app.run(host="localhost", port=8000)

Lastly, we will update our imports in our app.py file to access the new files we made.

import sys
sys.path.append('backend')
import index
from config import app
if __name__ == '__main__': app.run(host="localhost", port=8000)

Don’t worry about the specifics of the rest of the files yet. We will be adding to them throughout the rest of the series.

The source code for this part can be found at my GitHub here:

In the next post we will use this new file structure to configure a database for our app.