Working with Vue and Flask (Part 2 Flask & Vue Setup)
In the last part, we were introduced to working with Vue & Flask as co-frameworks. If you missed it, you can read about it, because we will be proceeding from where we ended.
Flask Setup
This time, we’ll be using a GitHub resource to get us quickly started with the setup. To follow clone from this Github repo that contains a simple Flask-Vue template I created and follow the Quick Setup process in README.md to get started.
git clone https://github.com/wizlif/flask-vuejs.gitAfter setup, you should be able to run python manage.py runserver in the project directory and get this output.
(venv) (base) wiizlif@wizlif-PC:$ python manage.py run server
* Serving Flask app "app" (lazy loadIng)
* Environemnt: production
WARNING: This is a development server. Do not use it in a production deployment.
* Debug mode: on
* Running on http://127.0.0.1:5000, (Press CTRL+C, to quit)
* Restarting with stat
* Debugger is active
* Debugger PIN: 303-903-329 Opening http://127.0.0.1:5000 in the browser right now should give you jinja2 templating errors. This is because we haven’t yet built our Vue project.
Vue Setup
Now let’s setup Vue so we can get rid of the error above, you can begin by stopping your development server and traverse to the Vue project directory.
$ cd app/client/vue-app/Run yarn install or npm install to install the Vue modules required. Once it’s done, run yarn serve to start the Vue development server. You should have a development server running on port 8080.
Serving Vue from Flask
Now that our Flask and Vue environments have been set up. We can serve our Vue resources directly from Flask. The trick to this lies in our manage.py file.
If you look closely at our manage.py file in the project root. You should see three magical functions serve, build and lint. These functions help us manage Vue without having to traverse back and forth between Flask and Vue.
To serve a development version of Vue you can simply run python manage.py serve and the same applies to build(Build Vue app for production) and lint(Lint Vue App).
Now to fix our jinja2 templating error we can simply run python manage.py build to build a production version of our Vue app.
Now that Vue has generated the dist folder, index.html and other resources for us. We can then run python manage.py runserver and attempt to access http://localhost:5000 once again. This time you should see a friendly Vue default page load from our flask server. From the server output, you should see that the browser is loading assets from the flask server.
Vue Routing Best Practices
Now that you have your Flask server serving Vue assets, I needed to highlight some best practices for the two frameworks to work safely with no route collisions.
In most cases, your Vue project will not consist of only a single route, you will have multiple routes going from page to page. By default when using Vue Router for this, it will append a hash # between the root domain name and your sub-paths, to override this there is a possibility to set the Vue router mode to history that gets rid of this hash.
Now assuming you have an API route /movies in Flask and a Vue route /movies. On traversing this route, flask will attempt to query the API while Vue will attempt to traverse the route causing an unwanted collision.
To keep this collision from happening, it is advisable not to use history mode in Vue router when working with Flask. This means that even if there are two similar routes, Vue will append the hash on its route making it different from the flask route hence solving the problem.
I hope you had a great time reading this, I know I did.
In the final part. I’ll be talking about deploying the flask app using the Apache2 web server on a Linux server (I know I’m old school).