Real Python: Build a Blog Using Django, Vue, and GraphQL

Are you a regular Django user? Do you find yourself wanting to decouple your back end and front end, handling data persistence in the API while displaying the data in a client-side framework like React or Vue displays that data, in a single-page app (SPA) in the browser? You’re in luck. This tutorial will take you through the process of building a Django blog back end and a Vue front end, using GraphQL to communicate between them.

Projects are an effective way to learn and solidify concepts. This tutorial is structured as a step-by-step project so you can learn in a hands-on way and take breaks as needed.

In this tutorial, you’ll learn how to:

• Translate your Django models into a GraphQL API
• Run the Django server and a Vue application on your computer at the same time
• Administer your blog posts in the Django admin
• Consume a GraphQL API in Vue to show data in the browser

You can download all the source code you’ll use to build your Django blog application by clicking the link below:

Get the Source Code: Click here to get the source code you’ll use to build a blog application with Django, Vue, and GraphQL in this tutorial.

Demo: A Django Blog Admin, a GraphQL API, and a Vue Front End

Blog applications are a common starter project because they involve create, read, update, and delete (CRUD) operations. In this project, you’ll use the Django admin to do the heavy CRUD lifting and focus on providing a GraphQL API for your blog data.

Here’s a demonstration of the completed project in action:

Next, you’ll make sure you have all the necessary background information and tools before diving into building your blog application.

Project Overview

You’ll create a small blogging application with some rudimentary features. Authors can write many posts. Posts can have many tags and can be either published or unpublished.

You’ll build the back end of this blog in Django, complete with an admin for adding new blog content. Then you’ll expose the content data as a GraphQL API and use Vue to display that data in the browser. You’ll accomplish this in several high-level steps:

1. Set up the Django blog
2. Create the Django blog admin
3. Set up Graphene-Django
4. Set up django-cors-headers
5. Set up Vue.js
6. Set up Vue Router
7. Create the Vue Components
8. Fetch the data

Each section will provide links to any necessary resources and give you a chance to pause and come back as needed.

Prerequisites

You’ll be best equipped for this tutorial if you already have a solid foundation in some web application concepts. You should understand how HTTP requests and responses and APIs work. You can check out Python & APIs: A Winning Combo for Reading Public Data to understand the details of using GraphQL APIs vs REST APIs.

Because you’ll use Django to build the back end for your blog, you’ll want to be familiar with starting a Django project and customizing the Django admin. If you haven’t used Django much before, you might also want to try building another Django-only project first. For a good introduction, check out Get Started with Django Part 1: Build a Portfolio App.

Because you’ll be using Vue on the front end, some experience with reactive JavaScript will also help. If you’ve only used a DOM manipulation paradigm with a framework like jQuery in the past, the Vue introduction is a good foundation.

Familiarity with JSON is also important because GraphQL queries are JSON-like and return data in JSON format. You can read about Working with JSON Data in Python for an introduction. You’ll also need to install Node.js to work on the front end later in this tutorial.

Step 1: Set Up the Django Blog

Before going too far, you’ll need a directory in which you can organize the code for your project. Start by creating one called dvg/, short for Django-Vue-GraphQL:

$ mkdir dvg/
$ cd dvg/

You’ll also be completely splitting up the front-end and back-end code, so it’s a good idea to start creating that separation right off the bat. Create a backend/ directory in your project directory:

Read the full article at https://realpython.com/python-django-blog/ »

---

[ Improve Your Python With 🐍 Python Tricks 💌 – Get a short & sweet Python Trick delivered to your inbox every couple of days. >> Click here to learn more and see examples ]

from Planet Python
via read more