Create a wish list for Christmas using Django and Vue - part 1

Create a wish list for Christmas using Django and Vue - part 1

Published 16. nov 2018 12:57 by Stein Ove Helset

Christmas is coming up and learning Django and Vue by creating a relevant project couldn't be any better.

I'm going to show you how we can create a project where you set up a wish list and protect it with a custom URL. The list can be sent to your family and friends, and they will only access it if you have sent them a link.

The backend for this project will be created using Django 2, and we'll be using Django Rest Framework for building the API. The frontend will be built using Vue.JS 2.

The project will be spilt into multiple parts, and the parts will be small enough so they won't be overwhelming. If you want to be notified when a part is released, you can scroll down to the bottom of this page and sign up for my newsletter.

In the first part of the project we're going to install and set up Django, and make sure that it runs like it should. We're also going to install and set up a Vue.js project and make sure that works.

More details about the project

-Users can sign up and sign in
-A user can create multiple wish lists
-You don't need an account to view a list
-A user should be able to deactive a list
-A list will contain products with title, description, optional link and picture
-Products can be edited and they can be removed from the list

Installing and setting up Django

$ virtualenv -p wishlist_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 wishlist_env/bin/python3.5
Also creating executable in wishlist_env/bin/python
Installing setuptools, pip, wheel...done.

I started by creating a virtual environment for the project. A virtual environment is used to make it easier to deploy projects and keep track of dependencies.

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

$ cd wishlist_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.0.5 pytz-2018.4

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

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

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

$ django-admin.py startproject wishlist
$ cd wishlist

Inside the wishlist 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 wishlist/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_ALLOW_ALL = True

# 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_ALLOW_ALL = True is there to tell Django that we accept connections from everywhere. 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 and Vue.js

Perfect. The Django projects is now installed and we have configured everything we need for now. Let's continue to the Vue project.

Installing and setting up Vue

We're going to use Vue CLI 3 to create the project. This is really simple and you can just follow the wizard appearing in the command line and fill inn the following values.

If you haven't already installed this you can do this by running the following command:

$ npm install -g @vue/cli

When the installation is finished, you can run this command:

$ vue create wishlist

This will create a new Vue project.
1) Please pick a preset: (Use arrow keys)
Choose "Manually select features" and hit enter.
2) Features
Select the following: Babel and Router. We don't need the other features at this moment.
3) Use history mode for router?
You can type "n" and hit enter. We don't need history mode for this project.
4) Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
Select "In dedicated config files" and hit enter. I feel that this gives me better control over the project.
5) Save this as a preset for future projects?
Just type "n" and hit enter. You can save it if you want! But I think the wizard is short enough to just go through it every time I create a new project.

The installation will run for a little while and when it's finished you can go into the "wishlist" folder and run the project by running these commands:

$ cd wishlist
$ npm run serve

When the project has started you can open "http://localhost:8080/" in your browser. You will see something like this:

Django and Vue.js

Vue is now ready and you can start looking forward to the next part of this project where we will continue building our Christmas wishlist project. In the next part we will start to implements sign up and sign in.

Share this post

Comments

No comments yet

Add comment