A project template for a Flask-Vue.js Web Application
Note: In progress - comments and ideas are welcome.
I have been using Flask for a while and I recently started using Vue.js I want to continue using Python as a Backend, but wanted migrate all frontend to a JS framework. This template is what I ended up with after testing a few different configurations Flask-Vue integrated Application.
The template is basically one Flask application with two Flask blueprints:
- Api App: Blueprint uses Flask-RESTful to serve resources at the
/api
url endpoint. - Client App: Minimal Blueprint used only to serve the a single-page Vue.js App at the root endpoint
/
The Vue.js application is served by the Client App Blueprint.
This template assumes you want to use Vue.js to manage all of your front-end resources and assets, and therefore, it does not attempt to overwrite Jinja's or Vue's templating delimiter, not does it use flask-assets.
The Vue.js portion of the application is built on top of the official Vue.js Template "Webpack Simple" with a few minor tweaks (adds esline and friendly-errors).
The Vue.js application is also scaffolded with examples of basic usage of Filters, Mixins, Vue-Router for routing, Vuex for state management.
The second blueprint is served by the Api App Blueprint. This blueprint is setup using Flask-RESTful, but that can be discarded for those that prefer to use standard function view and routes.
- Clone Repository
pip install -r requirements.txt
Note: For local development, I run both the Flask Development Server in parallel to webpack-dev-server. This allows me to serve the Flask api endpoint, while still taking advantage of the hot-reload and eslint.
From application root directory:
python run.py
This will serve the /api
endpoints at localhost:5000
.
You could also serve the JS application, but this would not handle hot-reloading, js linting, etc.
from app/client/app:
npm install
To install npm dependencies.
npm run dev
This will serve the Vue.js frontend application on localhost:8080
.
Alternatively, you can also run just the flask server if you build your vuejs application first:
npm run build
This will pack the full application and save it in 'app/dist' where it can be served by the Flask Server. The disadvantage of this method is that you have to wait for a full build after every change
The production server uses Gunicorn to serve the the Flask Application.
This template works with Heroku out of the box. Just make sure you run npm run build
before pushing it to your Heroku repository.
heroku apps:create flask-vuejs-template
heroku git:remote --app flask-vuejs-template
heroku config:set FLASK_CONFIG=Production
heroku config:set SECRET=SECRETKEY
git push heroku
- Vue.js
- Vuex
- Vue Router
- Bulma Css
- Axios
- es-lint
- friendly-errors-webpack-plugin
- Webpack loaders
- Flask
- Flask-RESTful