On a recent visit to Real Python (www.realpython.com) I came across a course aiming to show how to create a blog with a Django (Python) backend and a Vue.JS (JavasScript) frontend, with the frontend and backend using GraphQL to share data.
I’ve not utilised GraphQL or Vue.JS in a project before so I decided to jump in with it. You can too by visiting: https://realpython.com/python-django-blog/
As I followed along with the tutorial I recorded my progress into my GitHub, keeping the frontend and backend as two different repositories:
https://github.com/geektechdude/blog-vue-frontend
https://github.com/geektechdude/blog-django-backend
When the tutorial came to an end it include a few “next steps” recommendations and I’ll be looking to implement them, but first I wanted to add a few of my own “next steps” to my repositories. So far this has included:
Environment Variables
I like to have variables read from the environment rather than being hard coded in.
Containerisation
I’ve got both projects to run in containers, one for each project. Both are available on my Docker Hub repositories:
https://hub.docker.com/r/geektechstuff/blog-vue-frontend
https://hub.docker.com/r/geektechstuff/blog-django-backend
CI / CD
Using GitHub Actions I’ve set up some actions so that on the publication of a new release the Docker Hub images automatically update.
Tests
I’ve introduced a few tests in the Django backend to reassure me when making changes, and also used Coverage to make sure I am testing the majority of the Django code. Testing in JavaScript is new to me, so will be picking that up soon.
What Next?
The tutorial post on Real Python has some great recommendations for next steps so I’m going to look to implement them, and the testing in the Vue frontend.
Different Types of API
There are multiple types of Application Programming Interfaces (APIs), with GraphQL being one. So what are some of the others and what are the differences?
- GraphQL
A query language based API to request specific data - REST
Uses HTTP methods of GET, POST, PUT, DELETE, PATCH to deal with data - SOAP
XML based - Web Socket
Real time, bi-directional - gRPC
Uses HTTP/2 for remote procedure calls - Web Hook
Event driven - MQTT
Light weight publish-subscribe messaging protocol