gtalarico / flask-vuejs-template

Flask + Vue JS Template

Flask-VueJs-Template 🌶️✌

Flask + Vue.js Web Application Template

Features

• Minimal Flask 1.0 App
• Flask-RestPlus API with class-based secure resource routing
• Starter PyTest test suite
• vue-cli 3 + yarn
• Vuex
• Vue Router
• Axios for backend communication
• Sample Vue Filters
• Heroku Configuration with one-click deployment + Gunicorn

Demo

Live Demo

Alternatives

If this setup is not what you are looking for, here are some similar projects:

• oleg-agapov/flask-vue-spa
• testdrivenio/flask-vue-crud

Old Template

This template was updated to use a flatter folder structure and use yarn instead of npm. You can now run yarn serve as well as other yarn commands from the template root directory. The old template will be kept in the npm-template branch but will not be maintained.

Django

Prefer Django? Checkout the gtalarico/django-vue-template

Template Structure

The template uses Flask & Flask-RestPlus to create a minimal REST style API, and let's VueJs + vue-cli handle the front end and asset pipline. Data from the python server to the Vue application is passed by making Ajax requests.

Application Structure

Rest Api

The Api is served using a Flask blueprint at /api/ using Flask RestPlus class-based resource routing.

Client Application

A Flask view is used to serve the index.html as an entry point into the Vue app at the endpoint /.

The template uses vue-cli 3 and assumes Vue Cli & 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.

Important Files

