Django & EmberJS Full Stack Basics: Connecting Frontend and Backend — Part 1

Welcome to Part 1 of my five part tutorial Django & EmberJS Full Stack Basics: Connecting Frontend and Backend. It’s written as an introduction to everyone including beginners. If you don’t need the hand holding just push on through to the sections relevant to you.

I’ve tried to keep each part relatively short and to the point so that no one’s head explodes, with natural breaks at which you can go back and look at what we’ve done and save state using version control software like git. If you don’t know what something means click through to the linked articles which will explain in detail.

Part 1 will focus on getting an understanding of what we are trying to build, how it should be structured, and setting up the main project directory.

Note: This tutorial was developed on a MacBook Pro running macOS High Sierra (10.3.6). I’m using iTerm2 for my terminal and Sublime Text 3 as my text editor. All testing is done through the Chrome browser. If you are using Windows, Linux or something else you’ll have do a little bit of your own research into the installation of the required software. The actual code shouldn’t have any differences. You can download the final project files from the Github repository.

P1, P2, P3, P4, P5

1.1 Why I Wrote This Tutorial

When you join a company they’re likely to already have been in business for a number of years with products already in production. The problem is that you never got to see how the cake was baked in the first place. You’re just working on pieces of a cake which have certain conventions and configurations that may be difficult to comprehend. This was me.

Since 2017 I’ve been working with a legal technology company called Closing Folders where my work primarily focuses on the frontend. While I caught up with the codebase on the frontend, I had the nagging feeling that working with the whole stack would be the only way for me to feel truly comfortable with the software we were building.

This tutorial is a culmination of my experiences as a junior software developer at the end of my first year working in a professional environment with a new level of expectations (I had prior freelance and internship experience). It represents a shift in my thinking as I take the steps towards more complex full stack development, and serves as an entry point for developers at the stage where they are wondering how the cake gets baked. I hope this tutorial is as useful for you as it was instructive for me to create.

Note: Understand that in a typical workflow the developer would likely start from the backend, setup the database, create the REST API, and then begin working on the frontend. However, for demonstrative purposes (and to build more connections in your brain) I’ll be doing a little more jumping back and forth so you understand how all the pieces fit together.

1.2 The Concept

Before we start building anything let’s outline our plans and what we’re trying to achieve. We want to build a web application called my_library that runs in the browser. The application is exactly what it sounds like, a digital library of books. While we won’t be dealing with actual book content, the books will have title, author, and description information.

The application will have the following functionality:

• View all books as a single list on the home page, ordered by title
• View each book in detail, displaying its title, author, and description
• Add a new book with the fields title, author, and description
• Edit an existing book’s title, author, and description fields
• Delete an existing book

1.2.1 my_library’s final design and functionality

Take a look at the screenshots below. They depict the application’s final look and functionality:

View all the books in our database as a single list ordered by title.

Click on a book to see a detailed view with author and description information.

Add a new book to the database with the fields title, author, and description.

Edit an existing book’s title, author, and description fields.

Confirm deletion of an existing book.

Note: This tutorial is not meant to be a dive deep into either frontend (EmberJS) or backend (Django) development. I don’t want to get bogged down with too much complexity. Instead we will focus on the critical pieces that stitch together a basic full stack application that stores data in a backend, which serves data to the frontend, which then displays the data and allows the user to manipulate it.

1.3 Project Directory Structure

There are innumerable ways to structure a given project. I’ll keep everything under one my_library folder for simplicity’s sake like so:

my_library
  - server
    - server
    - books
      - api
    - db.sqlite3
    - manage.py
  - client
    - app
      - adapters
      - controllers
      - models
      - routes
      - templates
      - styles
      router.js

These are not all the folders and files that the project will contain (many will be autogenerated), though they are the ones that we will be working with. The my_library directory contains both the server (Django backend) and the client (EmberJS frontend).

1.3.1 Backend

• server contains another folder confusingly called server (Django convention is would seem) which has the top level configuration and settings for the backend.
• The books folder will contain all of the models, views, and other configuration for the book data.
• Inside the books/api folder we’ll create the serializers, URLs, and views that make up our REST API.

1.3.2 Frontend

• client is our EmberJS frontend which has routes, templates, models, controllers, adapters, styles and router.js which describes all the application routes.

Now, let’s go ahead and setup the main project directory my_library.

1.4 Project Directory Setup

1.4.1 Create the main project folder: my_library

Now that we know what we’re going to build, let’s take a few minutes to setup the main project directory my_library:

# cd into desktop and create the main project folder
  cd ~/desktop && mkdir my_library

Create a basic README.md file inside the folder with the following content:

# my_library
This is a basic full stack library application built for the tutorial 'Django & EmberJS Full Stack Basics: Connecting Frontend and Backend'.

Now let’s commit this project to a new Git repository as the project start point.

1.4.2 Install Git

Git is version control software. We’ll use it to keep track of our project and save our state step-by-step so we can always go back if we make breaking errors. I’m sure most of you are already familiar with it.

For the uninitiated you can find out more here. If you don’t have Git installed you can download it here.

Check that it has been successfully installed with:

$ git --version

1.4.3 Create a new project repository

I have an account with Github. It’s popular and works well so that’s what I’ll be using. Feel free to use other solutions if they suit you better.

Create a new repository and get the remote URL which should look like this:

git@github.com:username/repo_name.git

1.4.4 Commit and push your changes to the project repository

Inside the my_library folder initialize the empty repository:

git init

Now add the remote URL so Git knows where we are pushing our files to:

  git remote add origin git@github.com:username/repo_name.git

# check that it's been set properly, should display the origin
  git remote -v

Time to push our code to Github:

# check the status of our repo
# should indicate a the new file README.md, no previous commits
  git status

# add all changes
  git add .

# create a commit with a message
  git commit -m "[BASE] Project Start"

# push changes to the repo's master branch
  git push origin master

The remote Git repository should now be updated with the changes we’ve just pushed:

Now that we have a main project directory and a repository…. maybe we can finally start working on our backend!

NOTE: From this point onward I will not be going into any more detail regarding commits. Convenient moments to do so will be noted with:

1.5 Conclusion

We’ve come to the end of Part 1 with the following steps completed:

• Got a feel for what we are building and how it will work
• Created the my_library main project directory
• Installed git and created a remote project repository on Github
• Initialized the local repository and set the remote URL
• Created aREADME.md file, then committed and pushed all changes

Part 2 focuses on the backend development with a Django project. We will install the required software for backend development, create a new Django project called server, create a new app called books, describe the Book model, register the model with the admin, and demonstrate administration of the database through the Django Admin site.

Why not, right?

Further Reading

What is Full Stack development?
What is a web application?
What is Django?
What is EmberJS?
What is version control?
What is Git?
How do I use Git with Github?
How do I create a Git repository?
How do I add a Git remote?