This is a multi-part series – If you just hit this page, please check out the prior posts first!
Once I figured out the overall idea behind what I wanted to do – the next big part was figuring out where to start. As I mentioned in part 1, I had never used Django before starting this project. So I figured that learning how to to use a new web framework might be the best place to begin.
The great thing, is that Django already has some great tutorials on how to get the packages installed and begin working on your first project. Their tutorials can be found here:
- Installing Django
- Writing your first app – Credit to this page for some parts of the examples below
I used both of these tutorials when I wrote my dashboard, and pretty much just modified what they were doing to fit my needs. After I got a baseline down, it was pretty easy to keep going and complete what I wanted to do.
Note: Just as a pure warning – I’m a network admin, not a professional programmer. Python, Django, and the Junos PyEZ libraries make it easy enough for me to make my ideas into a reality. However, that doesn’t mean I write perfect or even great code. (I learned Python from Learn Python The Hard Way – I highly recommend this site, as it was a great resource!)
Alright, with that out of the way – Let’s get started!
Step One – Installing Django
First thing is first, I learned Python on the 2.7.x chain, and I’ve been terrible about forcing myself to switch to 3.x. So for the purposes of this tutorial, everything I’ve written was intended for Python 2.7.5.
Installing the actual Django package is a super simple task (if you use pip):
[[email protected] ~]# pip install django
Collecting django
Downloading Django-1.11.2-py2.py3-none-any.whl (6.9MB)
100% |████████████████████████████████| 7.0MB 140kB/s
Collecting pytz (from django)
Downloading pytz-2017.2-py2.py3-none-any.whl (484kB)
100% |████████████████████████████████| 491kB 1.9MB/s
Installing collected packages: pytz, django
Successfully installed django-1.11.2 pytz-2017.2Step Two – Get JunOS pyEZ libraries
I already wrote about this earlier in Getting Started with JunOS PyEZ. If you don’t already have the JunOS packages installed, check out that page for the instructions.
Step Three – Create the Project!
Django is pretty wonderful from my brief experiences with it. They package a number of tools that make starting a new project very simple.
So to start off with our project, we’re going to use the django-admin tool:
[[email protected] ~]# django-admin startproject junos-dashboardThis will create a base directory structure for us to begin our project. We’ll dive into what these files and folders are as we touch them – but for now, you’ll need to make one minor edit to ~/junos-dashboard/junos-dashboard/settings.py. Open that file up in your favorite text editor, and find the ALLOWED_HOSTS setting. Add in the IP address of your linux VM, like this:
ALLOWED_HOSTS = ['10.2.32.90']Once that’s done, go to the root of your project (~/junos-dashboard/) and test out the web server:
[[email protected] junos-dashboard]# ./manage.py runserver 10.2.32.90:8000Django includes it’s own web server for development and testing, which is extremely helpful. Once you run that command, try to hit your page in a browser and just make sure it loads.
Once that’s done, make sure you’re in the root of your project – and we will create our dashboard application:
[[email protected] junos-dashboard]# django-admin startapp vpnThis command just creates another directory structure within your project. I think this is helpful though, because then I don’t have to worry about which files I need to create or how they should be laid out – Django just handles that for us.
Step Four – Getting our web server to return our app page
Okay – So next we need to make a couple of minor edits in a few files. Within our app directory, there are two files (views.py and urls.py) that handle the main parts of our web interface. Note – urls.py doesn’t exist by default and you will have to create it!
Within views.py, we’re going to create our dashboard homepage with a quick test response:
# Import stuff
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
import sys, ast
# This is our index page
def index(request):
# Return some plain text - just so we know it worked!
return HttpResponse("This page will eventually be a magical dashboard!")This file is where we will eventually be putting in all the code for our dashboard page. When we hit our webserver, this file is executed to generate the view that we’ll see.
Next, we need to create a urls.py file within the same folder as views.py. This file is just a way to direct traffic. If we receive traffic to a regex of ^$, which is no path, then we are going to redirect it to the index function in views.py:
# Import stuff
from django.conf.urls import url
from . import views
#Redirect to index function in views.py
urlpatterns = [
url(r'^$', views.index, name='index'),
]Finally, we’re going to grab the urls.py file in our project folder – not the one we just edited within the app. So this should be ~/junos-dashboard/junos-dashboard/urls.py. In this file, we just need to tell the web server to include the urls.py file we created when evaluating traffic. This file should already exist and have content in it for routing traffic to the admin page, so just add an entry under urlpatterns – should look like this:
urlpatterns = [
url(r'^$', include('vpn.urls')),
url(r'^admin/', admin.site.urls),
]I just want to point out that in this case, we’re catching traffic again with the ^$ regex. This is so that any traffic to the main page (in this case http://10.2.32.90:8000) is automatically sent to our vpn app. However, if you had multiple apps running, you might want to give each one it’s own directory.
Go ahead and execute the runserver tool again, and validate that you’re able to successfully hit the page and retrieve the test text we put in.
Okay, I think we’re going to stop here for this post. At this point we have Django installed and our project/app created. We also have the beginnings of our dashboard page. In the next post, we’ll actually start building out the dashboard interface!
This is a multi-part series – Check out the other posts: