15: Using Flask, REST API and Vue.js to build a Single Page Web Application

The Data Life Podcast

As a data scientist, you will work on machine learning models that are deployed on websites - usually wrapped around a REST API, these days they also call this approach a “micro-service”. It is for this reason it is important to know how backends and front ends work and how to build them. In this episode, we talk about building a note app which is a Single Page Application or SPA using Pythons flask library for backend and Vue.js for frontend. We use REST API to communicate between them.

We cover following topics in Q and A format:

1. Why should data scientists care about building frontend and backend and rest api?

2. What is a single page application?

3. Why Vue.js?

4. Why do we need server side code?

5. What is REST API?

6. How does Flask help with building rest api?

Then we go into the exact mechanics of building the SPA:

Step 1: Database setup

Step 2: Write REST API in flask

Step 3: Postman setup and testing of the API

Step 4: Build frontend and write forms to get information

Step 5: Build routing and login pages

Step 6: Front end design and UI/UX

Finally you can deploy both the server and client separately on AWS or Heroku so that other users can see it and use it.

Dependencies:

1) Flask to build server side REST APIs

2) Sqlalchemy which is ORM to access database

3) Bcrypt for hashing user passwords to store in your database

4) Vue for building frontend

5) Bootstrap-Vue for using bootstrap with Vue.js

6) Axios to communicate via AJAX between client and server

7) Vue CLI 3 to manage the tooling of the client

Really awesome resources:

1) Learn Vue.JS from scratch by the awesome teacher Net Ninja - YouTube https://www.youtube.com/watch?v=5LYrN_cAJoA&list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa&index=1

2) Building book recording app using Vue and Flask https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/#bootstrap-vue

3) Managing state in Vue.js including Vuex and simple global store: https://medium.com/fullstackio/managing-state-in-vue-js-23a0352b1c87

4) Authenticating a Flask API Using JSON Web Tokens - YouTube https://www.youtube.com/watch?v=J5bIPtEbS0Q

5) Really nice tutorial for using databases with Flask by Corey Schafer - YouTube https://www.youtube.com/watch?v=cYWiDiIUxQc&list=PL-osiE80TeTs4UjLw5MM6OjgkjFeUxCYH&index=4

If this has been of value please consider supporting me by buying me a coffee at the Anchor link at the end. If you support, I will provide extra bonus content for you. Thanks for listening!

--- Send in a voice message: https://podcasters.spotify.com/pod/show/the-data-life-podcast/message Support this podcast: https://podcasters.spotify.com/pod/show/the-data-life-podcast/support