Building a contacts manager using Vue.js and Django as the backend - part one

Building a contacts manager using Vue.js and Django as the backend - part one

Published 26. sep 2019 05:10 by Stein Ove Helset

In this tutorial I'm going to show you how to build an app for managing your contacts using Vue.js and Django. We're also going to use the Bulma CSS framework to speed up the whole process.

There's a lot of different tutorials out there on both Vue.js and Django. Some of them show you how to combine them, but there isn't a lot of good tutorials showing you how to build a complete project. During this tutorial I'll show you how to install and set up Vue.js for the frontend and Django 2 for the backend. We're going to make it possible to add, edit and delete contacts. Maybe even add a simple search.

Prerequisites

Before diving in to this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Django and Vue.js. I'm going to start the tutorial really basic, so if you don't have any prior experience you still might be able to follow it. If you want a quick introduction to Vue.js you can take one of my other tutorials on the subject.

Installing and setting up Vue.js

In this course we are going to use the new Vue CLI (Stands for Command Line Interface) 3 with UI to set up the project we're going to create. So the first thing we're going to do now is to install the CLI.

$ npm install -g @vue/cli

Just to make sure that everything went OK we can check which version is currently active by running this command.

$ vue --version
3.0.0

Fantastic! Now we can start Vue UI and see what that looks like!

$ vue ui

The Vue UI should open automatically in your default browser once it has started.

Building a contacts manager using Vue.js and Django as the backend - 1

Looks good right? (Sorry for the Norwegian interface)
As you can see there is no projects there right now, what a shame. Click the "Create" button at the top of the screen to get started with the wizard.

Building a contacts manager using Vue.js and Django as the backend - 2

You probably have a favorite place on your computer to store your projects, so just click around in the file browser until you find out where you want to create the Vue.js project. When you have located the spot you can click on "Create a new project here" button you'll find at the bottom of the screen.

Building a contacts manager using Vue.js and Django as the backend - 3

In the project folder you fill out the same information as you find on the picture above. Project name is "VueContacts", package manager is "npm" (use yarn if you want to) and the Initial commit message is also optional, but I like to use something like "Initial setup". Click "Next" to continue.

Building a contacts manager using Vue.js and Django as the backend - 4

We want to select which features to use manually, to tick the radio button next to "Manual" and click "Next".

Building a contacts manager using Vue.js and Django as the backend - 5

We do not need all the features, but as you can see "Babel" and "Linter/Formatter" is already checked and that's good because we need both of them. We are also going to use "Router" to handle all of the URLs in our app. We have also checked the "Use config files" because we feel that it's best to separate the different config files. Click next to continue.

Building a contacts manager using Vue.js and Django as the backend - 6

"Lint on save" is already checked and that is good because then we get the errors and warnings everytime we save a file. The Linter that we are going to use is "ESLint + Prettier", so choose that in the dropdown to the right and then click "Next" to continue.

Building a contacts manager using Vue.js and Django as the backend - 7

We do not need to save this preset so just click "Continue without saving" and you're good to go.

Building a contacts manager using Vue.js and Django as the backend - 8

The project is now set up and everything is OK. Next we're going to install Axios to handle the AJAX requests and Bulma to speed up the design development. Click "Dependencies" in the left menu. A window like this should open:

Building a contacts manager using Vue.js and Django as the backend - 10

In the search input, type "Axios". We're going to use the first in the results. Click "Install axios":

Building a contacts manager using Vue.js and Django as the backend - 11

When the installation is finished, search for Bulma and repeat the process:

Building a contacts manager using Vue.js and Django as the backend - 12

Finally everything we need should be ready. Head back to the command line and type the following command:

$ npm run serve
Building a contacts manager using Vue.js and Django as the backend - 15

If you copy the URL http://localhost:8080/ and open it in your browser you will see something like this.

Building a contacts manager using Vue.js and Django as the backend - 16

This is the default Welcome screen for Vue. As you can see there is a menu at the top with a Home and About link. These are added automatically here because we chose to use the "Router" feature. If you click the "About" link you will see that the browser is redirected to /about and you will see this page.

Building a contacts manager using Vue.js and Django as the backend - 17

