oleg-agapov / flask-vue-spa

Vue.js SPA served over Flask microframework

Hey there 👋, I'm Oleg!

---

I'm from Ukraine 🇺🇦!

Today we need your help to fight with russian aggression against my country.

Please support our people by making a donation to Come Back Alive charity.

---

I'm an Analytics Engineer with 12+ years of experience in Data & Analytics.

If you need a dbt coaching - feel free to reach out.

Reach me on twitter or telegram.

flask-vue-spa's Issues

Add global scss file

Hey, i was wondering how one would add a global scss file to the frontend?
Thx and best regards :)

请问Linux要怎么搭建这个应用？这里抛出一个错误

我用的是ubuntu18.04LS,flask run的时候抛出一个错误

Traceback (most recent call last):
  File "/usr/local/bin/flask", line 7, in <module>
    from flask.cli import main
  File "/home/steiner/.local/lib/python3.6/site-packages/flask/__init__.py", line 21, in <module>
    from .app import Flask
  File "/home/steiner/.local/lib/python3.6/site-packages/flask/app.py", line 69, in <module>
    from .wrappers import Request
  File "/home/steiner/.local/lib/python3.6/site-packages/flask/wrappers.py", line 14, in <module>
    from werkzeug.wrappers.json import JSONMixin as _JSONMixin
ModuleNotFoundError: No module named 'werkzeug.wrappers.json'; 'werkzeug.wrappers' is not a package

这个怎么解决

issues in requests.txt

Following the README, folks will get errors. Here is a fix for requests.txt

click==6.7
Flask==1.0.0
Flask-Cors==3.0.3
itsdangerous==0.24
Jinja2>=2.10.1
MarkupSafe==1.0
six==1.11.0
Werkzeug==0.15.0
requests

about frontend and backend

when i running backend prodject and fronted project like :
python run.py
npm run dev

how to it work? I want real-time change i can change my code

I have an idea is using requests to get the localhost:8080/app.js and html but its too trouble

NPM installation warnings

Ubuntu 20.04.3 LTS, npm version 7.24.0, node version v14.17.6, Python 3.8.10

I'm new to the npm/node/vue universe, any pointers on how to remedy these npm install warnings would be appreciated:

npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: out of support
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated

> [email protected] postinstall /home/joel/explore-flask-vue-spa/frontend/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /home/joel/explore-flask-vue-spa/frontend/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

if found a bug for flask 1.0.2

in frontend/src/components/Home.vue http://localhost:5000/api/random and run.py @app.route('/api/random') the route looks like can not run report a bug :
Access to XMLHttpRequest at 'http://localhost:5000/api/random' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

i modify it http://localhost:5000/api/random/ and @app.route('/api/random/') this be ok

A suggestion to avoid CORS and different prod/dev

I really really enjoyed the writeup, but had a suggestion for avoiding the CORS setup and to make prod more similar to dev. In my flask python I changed the catchall to:

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    # If we're in debug run it all to the javascript dev server
    if app.debug:
        return requests.get('http://localhost:8080/{}'.format(path)).text
    return render_template("index.html")

so that when the flask server is in debug it just proxies straight to the javascript server and you still have all the nice browsersync stuff going on

some config with flask blueprint

Hi, I have read your article on https://codeburst.io/full-stack-single-page-application-with-vue-js-and-flask-b1e036315532, and tried with your example, everythin is fine, frontend and backend are separated.

But some thing wrong with Blueprint, I solved these problems at the end. Say, the project structure is the same with the project flask-vue-spa, now I make an additionally directory named vue at the same directory, like following:

• app.py
• vue
  -- frontend
  -- dist
  -- vue.py

Contents of vue.py is similar with app.py but the object vue is the instance of Blueprint:

from flask import render_template, Blueprint

vue = Blueprint( 'vue', __name__, template_folder='dist', static_folder='dist/static' )

@vue.route( '/', defaults = { 'path': '' })
@vue.route( '/<path:path>' )
def index(path):
    return render_template( "index.html" )

And the prefix for this blueprint is /vue

Then I had to modify two another files, one is /vue/frontend/config/index.js, I had to set build.assetsPublicPath to '/vue/'.
Another one is /vue/frontend/src/router/index.js, the Vue Router mode can only be hash, or I would see nothing changed when I entered the url such like /vue/home. In other words, if Vue Router mode is history, I can only see the interface rendered by /vue/frontend/src/App.vue instead of the index route defined in router.

What's the point?

nevermind :)