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.
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.
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.
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.
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.
We want to select which features to use manually, to tick the radio button next to "Manual" and click "Next".
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.
"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.
We do not need to save this preset so just click "Continue without saving" and you're good to go.
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:
In the search input, type "Axios". We're going to use the first in the results. Click "Install axios":
When the installation is finished, search for Bulma and repeat the process:
Finally everything we need should be ready. Head back to the command line and type the following command:
$ npm run serve
If you copy the URL http://localhost:8080/ and open it in your browser you will see something like this.
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.
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:
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.