Location	Content
/app	Flask Application
/app/api	Flask Rest Api (/api)
/app/client.py	Flask Client (/)
/src	Vue App .
/src/main.js	JS Application Entry Point
/public/index.html	Html Application Entry Point (/)
/public/static	Static Assets
/dist/	Bundled Assets Output (generated at yarn build

Installation

Before you start

Before getting started, you should have the following installed and running:

• Yarn - instructions
• Vue Cli 3 - instructions
• Python 3
• Pipenv (optional)
• Heroku Cli (if deploying to Heroku)

Template and Dependencies

• Clone this repository:

   $ git clone https://github.com/gtalarico/flask-vuejs-template.git
  

• Setup virtual environment, install dependencies, and activate it:

   $ pipenv install --dev
   $ pipenv shell
  

• Install JS dependencies

   $ yarn install
  

Development Server

Run Flask Api development server:

$ python run.py

From another tab in the same directory, start the webpack dev server:

$ yarn serve

The Vuejs application will be served from localhost:8080 and the Flask Api and static files will be served from localhost:5000.

The dual dev-server setup allows you to take advantage of webpack's development server with hot module replacement.

Proxy config in vue.config.js is used to route the requests back to Flask's Api on port 5000.

If you would rather run a single dev server, you can run Flask's development server only on :5000, but you have to build build the Vue app first and the page will not reload on changes.

$ yarn build
$ python run.py

Production Server

This template is configured to work with Heroku + Gunicorn and it's pre-configured to have Heroku build the application before releasing it.

JS Build Process

Heroku's nodejs buidlpack will handle install for all the dependencies from the packages.json file. It will then trigger the postinstall command which calls yarn build. This will create the bundled dist folder which will be served by whitenoise.

Python Build Process

The python buildpack will detect the Pipfile and install all the python dependencies.

Production Sever Setup

Here are the commands we need to run to get things setup on the Heroku side:

```
$ heroku apps:create flask-vuejs-template-demo
$ heroku git:remote --app flask-vuejs-template-demo
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
$ heroku config:set FLASK_ENV=production
$ heroku config:set FLASK_SECRET=SuperSecretKey

$ git push heroku
```

Heroku deployment - One Click Deploy

flask-vuejs-template's Issues

How to turn on debug mode

When I run python run.py, I got:

 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

I've tried to run python run.py FLASK_CONFIG=development but not work. Could you please explain where to config the env (debug mode) in README?

run command python run.py occur errors

share/virtualenvs/root-BuDEOXnJ/lib/python3.8/site-packages (fr
om Jinja2>=3.0->Flask>=0.8->flask_restplus) (2.1.1)
Installing collected packages: pytz, aniso8601, six, pyrsistent
, importlib-resources, attrs, jsonschema, flask_restplus
Successfully installed aniso8601-9.0.1 attrs-21.4.0 flask_restp
lus-0.13.0 importlib-resources-5.7.1 jsonschema-4.5.1 pyrsisten
t-0.18.1 pytz-2022.1 six-1.16.0
(root) root@vm400157:~/flask-vuejs-template# python run.py
Traceback (most recent call last):
  File "run.py", line 2, in <module>
    from app import app
  File "/root/flask-vuejs-template/app/__init__.py", line 4, in
 <module>
    from .api import api_bp
  File "/root/flask-vuejs-template/app/api/__init__.py", line 4
, in <module>
    from flask_restplus import Api
  File "/root/.local/share/virtualenvs/root-BuDEOXnJ/lib/python
3.8/site-packages/flask_restplus/__init__.py", line 4, in <modu
le>```

Question: The purpose of Genome?

First of all, thanks for publishing this :) I really want to develop an app with this stack and this is a great starting point!

However. I am a bit confused by the repeated mentionings of "Genome".

It is mentioned in the README of the Vue app (app/client/app/README.md) and also in two other places. The only thing I can find related to this is the Vue-Genome project (https://github.com/doximity/vue-genome) but you do not seem to import this.

In addition, since you mention that comments are welcome, I have two suggestions:

• Maybe update the README of the Vue app with some more info.
• Maybe add a simple example of the Vue app actually retrieving some info from the Flask API?

Installation doesn't work

As recommended, I did:

$ pyenv install 3.6.9
$ pipenv install --dev
$ pipenv shell
$ yarn install

At first, yarn warns me of the following:

info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@vue/cli-plugin-babel > [email protected]" has unmet peer dependency "webpack@>=2".
warning "@vue/cli-plugin-eslint > [email protected]" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=5.0.0-alpha.2".
warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "[email protected] - 5.x".
warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=3.1.0".
warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=3.19.0".
warning " > [email protected]" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".

Then the install goes on, spend some time on sass, and concludes by hundreds of error lines ending by:

make: *** [binding.target.mk:125: Release/obj.target/binding/src/binding.o] Error 1
make: Leaving directory '/home/kerybas/codes/flask-vuejs/flask-vuejs-template/node_modules/node-sass/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/kerybas/codes/flask-vuejs/flask-vuejs-template/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Linux 4.19.80-1-MANJARO
gyp ERR! command "/usr/bin/node" "/home/kerybas/codes/flask-vuejs/flask-vuejs-template/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/kerybas/codes/flask-vuejs/flask-vuejs-template/node_modules/node-sass
gyp ERR! node -v v12.13.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1

I am not familiar with yarn and sass, I'm not able to troubleshoot that.

Add info: NODE_ENV set by Vue.js CLI

So far I have been very happy with the template, but it took me a long while to figure out why you used 'NODE_ENV' in the Vue.js client. It seemed like a magical variable that didn't get set.

I just figured out that the Vue.js CLI set's this variable to production when you run build.

I figured I could save others the trouble of discovering this by suggesting you document this behaviour somewhere :)

Thanks for the great work on the template!

Static in 'public' dir are not serve

You setup assume static dir is '/app/dist/static'. npm build generate this dir as ordered by vue.config.js

module.exports = {
    assetsDir: 'static',
}

and flask setting up static directory as

app = Flask(__name__, static_folder='../dist/static')

But static files from public dir is one level higher - in /app/dist. So favicon.ico and other static from public are inaccessible.

I'm trying build my own template (inspired by yours). I trying remove static from static path. And I am faced with the fact that if set assetDir: '' (this is default), and flask static_folder='dist' (my app.py lies in root), then nothing works at all. All static include js become inaccessible.

Symbol nto found: _FSEventStreamCreate

I followed the installation instructions and can run python run.py fine, but running yarn serve (from inside the pipenv) I get:

>>yarn serve
yarn run v1.12.3
$ vue-cli-service serve --open
 INFO  Starting development server...
 10% building modules 1/1 modules 0 activedyld: lazy symbol binding failed: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/twiecki/working/projects/flask-vuejs-template/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node
  Expected in: flat namespace

dyld: Symbol not found: _FSEventStreamCreate
  Referenced from: /Users/twiecki/working/projects/flask-vuejs-template/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node
  Expected in: flat namespace

/var/folders/mn/0x4pxw0n61lf479ndp07r0gr0000gn/T/yarn--1542973210225-0.9773673581633633/node: line 3: 84269 Killed: 9               "/usr/local/Cellar/node/11.2.0/bin/node" "$@"
error Command failed with exit code 137.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Choose a License

It would definitely be helpfull if this project has a proper license. I'm usually in favor of GPL or other copyleft licenses but in case of template-projects like this, you probably should choose something less restrictive like e.g. Apache License 2.

Here is the recommended reading from Github:
https://help.github.com/articles/licensing-a-repository/

Having a lot of trouble trying to add Vuetify

Hi,

I wanted to use this template to try to save me some time getting a Flask + Vue project set up, and while I was able to get the code as you have it working on Heroku, as soon as I tried adding Vuetify I started running into lots of package-related errors. I was eventually able to get it running on my local computer (although I'm currently seeing lots of errors again, so I've broken something), but I was never able to get it working on Heroku with Vuetify.

I posted an issue on Stack Overflow here but I haven't gotten any responses so far.

Api static file

Hi, thank you very much for posting this template! I'm having an issue referencing static files in the api template. I created a static folder in /app/api/. Then I tried to specify the static folder and static folder url in /app/api/init.py.

However, nothing seemed to work. Would you know how to solve this is issue?

Convert to Cookiecutter

Makes it easier for people to set project names, and would make it easier to implement
choices for simple vs full template, add Flask Rest, etc

It's working on development but not on deploy

I did some research and it seemed to be an error with the procfile, but this file is exactly the same as the one this public repository has. Here are the logs:

This template has no preferred method of db migrations, right?

Just want to double-check this.

Question: backend python files?

Where backend python files go and how should they look like? What should be done to return a simple message at a new route? Please give an example.

Typescript?

Vue 2.5+ has some improvements for Typescript. Would be really cool if you could showcase how that works with Vue

Recommended way to setup SQLAlchemy

Hi,
I'm new to Python and Flask - I'm trying to setup a db connection in a project based on this template, which is quite problematic for me. I'm following some tutorials, but some are outdated and most show only very simple setups. (http://exploreflask.com/en/latest/storing.html http://flask-sqlalchemy.pocoo.org/2.3/)

While trying to use current_app imported from flask in a db.py file based in app/api I get

RuntimeError: Working outside of application context.

This typically means that you attempted to use functionality that needed
to interface with the current application object in a way.  To solve
this set up an application context with app.app_context().  See the
documentation for more information.

Currently the error I'm facing is -

/home/michalw/dev/python/venv/bin/python: Error while finding module specification for 'app.__main__' (ImportError: cannot import name 'db' from 'app' (/home/michalw/dev/python/flask-vuejs-template/app/__init__.py))

I imported and initialized flask_sqlalchemy in app/__init__.py.

So I've got following questions:

• which file should SQLAlchemy be imported in and db object initialized
• how to use db object outside this file to declare models classes
• should I use Blueprint for that? How?

Use devServer Proxy

https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

Seems like this feature would simplify development server config and possibly aliminate the need for:

flask-vuejs-template/app/api/__init__.py

Lines 19 to 20 in cc5052f

	if not current_app.config['PRODUCTION']:
	response.headers['Access-Control-Allow-Origin'] = '*'

and

flask-vuejs-template/app/client/vue_app/src/backend.js

Line 4 in cc5052f

const API_URL = IS_PRODUCTION ? '/api/' : 'http://localhost:5000/api/'

how do i install pip module

Incorrect line about Django

Release

The Procfile will run Django migrations and then launch Django's app using gunicorn, as recommended by heroku.

I could be missing something, but I think these references to Django are probably mistakes. Thanks! 🎈

Update Python version to 3.8.2?

Should the Python version be updated to 3.8.2? I'm not at all familiar with Heroku or pipenv, so I could be missing something.

Steps to deploy client not present in Readme.md

Please include how we can deploy client in heroku