Full-Stack Beginner's Guide (Flask+React+SQLAlchemy)

Developing Web Application with RESTful API and React Front End

Full-Stack Beginner’s Guide

I have gone through an intensive learning period to quickly pick up entry-level full stack development, I learned to set up a database based REST web service with Flask and SQLAlchemy, then I picked up some front-end web application with React/Vue. I feel like it’s time to sum up what I’ve learned so far and how I learned them.
This article does not include many technical details, but rather talks about how I stumbled through and shares some experience to improve learning curve.

My learning path

prior knowledge of SQL, python, (git, virtualenv, …)
sqlalchemy -> flask + (html) -> RESTful API -> Javascript/ES6 -> React/Vue…

It is not exactly a one-way path, but rather a back-and-forth process to keep going back and get refined view of the way each parts are organized and constantly refactoring the code.

It is highly recommended that you don’t just stick to one tutorial, get several well-written pieces that uses slightly different or focuses. Try to understand what approaches they use to achieve certain goals and compare the differences between.

Sections

SQLAlchemy

SQLAlchemy CORE syntax is easy to grasp if you have prior knowledge of SQL, the syntax for query basically stays the same. If you don’t, no worries, basic SQL queries are actually quite easy to learn. Just go and try write some queries yourself. [SQLAlchemy] has two major modes: ORM and CORE. (SQLAlchemy Documentation — SQLAlchemy 1.2 Documentation)

If you are learning SQLAlchemy alone (or with SQL), you probably are learning SQLAlchemy CORE, that uses engine to connect. SQLAlchemy CORE probably looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from sqlalchemy import create_engine, MetaData, Table
engine = create_engine('connection_string')
connection = engine.connect()

metadata = MetaData()
users = Table('users', metadata,
Column('id', Integer, primary_key=True),
Column('name', String),
Column('fullname', String),
)
metadata.create_all(engine)

stmt = select([state, age]).group_by(state)
results = connection.execute(stmt).fetchall()

It deals with Tables with MetaData, and executes sql queries through connection engine.

For SQLAlchemy ORM, it may take a little more time to understand how the object maps to the database, but you will be able to figure it out by trying building a small web service with SQLAlchemy.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
from sqlalchemy import Column, Integer, String
from sqlalchemy.orm import sessionmaker
class User(Base):
__tablename__ = 'users'

id = Column(Integer, primary_key=True)
name = Column(String)
fullname = Column(String)
password = Column(String)

def __repr__(self):
return "<User(name='%s', fullname='%s', password='%s')>" % ( self.name, self.fullname, self.password)

engine = create_engine('connection_string')
Base.metadata.create_all(engine)

Session = sessionmaker(bind=engine)
user = session.query(User).filter_by(name='ed').first()
session.add(new_user)

It users higher level abstraction (Declarative system) to construct and work with tables, namely by declaring a Table as a Class, and uses Session to handle queries.

Flask + SQLAlchemy

Having familiarized myself with SQLAlchemy, I moved on to using SQLAlchemy with Flask. Luckily I found this super tutorial that covered every aspects of flask The Flask Mega-Tutorial Part I: Hello, World! - miguelgrinberg.com. I only followed the first few chapters of the tutorial step by step, and moved on to build my own web service as soon as I learned what I need. But I kept coming back to this one for some specific functionalities support. For example, I read about test-driven development in another article and tried to refactor my code, and then found out that Chapter 15 A Better Application Structure talked about how to refactor the file structure that uses Application Factory to support unit test.
Miguel also has other flask-related projects in his Github repo and more tutorials that turned out quite useful later on.

With Flask, I used Flask-SQLAlchemy instead of pure sql-alchemy for better integration with flask.

Seperate and Connect Backend with Frontend

By now, having written an archaic looking website in flask with Jinja2 template engine to render the webpages (by using return render_template(), if you remember), we decided that frontend and backend (client and server) should be separated, and it will be easier for us to build front-end with a javascript framework (possibly React.js or Vue.js), and alter the back-end server to offer REST interface.
Honestly speaking, I was totally at a loss when starting to do this. I had no idea about front-end development and was not sure how the two parts connect. (I did not even know that I should build RESTful API!!!) And it is not that easy to find the right answer if you cannot even phrase your question correctly!! So the first thing I did was to research on this. Then I read this one: Django/Flask with React.js The author offered two options: a) use Flask to create a REST API and making http request to it through REACT. b) use webpack and babel to template React files in Flask.
At the time, I feel like I’ve found the answers, even though the words didn’t really make sense to me. What is REST API? What is Webpack and bundling? Which one should I go for? I only decided to go with REST API because I had this rough idea that method b) will still render the webpages in Flask like I did using render_template('hello world.html'), while method b) renders the pages in React and make requests for data through the internet. That was not a clear understanding, but are enough for me to make my decision.
The fun thing about beginner’s learning process is that you don’t really have to know it is JinJa2 to start using it, but not knowing these concepts will give you a lot of confusion if you decide to jump out of the box later. It was really until recently can I understand the terms better.

REST API
What are APIs? I am pretty sure you have seen them before:

template engine
With Jinja2, I can write html files with:

1
2
3
{% for item in list %}
<li>item</li>
{% endfor %}

RESTful API service

Fun story: Actually, I started with a Udacity RESTful API tutorial, then I somehow found out the tutorial is using exact same code as Miguel’s tutorial, but with video instruction. I think they took Miguel’s code example as part of their tutorial, which makes sense since Miguel is a recognized expert in this field who are willing to share… But Udacity did offer a hand-by-hand video instruction, which I enjoyed. And this guy gave some pretty good advice on writing good APIs: learn from good APIs, using nice URIs, returning appropriate status code… I did read Miguel’s tutorial later for supplementary information.
The Scotch tutorial is the one I started considering refactoring my code with App Factory. There are comments below saying he’s not using real TDD (Test-Driven-Development) or he’s using deprecated packages, but it did give me new perspective and are clear enough to follow along… One thing to remember about tutorials is that you do not have to take them all, always use your judgement and do the research.
Build a RESTful API with Flask – The TDD Way ― Scotch
Designing a RESTful API with Python and Flask - miguelgrinberg.com
Designing RESTful APIs - Udacity
One other thing to notice is that, if you search what is GET and POST, you will see tons of articles trying to explain… sometimes partial and inadequate. I started making http request with a naive understanding of the keywords GET/POST/… I thought GET is when you put your request in url link to get information and POST is when you are posting information to change the data on server. Based on this idea, I first design my API to get auth token in a GET request, (because it is not altering information on server! And I can still send the json in request body!) Soon I learned that GET request will be logged in browser history and is definitely not secure for sending auth info.

After that, I realized I knew too little about the web, and started reading more general articles about the web. Not in academic style though, just to get more background information. Many articles on this topic uses too much terms and are hard to read for newbies. Here is a learner-friendly one to start with. How the Web Works: A Primer for Newcomers to Web Development (or anyone, really) Security and authentication is the topic I spent some time researching on… there will be a section later.

React.js/Vue.js

These two are quite similar in some way…

Resources

SQLAlchemy:
Introduction to Databases in Python | DataCamp (great exercises to learn SQLAlchemy syntax, making the transition from SQL queries to SQLAlchemy, )
SQLAlchemy Documentation — SQLAlchemy 1.2 Documentation (the site you will always need to refer to…)

Flask + flask-SQLAlchemy:
The Flask Mega-Tutorial Part I: Hello, World! - miguelgrinberg.com (Great hands-on tutorial to get you started with backend and database with flask & sqlalchemy by implementing a blog site, well explained, easy to follow, )
Explore Flask — Explore Flask 1.0 documentation
flask-website/flask_website at master · pallets/flask-website · GitHub (look at the structure of flask’s website)

Javascript:
A re-introduction to JavaScript (JS tutorial) - JavaScript | MDN (introduction to JavaScript for those with knowledge of programming language in general)
Udacity Intro to Javascript (fool-proof javascript introduction)
( I am not a fan of codecademy kind of code-only lecture-free learning process since it does not give me any insight about the language… But that is also a great option if you found that helpful as a starting point)

React:
Tutorial: Intro To React - React (React’s official tutorial, build a tic-tac-toe game with react, gets you familiar with the framework and jsx. Tips: don’t just follow the instructions, try implement the ideas fro improvements it proposes at the end of the article.)
Your Timeline for Learning React
Course | DEV281x Introduction to ReactJS| edX ()

Vue.js:
GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js (list)
Examples — Vue.js
Examples:
How to build SPA with Vue.js – Drupal stories: an insider’s view – Medium (easy start, basic understanding of due project structure)
Vue.js front end app, part 1: Setting up the app

RESTful API — Connecting Front-end and Back-end
Django/Flask with React.js – Timothy Ko – Medium

  1. Method1: RESTful
    Build a RESTful API with Flask – The TDD Way ― Scotch
    Designing a RESTful API with Python and Flask - miguelgrinberg.com
    Designing RESTful APIs - Udacity
  2. Method2: bundle React (haven’t tried so not sure about this part…)
    Vue.js & Flask Full-stack single page application with Vue.js and Flask
    Creating a full-stack web application with Python, NPM, Webpack and React — Beauty and… (not well explained but offered as example)

More:
ES6 …

General Understanding:
How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)
How the Web Works Part II: Client-Server Model & the Structure of a Web Application
How the Web Works Part III: HTTP & REST – freeCodeCamp
(a great series that clearly explains how the web works in general)
Cross-Origin Resource Sharing (CORS) - HTTP | MDN
security - The definitive guide to form-based website authentication - Stack Overflow

Useful links
List of HTTP status codes - Wikipedia
API — Flask 1.0.2 documentation

Unsorted
GitHub - joshporter1/codenames: 👾 Realtime Codenames game that you can play on your phone, TV, or laptop
Is it okay to use Flask with Vue.js? If it is, is there a convention for making applications with Flask and Vue.js? - Quora
Examples
Build a simple File storage service using VueJS, Flask and RethinkDB | Pluralsight
Build a realtime app with Vue.js
Handling Ajax Request in Vue Applications Using Axios.
Single Page Apps with Vue.js and Flask: Navigating Vue Router

Encryption & Authentication
JSON Web Token Introduction - jwt.io