Simple Movies web app with Vue, Vuetify and Django. Part 1: Setup

Photo by Erik Witsoe on Unsplash

Just a moment… If you are reading this, you will definitely be interested in my complete 3-part series on how to host a Flask API and a Vue interface using NGINX, use MySQL to store data and use PHPMyAdmin to interact with your database — all running in docker containers!

Flask + Vue + MySQL on Docker. Part I — Setting Up

I am a huge movies fan. In fact, my second year project involved sharing movie information between movie fans and vendors.

You might be interested in my 3 part series of Flask+Vue+MySQL all running in docker containers. https://link.medium.com/1FD1Qlh4c0

That aside, there is rise in popularity in JavaScript front end frameworks. I am a fan of VueJs due to its simplicity. I also love Django because of its simplicity and power. If you want to create a project with the two, you have an option of using VueJS within Django templates. However, I prefer separating my front end and back end.

This tutorial assumes you have basic knowledge in Python, Django and VueJS

Six Reasons We Split Front-end and Back-end Code Into Two Git Repositories | Quick Left

Before we start, lets see what dependencies we will need. Of course for the front end you will need to have Node, npm/yarn and vue-cli installed. For the back end you will need Python and pip installed (I will be using Python 3.6) and also know how to use virtual environments. All these don’t take a lot of time to setup and the internet is full of tutorials on how to install them.

Some truth from webdevelopersnotes.com

Front End

1. Vue — The progressive framework for building user interfaces.
2. Vuetify — The material design framework for Vue
3. Axios — Promise based HTTP client for the browser and node.js
4. Sweet Alert 2 — For beautiful Alert messages
5. Vue Session — For storing user sessions (on the front end)
6. Vuex — For managing the state. For more about state management in Vue, read this awesome post.

Managing State in Vue.js

Back end

For the back end, you will need the following installed on your virtual environment.

1. Django (1.11 and above. I have not tested this with lower versions)
2. Django Rest Framework ( Django REST framework is a powerful and flexible toolkit for building Web APIs)
3. Django CORS Headers — ( A Django App that adds CORS (Cross-Origin Resource Sharing) headers to responses.)
4. Django Filter — ( Django-filter is a reusable Django application allowing users to declaratively add dynamic QuerySet filtering from URL parameters.)
5. Django Rest Framework JWT — ( JSON Web Token Authentication support for Django REST Framework)

So, lets get started. I have to warn you though, I am using Windows 10. The process should be similar for Unix based Operating Systems too.

Setup the Back end

1. Create a virtual environment

Virtual environments are important but not compulsory. They come in handy if you have different projects and each of them requires different versions of python packages (or even python versions).

Creating a virtual environment called testlogin

2. Create the Project Directory

I will call mine testlogin. In it, I will have to directories: client and server.

cd into the testlogin directory.

3. Install Django

In this tutorial I will use Django 2.1. Therefore run the following command:

pip install Django==2.1

Installing Django

4. Create the Server

As I mentioned before, I will call my back end server

Creating the server

5. Install the back end packages

cd into the server folder and create a requirements.txt file. This file will help us to install the other packages I mentioned before. You can copy mine.

The requirements.txt file

Run pip install -r requirements.txt to install all the packages.

After that update the requirements.txt file by running pip freeze > requirements.txt

6. Create the Movies App

We need to create the movies app. This app will be responsible for holding the details about the movie.

Creating the movies app

If we list the contents of the server folder, we should have the following:

Contents of the server folder

That’s it for now, let us now set up the front end.

Setup the Front End

Go back a step to the root of the testlogin folder and create the client app. We will be using a vuetify/webpack template because it makes it easier to get started with vuetify.

Creating the client app

Note that I chose Yes for using vue-router. This will help us with navigation between the pages.

The next step is installing the front end dependencies. You will have to cd into the client directory before installing them.

Installing the dependencies.

Run!

Let’s run both the front end and back end and see if they work.

Running the Client (front end)

cd into the client folder and run npm run dev

Running the front end.

If you open your browser on localhost port 8080 you should see this:

The default page for Vuetify Apps.

You can play around with this page.

Running the Server (back end)

cd into the server folder, activate your virtual environment and run python manage.py runserver

Running the Backend

For now ignore the warnings of running migrations. We will deal with them in the second part.

Open your browser on localhost port 8000 and you should see this.

If you use Django < 2 you will see a different page.

For now that’s it. In the next session, we will manage the user login.