📓

Python + Flask

Log in Start free trial →

Python + Flask

We've built an example project that you can use as a boilerplate for your own site.

This method gives you complete control over the appearance of your site. The idea is to fetch data using our GraphQL API and render the result into your own HTML templates. Then add our Fontdue.js widgets to add the Cart, and optionally other interactive components.

We chose Python for this example since many type designers incorporate the language into their type design and production work. The Flask web framework is popular and a proven solution for building small websites, but it's possible to use your favorite web programming environment to build your site template (let us know if you'd like to see guides using other tools).

Install the example

🚧
This guide is intended for web developers. If you're a type designer interested in building your own site from scratch, we recommend either finding a web developer to work with or inquiring with us about our web development service. Learn more
  1. Go to fontdue/example-flask and click Use this template, and then clone your new repo to your computer.
  2. Follow the README file from the project to install the dependencies and get the server running.
  3. Enable Cross-origin access for http://localhost:5000

Folder structure

Take a moment to explore the structure of the project. It will look a bit like this:

.flaskenv
Pipfile
Pipfile.lock
README.md
index.py
vercel.json
app/
  __init__.py
  config.py
  graphql.py
  routes.py
  utils.py
  queries/
    font.graphql
    index.graphql
    layout.graphql
    page.graphql
  static/
    app.css
  templates/
    404.html
    font.html
    helpers.html
    index.html
    layout.html
    page.html

The project setup roughly follows the first few steps of The Flask Mega-Tutorial with a few of our own additions. If you're not familiar with Flask, you may find that tutorial useful.

.flaskenv

Environment variables. Change FONTDUE_URL to your own Fontdue site URL

routes.py

Defines the for your site, as well as logic for querying data and which HTML templates to render

@query(name, argname='data')

This is a custom Flask route decorator we included to make it easy to perform the GraphQL queries. The decorator looks for queries defined in the queries directory and performs the query each time a user visits the page.

The names of files in the queries directory match some of the templates. It's not strictly necessary, but it makes it easy to see which queries populate which templates.

The font.graphql query defines a $slug variable. The decorator will pass any route parameters to the query as variables, which we defined on the font route: /fonts/<slug>

You may specify more than one query for each route. The second parameter defines the name of the keyword argument that gets passed to your route handler. The default keyword argument containing the data is data. You can see we've defined a query called layout which is the data required for the site layout (container) template. Another use-case would be querying for a list of pages to populate site navigation.

static/app.css

We put a simple CSS file here for demonstration. You may write CSS and JS this way or use modern tooling such as Webpack, PostCSS, SASS, and so on. That's an exercise left to the reader.

Templates

Flask uses Jinja for templating. This is a great resource for the template syntax:

Deploy to Vercel

We chose Vercel for this example because they make it easy to deploy Python services to their Serverless network.

Import your project to Vercel (choose the GitHub integration)

Choose the root directory

image

Under Build and Output Settings, uncheck Override on all fields.

Add an environment variable FONTDUE_URL which is the full URL of your Fontdue site, e.g. https://example.fontdue.xyz

(Don't include a trailing slash)

Then click Deploy

image