Working with Vue and Flask (Part 1 Directory Structure)

My arsenal of web-development has always been encompassed with two major languages, Javascript (ES6)and Python (3.6).

I have always been fascinated by Javascript frameworks for Front-End usage that’s why when Vue started to become popular, I decided to give it a try, speaking as a person from an Angular background, I was intensively impressed by its size, performance, documentation, and ease.

Vue.js

On the other hand, the ease and speed provided by Pythons web framework Flask was my first pick as it required quick Restful API creation with direct access to the ORM.

For this article, I’ll mainly be covering my chosen directory structure and how to interconnect Flask and Vue. In the following articles, we shall handle Vue routing practices that work well with flask and deployment to an Apache2 server.

General App Directory Structure

Let’s quickly cover the roles of the major files and directories:-

• app: The app directory contains the actual project code.
• confs: This contains the project deployment configuration files.
• docs: As you’ve guessed, this has the project documentation created using sphinx.
• log: This contains project and server-level logs depending on your liking.
• migrations: For those using Relational databases like MySQL or PostgreSQL, this folder contains your database migrations.
• requirements: This contains your dependencies.
• application.wsgi: This contains the wsgi configuration for the entire project.
• celery_worker.py: If you have any background jobs to run using Celery, this file contains your celery app creation code.

Homepage | Celery: Distributed Task Queue

• config.py: This contains your project-level configurations like picking API IDs from environment variables to mail level configurations.
• manage.py: This contains the major project command from running migrations, tests to pre-deployment tasks.
• run-redis.sh: This installs and configures Redis if needed.

Let’s speak a little more about the app directory as it contains the Vue JS configuration.

Fig(2) app directory structure.

The api_1_0 directory in this case is a python module that contains all the RESTFUL API code and blueprint.

The client directory on the other hand has all our front end VueJS code in a directory named vue-app and a magical __init__.py module file that connects our VueJS project to flask by using the Vue dist folder to load the root page via index.html.

module file for client directory

module file for app directory

The client_bp creates a blueprint to the vue-app/dist directory that contains the vuejs production build files.

The @client_bp.route(‘/’) route declaration then uses Flask’s render_template method to load the index.html file built by Vue as the root path.

The app then register’s the blueprints with the API blueprint pointing to route /api/v1 and the client_bp blueprint pointing to our Vuejs project.

In the next series, I will be covering more specific details from configurations to Vuejs.

Thanks.

The app structure was birthed from the miguelgrinberg/flasky-first-edition project then tailored to use Vue.

miguelgrinberg/flasky-first-edition

You can check out other parts of this series.

Working with Vue and Flask (Part 2 Flask & Vue Setup)

Working with Vue and Flask (Part 3 Flask Deployment with Apache 2)