dmkun / django-auth0-vue

A Django REST Framework + Vue.js CRUD Demo Secured Using Auth0

Django Auth0 Vue demo

This is an example CRUD (Create-Read-Update-Delete) application which demonstrates how to create a modern web application with a Django backend (Django REST Framework API), a Vue.js front-end and Bootstrap 4 for styling. The REST API is secured with JWT using Auth0.

For separate apps buil for part 1 (master branch) and part 2 (part2 branch) of the tutorial series, make sure to check this repo instead

To learn how to build this demo app you can follow these tutorial series

By following this simple example and the accompanying tutorial(s) you'll learn:

• How to build a simple API using Django REST Framework
• How to add pagination to your API
• How to create, read ,update and delete database records
• How to add JWT authentication to your API using Auth0
• How to build a front-end application with Vue.js
• How to consume a REST API from a Vue.js application (using Axios)
• How to create authentication guards for your views
• How to integrate Django, Webpack and Vue.js for development and production

Installing

You need to have virtualenv and Python 3 installed (Django 2 requires Python 3) then:

First create a new virtual environment and activate it with:

 virtualenv -p python3 env
 source env/bin/activate

Next, clone the project from Github:

git clone https://github.com/techiediaries/django-auth0-vue
cd django-auth0-vue

Install the project requirements using pip:

pip install -r requirements.txt

If the installation of the cryptography package fails make sure to install the python3-dev package. In Ubuntu you can use the following command:

sudo apt-get install python3-dev

Next install the Vue.js dependencies and run the front-end dev server with:

cd vueapp
npm install
npm run dev

Finally migrate the database then run the Django dev server with:

python manage.py migrate
python manage.py runserver

You can now navigate with your web browser to http://localhost:8000 and start playing with the demo.

Home Page

Product List Page (List and Delete)

Product Create/Update Page