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:
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.
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:
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.