# How to build a Django App - Part 2: Setting up the server

In part one, we had a look at what makes Django a good option for web development. Now, we are going to put it to use and create a simple website by building a Django app. This tutorial has been designed to be followed as a demo, showing the basics of how Django works. Therefore, it will not explain in detail what every piece of code is doing. If you would like to know more about the code itself, feel free to search for more information as you work through the demo.

### Creating your first Django site

In this tutorial, we will be building a simple To-do App. This should serve as a good demonstration, showing you how Django works.

This tutorial uses Ubuntu Linux. Keep this in mind when it comes to entering commands into the terminal. You may want to set up a Linux virtual machine to avoid potential problems with the commands. For example, not being able to find the alternative Windows command.

Assuming you are all set, let’s get started with the tutorial.

First of all, you will need to install Django. The easiest way to do this is by using pip. To install Django, enter the following command.

sudo pip install django

To check the installation has been successful, run the following command to see the version number of Django you are using.

If you plan to work on a variety of Python projects, it is worth installing virtualenv on your device. This tool creates virtual environments that can be used to isolate each of your projects. However, for the purpose of this tutorial, it isn’t necessary.

Now that Django is installed, we can create a new directory for our project.

mkdir apps

I have decided to name the directory apps, but you can name it whatever you like. We can now access this directory and create our Django application.

cd apps

Your terminal should now be showing that you are inside the apps directory. To create our application we need to run the following command.

I have called the application todolist. Again, feel free to name it whatever you want. Now, we want to cd into this as well.

cd todolist

Next, enter ls to see what files are inside the todolist directory. This should be your result.

manage.py todolist

Now that we know what’s inside the todolist folder, we can open up a text editor and then open our todolist folder as a project. I am using Atom, but you can use whatever text editor suits you.

Once you have opened the folder, you should see the manage.py file as well as another todolist folder. If you click on that folder, you should then see four more files. Don’t worry too much about what they do at this stage, it’s just important that they are there as it tells us everything is correct so far.

Now that we have done that, we can create an app. Although Django refers to them as apps, they are more like modules, so it might help to think of them that way instead. In this case, we are creating a todolist app. To do this, we need to go back to our terminal and run the following command.

python manage.py startapp todos

Now, when you go back to the text editor you should see a new folder. I have named my app todo and I now have a todo folder with a set of new files inside it as well as a migrations folder.

The next thing we want to do is try and run our server. We can do this by going back to the terminal and entering the following command.

python manage.py runserver

You will probably get a message like this.

You have 14 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.

Run 'python manage.py migrate' to apply them.

You can ignore this for now. The important thing we want to see is this.

June 05, 2018 - 15:49:34

Django version 2.0.5, using settings 'todolist.settings'

Starting development server at http://127.0.0.1:8000/

Quit the server with CONTROL-C.

This is telling us that our server has been started at this address, http://127.0.0.1:8000/. Open up a browser and navigate to this address, and you should see a page like this.

This tells us that our server is now successfully up and running. Now that we know everything is set up ok we can begin working on the To-do app.

First of all, navigate to the urls.py file in your text editor. This file is for the routes and uses regular expressions. You should see a piece of code like this.

urlpatterns = [

]

This code is for the admin side. At the moment, this piece of code is saying any route that starts with admin. What we need, is for it to be saying todos. All we need to do here is copy the line, paste it above and change the word "admin" to "todos", like this.

urlpatterns = [

]

Then, anything going to todos, we want to send to a todos urls.py file, which we will create in a minute. That means we need to change admin.site.urls to include(todos.urls), like this.

urlpatterns = [

re_path(r'^todos/', include(‘todos.urls’)),

]

Above this piece of code, you will see two import statements.

from django.urls import url

We need to add include, re_path to the django.urls import, like so.

from django.urls import include, re_path

Now, let’s go to our todo folder and create the urls file. Simply call the file urls.py. Then, inside this file, we first want to import the re_path package. To do this we need the following import statement, similar to the one above.

from django.urls import re_path

We also want to import the views.py file.

from . import views

The . tells it that that the file is in the same directory. Next, we need to add the urlpatterns code from our other urls file. Paste that in and then delete the bottom line so that it looks like this.

urlpatterns = [

re_path('todos/', include(‘todos.urls’)),

]

Now we need to change the path that we have left. Make the following changes to the code inside of the brackets.

urlpatterns = [

re_path('^$', views.index, name='index'), ] The ^$ part of this code means "start with" and "end with". Whatever we put in between the ^ and $is what it’s going to match. In this case, it is just going to be the root of todos, so we don’t need to put anything in there. As for the next part, we want it to go to views and then to the index function, which we have also given the name of "index". So, it’s going to look for a function in the views file called index. As it stands this is going to work yet because there is no index. The next thing we want to do is go into views.py and create a new Python function called "index". This function will take the parameter of "request". Every request will have information such as form submissions, data, the user’s IP address etc. All of this information is part of the request object. To begin the function enter the following into the views.py file on the text editor. def index (request): Now, we need to decide what we want to happen when the index view is loaded. What we need to do here is return HttpResponse. For now, we will just send some text. Complete the function with the following code. def index (request): return HttpResponse(‘Hello World’) In order to use this HTTP response we need to import it. At the top of the file, you should see an import statement. Enter the following on the line below. from django.http import HttpResponse Now we should see "Hello World" displayed at localhost:8000/todos. We also want the home page to go to the ‘todos’. To do this, we need to navigate back to todolist and then urls.py. Find the piece of code we edited earlier and then add the following line of code above the other two. urlpatterns = [ re_path(r'^$', include(‘todos.urls’)),

re_path(r'^todos/', include(‘todos.urls’)),

]

Replacing todos with \$ means that it will match the root. Having the include(‘todos.urls’) means that it will go to todos as well. Now, when we go to localhost:8000, we still get "Hello World".

### The next section

That’s all we need to do in terms of routing for now. In the next article, we will set up a database for our website using MySQL. We will also finish setting up the back-end of our website. Once that is done, we will have a functioning admin page, that will allow us to add entries to our To-do list. See you in part three!