Table Of ContentA Blueprint for Production-Ready
Web Applications
Leverage industry best practices to create complete web apps
with Python, TypeScript, and AWS
Dr. Philip Jones
BIRMINGHAM—MUMBAI
A Blueprint for Production-Ready Web Applications
Copyright © 2022 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information
presented. However, the information contained in this book is sold without warranty, either express
or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable
for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and
products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot
guarantee the accuracy of this information.
Group Product Manager: Pavan Ramchandani
Senior Editor: Hayden Edwards
Technical Editor: Simran Udasi
Copy Editor: Safis Editing
Project Coordinator: Sonam Pandey
Proofreader: Safis Editing
Indexer: Pratik Shirodkar
Production Designer: Roshan Kawale
Marketing Coordinators: Anamika Singh and Marylou De Mello
First published: September 2022
Production reference: 2010922
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
978-1-80324-850-9
www.packt.com
Co n t r i b u t o r s
About the author
Dr. Philip Jones began his career studying physics at the University of Oxford, where he undertook
his undergraduate studies and subsequently gained a doctorate in particle physics. He has authored
the Quart framework, maintains the Flask framework, and supports the ongoing development of a
number of other projects related to the Python HTTP stack. Currently, he works as a chief technical
officer in London, and in his spare time, you will find him cycling or walking his dog, Penny.
I would like to thank my friends and family for their continued support and
encouragement throughout the process of writing this book.
About the reviewers
Sunil Kumar is a passionate and energetic young man who is following his dream of changing the
world with technology. He graduated from one of the top engineering colleges in India with a BTech
degree in computer science and has years of profession experience. This experience includes backend
development using Quart and Flask frameworks, and frontend development using ReactJS, along
with queuing systems such as Kafka and RabbitMQ. Nowadays, he’s working with FinTech companies
helping to drive the change in the Indian economy and rethink debt collection systems.
Dr. Murray Hoggett worked in academia for 10 years researching climate change and volcanoes,
specializing in numerical and stochastic simulations. Since then, he has worked as a software engineer
on projects ranging from embedded systems and native apps to web apps and ML systems. He is
currently team lead at TrueCircle, building Python and JavaScript web apps for the recycling industry.
Matt Dawson got his start in the tech industry working as a photographer/surveyor for a PropTech
start-up. He developed an interest in engineering, and after graduating from Maker’s Academy, he
took a job as a full-stack engineer specializing in Python and TypeScript.
He now works as an infrastructure engineer, seeking a better understanding of how to deploy and
scale applications that he was already able to build. He chose this due to his desire to understand the
product as a whole, building on his strong foundation in backend/frontend principles.
Matt’s love of tech is drawn from a strong curiosity to try new things and to constantly strive toward
new levels of understanding, as well as his firm belief that anything can be made better.
Manuela Redinciuc is a full-stack software engineer from London, currently focusing on expanding
her backend expertise at Lifeworks. She comes from a non-technical background and enjoys mentoring
and helping others transition into tech roles.
Dr. Stuart Hannah is a professional software engineer living and working in London. He has extensive
Python experience, holds a Ph.D. in combinatorics from Strathclyde University, and enjoys working
on performant distributed systems.
Table of Contents
Preface ix
Part 1 Setting Up Our System
1
Setting Up Our System for Development 1
Technical requirements 2 Linting the code 13
Aiming for fast development 2 Testing the code 14
Analyzing the bundle 14
Auto-formatting the code 3
Scripting the commands 15
Linting the code 3
Testing the code 3 Installing Terraform for
infrastructure development 16
Setting up our system 4
Managing secrets 17
Managing the code 4
Formatting, linting, and testing the code 18
Rebasing rather than merging 6
Installing PostgreSQL for
Installing Python for
database development 18
backend development 6
Adopting a collaborative
Formatting the code 7
development process using GitHub 19
Linting the code 8
Adding continuous integration 21
Testing the code 10
Adding CI for the infrastructure code 22
Scripting the commands 11
Adding CI for the backend code 23
Installing NodeJS for
Adding CI for the frontend code 25
frontend development 11
Summary 26
Formatting the code 12
Further reading 27
vi Table of Contents
Part 2 Building a To-Do App
2
Creating a Reusable Backend with Quart 31
Technical requirements 32 Adding rate limiting 43
Creating a basic Quart app 32 Ensuring all routes have rate limits 44
Adding request and response validation 46
Testing the ping route 34
Using blueprints for clearer code 35 Connecting to the database 47
Configuring the app 37 Sending emails 51
Ensuring error responses are JSON 38
Rendering emails 51
Including user accounts 39 Sending emails 53
Securely storing passwords 40 Testing that emails are sent 56
Ensuring passwords are strong 41 Summary 57
Allowing password-less authentication 41
Further reading 57
Protecting the app 43
3
Building the API 59
Technical requirements 60 Testing the routes 76
Creating the database schema Building the member API 77
and models 60
Creating the members blueprint 78
Creating the member schema and model 61
Creating a member 78
Creating the to-do schema and model 65
Confirming the email address 81
Running the first migration 70
Changing passwords 82
Adding test and development data 71
Requesting a password reset 84
Building the session API 72 Resetting the password 86
Testing the routes 88
Creating the blueprint 72
Adding login functionality 73 Building the To-Do API 90
Adding logout functionality 75
Creating the blueprint 91
Adding status functionality 76
Creating a to-do 91
Table of Contents vii
Reading a to-do 92 Testing the routes 96
Reading the to-dos 93
Summary 98
Updating a to-do 94
Further reading 98
Deleting a to-do 95
4
Creating a Reusable Frontend with React 99
Technical requirements 99 Implementing a styled date field 115
Enhancing the basic React app 100 Implementing a styled email field 117
Implementing a styled text field 118
Styling the app 101
Implementing a styled password field 119
Adding page titles 105
Implementing a styled password strength field 120
Adding an authentication context 107
Implementing styled form actions 123
Adding routing 108
Managing the app state 125
Requiring authentication 110
Communicating with the backend 126
Resetting scrolling on navigation 111
Supporting toast feedback 131
Enabling data entry 112
Summary 137
Implementing a styled checkbox field 114
Further reading 137
5
Building the Single-Page App 139
Technical requirements 139 Forgotten passwords 160
Adding navigation 140 Resetting a password 163
Adding user authentication pages 144 Adding to-do pages 168
Registration 144 Showing to-dos 171
Email confirmation 149 Creating to-dos 175
Logging in 151 Editing to-dos 179
Adding password management pages 156 Summary 181
Changing a password 156 Further reading 181
viii Table of Contents
Part 3 Releasing a Production-Ready App
6
Deploying and Monitoring Your Application 185
Technical requirements 186 Adding continuous deployment 207
Making the app production-ready 186 Serving on a domain 211
Serving the frontend 186 Securing the connection 214
Serving the backend 188
Sending production emails 217
Containerizing the app 188
Monitoring production 219
Deploying to AWS 191
Monitoring the backend 219
Designing the production system 193
Monitoring the frontend 221
Setting up the networking 194
Displaying an error page 221
Adding a database 199
Summary 224
Running the cluster 201
7
Securing and Packaging the App 225
Technical requirements 226 Adding multifactor authentication 234
Securing the app 226 Updating the database and models 235
Adding secure headers 226 Activating MFA 238
Protecting against account enumeration 228 Logging in with MFA 247
Protecting against spam accounts 229 Recovering and inactivating MFA 252
Updating packages 230 Converting to a Progressive Web App 252
Periodically checking for vulnerabilities 231 Summary 257
A system for monthly updates 233 Further reading 257
Index 259
Other Books You May Enjoy 266
Preface
The aim of this book is to show you how to develop a web application using industry best
practices and place it in a running production environment. We’ll do this by creating a working
to-do app. This app is live at tozo.dev, and all the code for it is available under the MIT license at
github.com/pgjones/tozo.
The development blueprint presented in this book is based on one I’ve used to successfully build apps
before, including for my own start-up a few years ago. The technology used here has been chosen
because of its popularity in the industry, with Python, NodeJS, and Terraform being popular tools for
full-stack development, and AWS being a popular cloud infrastructure provider.
I started writing this book as the guide I wish I’d had when I started my full-stack engineering career.
I’ve tried to answer as many of the questions that I had when I started and introduce much of the
vocabulary I was missing. Over the past year, I’ve been refining and using this blueprint to help guide
and develop junior engineers in their first industrial jobs. I hope it helps you to build great apps too!
Who this book is for
This book is for software engineers who already know how to program (such as recent computer
science or bootcamp graduates) and want to learn how to build an app following industry processes
(for example, using continuous integration and deployment).
You will need a working knowledge of TypeScript/JavaScript, Python, HTML, CSS, and SQL. Apart
from that, you are expected to be new to Quart, React, AWS, and all other specific technologies and
processes introduced in the book.
What this book covers
In Chapter 1, Setting Up Our System for Development, we’ll set up everything needed to develop the app.
This includes installing Python, Node.js, Terraform, and Git, along with the associated tooling for each.
In Chapter 2, Creating a Reusable Backend with Quart, we’ll build a backend that can be used for
any app, introducing elements such as authentication, protection, database connections, and email.
In Chapter 3, Building the API, we’ll build a to-do tracking RESTful CRUD API that includes member
and session management.
In Chapter 4, Creating a Reusable Frontend with React, we’ll build a frontend that can be used for
any app, while discussing routing, styled data entry (forms), state management, and toast feedback.
