Realtime Django Part 2: Build a Chat application with django, RabbitMQ and Vue.js (Authentication and User Management)

Introduction to webpack

In this section we you briefly get introduced to Webpack (and why you should use Webpack?)

Essentially webpack is a static module bundler for modern JavaScript applications which becomes a fundamental tool with the rise of modern JavaScript front end frameworks such as Angular, React and Vue. It also can be easily configured to bundle other assets such as HTML, CSS and images via loaders.

Webpack basically works by processing your application then builds a dependency tree which contains all modules used by the application and finally bundles all those modules into one or multiple bundles (depending on your configuration)

Webpack offers a plethora of features to bundle static assets (JavaScript, CSS, images etc.) for front-end web developers such as:

Webpack has four core concepts entry, output, loaders and plugins

The entry property allows you to define the entry point(s) for your Webpack configuration. It can either be a single string value, an array of values or an object.

The output property allows you to define the information Webpack needs to write the bundled file(s) to the drive such as the filename and the path (minimum two properties)

Loaders are powerful feature of Webpack as they are used to teach Webpack how to transform assets from other languages than JavaScript such as TypeScript, CSS, Sass etc.

Plugins are used to extend Webpack of anything beyond what can be achieved using loaders.

Webpack is a powerful tool that, once mastered, can help you to improve your front-end development workflow.

Fixing hot code reloading

This is what the docs says about Hot Code Reload:

“Hot Reload” is not simply reloading the page when you edit a file. With hot reload enabled, when you edit a *.vue file, all instances of that component will be swapped in without reloading the page. It even preserves the current state of your app and these swapped components! This dramatically improves the development experience when you are tweaking the templates or styling of your components.

Prerequisites

1. Familiarity with django-rest-framework
2. Knowledge of nuxt-auth: this video will be enough

Serving the index template

Now you need to create and serve an index.html file, where you can mount the Vue application, using a Django view

First create the index.html template in catalog/templates/index.html then add the following content.

The page contains a <div> with the id app where you can mount the Vue application.

The render_bundle tag (with app as an argument) is used to include the app bundle files.

After creating the template, you can next use TemplateView to serve it. Go to your project urls.py` file then add the following:

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
from django.conf.urls import url

from catalog import views

urlpatterns =[
    url(r'^api/public/', views.public),
    url(r'^api/private/', views.private),
    url(r'^$', TemplateView.as_view(template_name='index.html'), name='index'),    
    path('admin/', admin.site.urls),
]

Now reload your Django application, you will get the Yellow page with an error with Django complaining about not finding the webpack-stats.json file needed by the Webpack loader.

Error reading /xxxx/xxxx/xxxx/django-auth0-vue-part-2/webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

This is a screen shot of the error that you will get

To get rid of this error you need to generate the webpack-stats.json file using the Webpack plugin webpack-bundle-tracker so first install it from npm using (make sure you are inside the Vue application):

In frontend/build/webpack.dev.conf.js import webpack-bundle-tracker and include BundleTracker in Webpack plugins

This tells webpack-bundle-tracker to generate the stats file in the root folder of your project.

If you re-run you Webpack dev server, you’ll have the webpack-stats.json file generated in root of your project

If you visit you Django app now you’ll get this error in the console

Updating auth0 callback url

Previously you have used the Auth0 authentication from page served from the Vue server. So if you click the Login In button you’ll will be redirected to this Callback URL mismatch page

Vue webpack configuration

In this section we will briefly talk about the Webpack configuration for Vue

Setting up the frontend

If you want to integrate authentication to an existing project, addthe required modules to your project using npm or yarn. Just run npm install @nuxtjs/auth @nuxtjs/axios in the frontend/ directory.

If you’re starting from scratch, you can follow these steps.

I will be using Vuetify as my UI framework, but you are free to use whateverelse you want. However, be aware that if you use something else (likeBuefy, you will have to use different HTML tags. For example, a button in Vuetify <v-btn @click=”greetPerson()”>Click Me!</v-btn> will bewritten as <b-button @click=”greetPerson()”>Click Me!</b-button> inBuefy. The Vue directives and general API, however, remain the same.

First we’ll configure our settings to use the auth-module.

// frontend/nuxtjs.config.jsexportdefault{// [...other settings...]modules:{// [...other stuff...]'@nuxtjs/axios','@nuxtjs/auth',},axios:{baseURL:'http://127.0.0.1:8000/',},auth:{strategies:{local:{endpoints:{login:{url:'token/login/',method:'post',propertyName:'auth_token',},logout:{url:'token/logout/',method:'post'},user:{url:'accounts/data/',method:'get',propertyName:false,},},tokenType:'Token',tokenName:'Authorization',},redirect:{login:'/login',home:'/',},},},}