Installing Django

I'm going to start by creating a virtual environment for our Django project. A virtual environment is used to make it easier to deploy projects and keep track of dependencies.

$ virtualenv -p djangocontacts_env
Running virtualenv with interpreter /Users/username/.pyenv/versions/3.5.0/bin/python3.5
Using base prefix '/Users/username/.pyenv/versions/3.5.0'
New python executable in djangocontacts_env/bin/python3.5
Also creating executable in djangocontacts_env/bin/python
Installing setuptools, pip, wheel...done.

Let's go into the environment and install the packages we need

$ cd djangocontacts_env
$ source bin/activate

The environment is now activated and we can begin installing packages using PIP.

$ pip install django
Collecting django
Collecting pytz (from django)
Installing collected packages: pytz, django
Successfully installed django-2.2.2 pytz-2018.4

$ pip install djangorestframework
Collecting djangorestframework
Installing collected packages: djangorestframework
Successfully installed djangorestframework-3.10.2

$ pip install django-cors-headers
Collecting django-cors-headers
Installing collected packages: django-cors-headers
Successfully installed django-cors-headers-3.1.0

Okay, everything we need for the backend is installed and we can go to the next step.

$ django-admin.py startproject djangocontacts
$ cd djangocontacts

Inside the djangocontacts folder is a manage.py which is used to run the development server, connect to the shell and some more tasks. Right now you don't need to worry about this. We need to make a few changes to the settings file, so open djangocontacts/settings.py in your favorite editor. Add the following lines:

# Add 'corsheader' to the INSTALLED_APPS block:
INSTALLED_APPS = (
...
'corsheaders',
'rest_framework',
...
)


# Add this lines where you want
CORS_ORIGIN_WHITELIST = ['127.0.0.1:8000', 'mydomain.com']

# Add 127.0.0.1 to ALLOWED_HOSTS
ALLOWED_HOSTS = ['127.0.0.1']

# Add 'corsheaders.middleware.CorsMiddleware', over 'django.middleware.common.CommonMiddleware' in the MIDDLEWARE block:
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...

We add 'corsheader' to the INSTALLED_APPS because Django needs to know that we want to use this app. CORS_ORIGIN_WHITELIST = ['127.0.0.1:8000', 'mydomain.com'] is there to tell Django that we accept connections from these addresses. We can now try to run the django development server:

$ python manage.py runserver

If you open http://127.0.0.1:8000 in your browser, you should see something like this:

Django welcome screen

Perfect. The Django projects is now installed and we have configured everything we need for now.

In the next part of this tutorial series I will cover how to add, edit and delete contacts. If there's anything you like to ask me, just leave a comment below and I'll answer asap.

Buy me a coffee

Buy me a coffeeBuy me a coffee

Share this post

Comments

David

27. sep 2019 08:51

Would just like to say how much I have enjoyed your tutorials. They have helped me go in the direction of Vue as React seemed not to be for me. Your Django and Vue tutorial looks really promising.

David

27. sep 2019 09:21

I had to add the following to my settings. py to avoid this error message:
(corsheaders.E013) Origin '127.0.0.1:8000' in CORS_ORIGIN_WHITELIST is missing scheme or netloc
CORS_ORIGIN_WHITELIST = ['http://localhost:8000',]

Stein Ove Helset

28. sep 2019 18:43

Hi David!
Nice to see that you like my tutorials!
It's weird that you had to add the "localhost" to the whitelist. But thanks for pointing it out. I just had to have the default "127.0.0.1:8000" actually.
--
Part two is coming soon!

Srini

14. oct 2019 12:42

Hello
I am seeing this error on the terminal after I click on "Create project" right after I select "ESLinter + Prettier" (after image https://ahackersday.com/media/uploads/contacts8.jpg). the UI takes me back to page https://ahackersday.com/media/uploads/contacts6.jpg

Error: NO_MODULES
at importProject (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/projects.js:363:11)
at progress.wrap (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/projects.js:355:12)
at <anonymous>
at process._tickDomainCallback (internal/process/next_tick.js:228:7)

I have vue version 3.12.0, npm version 6.9.0 and node v10.16.3.

Thank you

Add comment