How to Build Scalable Websites with Wagtail and Nuxt

Bootstrap a website with Wagtail, Nuxt, Graphene and MinIO

  • Promising tech: We make sure our tools always stay sharp.
    A vibrant open-source community ensures an active development. An accompanying corporate involvement can be a steady motor,
    but can also bind us to their choices: We won’t risk stability over breaking changes, so we look for a good mix.
  • State of the Art: To keep in sync with today's demands we optimize for performance, search-engine-optimization (SEO) and security.
  • Compatibility: We build well playing teams, also in our stack and minimize Overhead.
  • Scalability: We prepare for growth, ensure potential to transition into more demand-intensive realms seamlessly.
  • Agility: We always preserve the ability to react to changes in the web landscape by making services attachable and detachable.

The Tools: CMS

Content Management Systems (CMS) provide an interface for editors and work in conjunction with the backend to store content in the database.

Our choice: Wagtail

[…] It’s important to be aware of which hats you’re wearing at any moment, and to use the right tools for that job. —Zen of Wagtail

This Quote from wagtails philosophy shows its division of work mindset making it a perfectly suitable candidate for our approach.
Wagtail is a feature-rich but lightweight CMS and due to its decision to provide an admin-panel interface for editing (rather than frontend-editing) it plays along well in a headless environment.

The Tools : Frontend

The fancy looks that are facing the visitors of the website.

Our choice: Nuxt / Vue

The Tools : API

In a headless setup with distinct front- and backends the frontend needs a definitive way to query for data from the backend, an interface.
Typically those are designed as a REST interface.

The Tools : Object Store

Not all data is structured, so unstructured Objects (like photos and videos) are stored in a cloud storage server.

Our choice: MinIO

The #1 open source object store. And the most enterprise ready. — min.io

This claim by MinIO is backed up by the overwhelming number of prominent users they have within the Fortune 500 Companies, including Apple and JPMorgan. We choose MinIO because we treat file service as a backing service. This allows for more flexibility and system stability since possible data issues can be mitigated by spinning up backup-systems to switch to.

The Build: Bringing It All Together

git clone https://github.com/devs-group/wagtail-nuxt
mv base-wagtail <New-Projectname>
cd <New-Projectname>
git remote rm origin
git remote add origin <New-Repo>

The Build: Prepare The Backend

To have something to work with, we add a new app cards in the cms folder, register it with wagtail in the settings.py and add some models to it:

/cms/home/models.py
wagtail admin interface

The Build: Create The API

Now with data in the backend, we can fire up graphene in nuxt to fetch it for us. First we have to tell graphene about it:

/cms/api/schema.py

The Build: Render Frontend

Nuxt has created a clean directory structure for us and expects instructions to render the homepage in pages/index.vue:

web_frontend/pages/index.vue
web_frontend/pages/entry/_id.vue & web_frontend/components/InfoCard/index.vue

The Result: Start The Website

Time to let the bird fly. First we provide Nuxt with everything it needs.

cd /project_root/web_frontend
yarn install
cd /project_root
cp .env.dist .env
docker-compose up -d

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store