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
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/activateNext, clone the project from Github:
git clone https://github.com/techiediaries/django-auth0-vue
cd django-auth0-vueInstall the project requirements using pip:
pip install -r requirements.txtIf 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-devNext install the Vue.js dependencies and run the front-end dev server with:
cd vueapp
npm install
npm run devFinally migrate the database then run the Django dev server with:
python manage.py migrate
python manage.py runserverYou can now navigate with your web browser to http://localhost:8000 and start playing with the demo.
