gtalarico/flask-vuejs-template

Flask + Vue JS Template

Hi 👋

My name is Gui Talarico

Find Me

Tech I Have Used

A Lot

Some

---

Dev Projects

Name	Status	Type	Links
pyAirtable	🟢	Library
aec.works	🟢	Website
ApiDocs.co	🟢	Website
Revit Api Docs	🟢	Website
AecStartups	🟢	Website
Flask Vue JS Template	🟠	DevTool
Django Vue JS Template	🟠	DevTool
Iron Python Stubs	🟠	DevTool
Revit Python Wrapper	🟠	Library
pm	🔴	DevTool
pipes	🔴	DevTool
PyRevitPlus	🔴	Library
Python Algorithms	⚪️	Learning
Grid Solver	⚪️	Learning
Vue 3JS Rhino	⚪️	Learning
Elastic Search Analyser	⚪️	Learning

---

Github stats

---

flask-vuejs-template's Issues

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! 🎈

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?

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.

how do i install pip module

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!

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

Typescript?

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

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.

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/

Steps to deploy client not present in Readme.md

Please include how we can deploy client in heroku

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

Just want to double-check this.

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.

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.

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?

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>```

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:

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?

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?

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.

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.

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/'