Building a Full Stack Web App: Your Starting Boost | by Chloé Lagrue | Jun, 2022

First steps to implementing and releasing your app in Python

Calliope Gets Wifi, a web app I built with Flask (image by author)

Chances are, building a website* isn’t as hard as you think. The span of technologies and concepts you need to cover is quite large, but if you’ve got some Python under your belt—and maybe some HTML—you can get things rolling pretty quickly.

In this article, we’ll list all the bases you’ll need to cover to build you own web app—including frontend, backend, communication between the two, design, and hosting services—and come up with starting solutions for each of them .

To get started, you can pull a template of the code’s structure from my GitHub repository.

I will be referencing my own web app in the examples I’ll be giving, so feel free to take a look around as well!

We’ll be using Python, and its web-app-dedicated library, Flask. I won’t cover installing those, but you can read the runtime.txt and requirements.txt files in the template I gave you to find out the specific versions I used.

This article is meant to give you a starting push, not take you all the way. If you’ve got no idea where to start with your app, here are suggestions!

The frontend is the most obvious part of the project: your storefront. To build the look of your website, you’ll need the infamous combination of HTML and CSS.

All the files for the former will go into app/templates/and the latter into app/static/styles/.

W3Schools offers great tutorials for both HTML and CSS.

Quick Mention: The Mobile-First Approach

Due to the increasing mobile share of web traffic, a lot of product designers now work using a mobile-first approach, where they initially design for a mobile device, and then expand the design to desktop. You can read more details about it here.

Knowing the largest share of requests to your app will be coming from a phone, and phone screens offer a lot less room for display, you might want to give the mobile-first approach some serious thought.

using developer tools to test your front-end on an emulated iPhone (image by author)

☝️ To develop for mobile, you can open developer tools on your browser, and use the device emulator.

Mobile-first doesn’t mean your desktop version has to be a blown-up version of your mobile design. Using CSS, you can filter some designs to only take effect on large-enough screens.

Any CSS within a @media (min-width: 992px) {} statement, for instance, only applies to screens with a width of 992 pixels or more.

visually different desktop and mobile designs from the same CSS file (image by author)

Getting Started with Frontend Development

The code template I prepared has an app/templates/home.html file and an app/static/styles/home.css file you can start editing. They are already connected to one another, and to your app’s homepage. You’ll likely want to start with the HTML and draw inspiration from the structure to implement on the design in CSS.

If you run python run_locally.py in your terminal, you’ll be able to see your web page take form as you edit the aforementioned files at the address 127.0.0.1:5002 (copy-paste into your URL bar). I’ve made it so your changes take effect when you refresh the page.

You’ll pretty much have to take it from here! Remember there are a lot of great HTML / CSS snippets available out there for anything you might want to add to your page—from navigation bars to loading screens and animations.

Backend is where you’ll have all your software. Whatever service your app provides, that’s where it will be computing it.

Routing

Routing sits at the center of your app. It connects the pages your users visit on your website to the code you want to run when they go to a specific path.

Take this excerpt from my app/routes.py file (not the one in the git repository, the one for my actual app):

Lines 7–9 tell my app what to do when a client (technical term for a user) lands on my website’s root. @app.route(‘/’) means the following function is to be called when the client opens calliopegetswifi.com/. The instruction is to fetch and render the home.html document, implicitly stored in my app/templates/ folder, and send the result back to the client. This will result in displaying this page.

On lines 17–25, we’ve got something a tad more complex going on. This code runs when the client gets to calliopegetswifi.com/book-list.

Here, the server must first query the database to collect all book items (line 19), using the SQLAlchemy ORM to do so. Then, it must pass some arguments to the render_template function, which will integrate them into the book_list.html HTML document. In my example, I’ve passed:

  • booksa list of Book objects, generated from the books table in my database by SQLAlchemy,
  • n_booksthe number of books in my books list,
  • and n_rowsthe number of rows I need to display my books in rows of 2.

Let’s see how I use these arguments when creating my HTML document.

Rendering HTML with Python arguments

We’ll use the book_list.html template, referenced in the previous section, to see how the bookshelf page is constructed.

☝️ All the{% ... %} and {{ ... }} business, called Jinja, is about injecting the Python variables you passed, into your HTML.

{% for row_number in range(n_rows) %} starts a for loop in Python syntax for the number of rows I need, and {% for i in range(2) %} duplicates all the HTML it contains. This way, I can use {{ books[ (row_number*2)+i ].id }} to refer to the book for which I’m currently building a display.

As you might have intuited, {% %} is the correct syntax for statements, while {{ }} is dedicated to variable references.

Once compiled, the HTML will look like this:

rendered HTML for the book_list.html excerpt (image by author)

Jinja allows us to build dynamic HTML documents, where we can factorize structures and duplicate them at will, while handling variables with Python, and not having to manually write any of them into the HTML. If I realize at some point that the Adventures of Sherlock Homes where published in 1893 and not 1892, I can make the change in my database, and Jinja will dynamically load the updated value when a client launches the page.

JavaScript is a part of your frontend team, and it will also handle communication with backend.

Team Frontend

If you need to perform actions that don’t require any additional data to what you’ve already got on your page, you can set that up with “purely frontend” JavaScript.

For instance, the JavaScript right here helps display and hide modals.

The openModal() function displays the modal, and you can call that function from an HTML block, for instance: <div onclick=”openModal()”>. You’ve now got a division in your code that opens a modal when you click it.

On line 5, we’re initiating an event capture. Anytime a user clicks anywhere on your page, JavaScript checks whether the click touched an element bearing the id signup-modal—you guessed it, the modal openModal opened—and if so, hides it again.

a subscription modal (image by author)

Team Backend

If you need to send information to your backend, so you can manipulate it with Python, JavaScript will also be your guy, with the help of AJAX.

Line 1 allows us to use AJAX.

The saveSubscription function handles subscriptions, when a user fills in their email address and clicks “Send me classics” on the modal shown earlier.

On lines 6 to 12, AJAX sends the data dictionary to the route implemented by the save_subscription function with the POST method (important). At the other end, Python receives and processes the data like so:

Lines 4 and 5 capture the data (notice the keys in request.form match the keys in the data dictionary AJAX sent over, and POST is the only access method available for that function).

Lines 7–11 create the subscription in the database, and lines 13–14 commit the change.

Obviously, there’s a lot more to that function in the actual app (checking that the email address sent by AJAX is actually an email address and not some SQL, that the subscription doesn’t exist already, etc), but I excluded it for brevity purposes.

Where to Place

Your JavaScript code goes into <script> </script> tags, at the end of your HTML files. You’ll want to place them right before your </body> tag, so they’re the last closing thing to load on your page (no need to load functionalities your users can’t see yet).

position of

Leave a Comment