This tutorial is not an Introduction to
Vue.js. We are not building a complicated Vue SPA but if you’re not familiar with Vue, You can check it out the documentation and get familiar with it’s principles and API’s.
If have development experience with React or Angular you shouldn’t have problems understanding Vue because it draws a lot of things from both of them (Especially React).
During the course of this tutorial i’ll do my best to breakdown and explain any sections that i feel are complex or have a lot of Magic going on.
If you don’t understand anything, the comments are wide-open. Feel free to reach out.
Originally, this tutorial used uWSGI for the WebSocket layer. Times have changed and today (March 2021), django-channels is now the defacto way to handle WebSockets in django and it’s only going to get better. Hence, the tutorial was extended to incorporate django-channels. It’s still adviseable to go through each part to get a broad understanding of how django-channels works under the hood
What are you going to learn?
The main goal of this tutorial is to teach you about WebSockets and how you can integrate them with your django application(s).
While we walk through this tutorial you’ll also learn how to build your own “mini pusher” using
RabbitMQto broadcast messages in realtime to multiple clients.
That’s not all, while we’re at it, We’ll build a simple token based auth system and you’ll see how you can connect a Vue.js SPA to a django backend with
django-rest-framework. There are a lot of Vue tutorials online but most of them are based on
Before we proceed, this is a glimpse of what we’ll build:
I call the application chatire but you can call it whatever you want to.
Before you start make sure you create a virtual environment activate it
Go ahead and install django with:
after that let’s start a new project called
run the migrations
Finally, start the django development server with:
If everything worked you should see this:
That wraps it up for this part, in the next part we’ll implement user registration and authentication with djoser.
The Repo for this tutorial is available on Github