codeKrowe / flask-vuejs-template

Flask + Vue JS Template

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flask-VueJs-Template

Build Status codecov

Flask + Vue.js Web Application Template

Vue Logo Flask Logo

Live Demo

Features

  • Minimal Flask App with modular Config
  • Flask-RestPlus API with class-based secure resource routing
  • Starter PyTest test suite
  • vue-cli 3 with Babel and ESlint.
  • Vuex for state management
  • Vue Router
  • Axios for backend communication
  • Sample Vue Filters
  • Heroku Configuration with one-click deployment

Template Structure

The template uses Flask & Flask-RestPlus to create a REST style API, and let's VueJs + vue-cli handle the front end and asset pipline.

Blueprints

The Flask application is setup with with two blueprints:

Api Blueprint

Uses Flask-RestPlus to serve resources at the /api endpoint. Flask-RestPlus can be discarded if you prefer standard view functions routing.

Client Blueprint

A simple Flask view is used to serve the entry point into the Vue application at the root endpoint / The template uses vue-cli 3 and assumes Vue.js & Webpack will manage front-end resources and assets, so it does overwrite template delimiter.

The Vue instance is preconfigured with Filters, Vue-Router, Vuex; each of these can easilly removed if they are not desired.

Installation

Before you start
  • Make sure node + npm are installed (tested with npm v5.6)
  • Python 3 is installed (tested with 3.6)
Template and Dependencies
  • Clone this repository:

     $ git clone https://github.com/gtalarico/flask-vuejs-template.git
    
  • Create a virtual enviroment (highly recommended)

  • Install Python dependencies using pip or pipenv from the project directory:

    $ pipenv install or pip install -r requirements.txt

  • Install npm dependencies

     $ cd app/client/vue_app
     $ npm install
    

Development Server

While it's possible to use Flask to serve the vue app and the rest api, it is less than ideal as each change in client code would required a full rebuild and reload. Instead, we will use flask the serve the api endpoints, but we will serve the client app using the vue-cli dev server.

This enables us to take advantage of Hot Module Replacement (HMR) and ESlint. I think it is a small price to pay for the amount of time saved by HMR alone.

Api Server

From the root directory run:

$ python run.py

This will start the flask development server on localhost:5000 and will respond to all requests on /api..

Client Server

Start another terminal window, and from the same directory run:

$ python run_client.py

This will launch your browser and server the Vue application on localhost:8080. T he vue app will hit localhost:5000 to fetch resources.

This combination allows you have both your backend python files, as well as the Vue app files autoreload on each file save.

Production Server

The production server uses Gunicorn to serve the entire application. This template is configured to work with Heroku out of the box - just make sure you run npm run build before pushing it to your Heroku repository.

  • from /app/client/vue_app run:
$ npm run build
  • Commit your code

  • Setup your heroku app:

     $ heroku apps:create flask-vuejs-template
     $ heroku config:set FLASK_CONFIG=Production
     $ heroku config:set SECRET=SECRETKEY
     $ heroku git:remote --app flask-vuejs-template
    
  • Push your application to heroku:

    $ git push heroku

Heroku deployment - One Click Deploy

You can spin up your on version of this template on Heroku:

Deploy

About

Flask + Vue JS Template

License:MIT License


Languages

Language:Python 46.0%Language:Vue 33.6%Language:JavaScript 15.8%Language:HTML 4.7%