Deploy a Django App on Heroku

Posted on

Django & Heroku
Heroku is a great platform with lots of useful addons and the set up is relatively easy. In this tutorial, I will give you a step-by-step guild to deploy a simple Django app on Heroku.

Develop Environment Setup

Heroku Toolbelt

Assuming you have signed up for a account on Heroku and created an app in it, you will need to install Heroku Toolbelt to interact with Heroku through CLI later. We will use “Sample-Project” as the app name in this tutorial.

Git Repository

You will need to first check in your code to a git repository before deploying it to Heroku. The information of the git repository provided by Heroku can be found on your app’s settings page.

$ git clone git@heroku.com:sample-project.git

Python and Virtualenv

If this is not your first python app, you probably already have this set up. Otherwise, there are compatibility issue for different versions of Python, thus you should be using the Virtualenv to create a virtual environment when developing your Python app.

# Install pip 
$ [sudo] python get-pip.py 

# Install Virtualenv
$ [sudo] pip install virtualenv 

# Create a virtual environment
$ virtualenv venv

# Activate venv
$ source venv/bin/activate 

Create a Django App

It is recommended to install django-toolbelt, which consists of the following packages.
- Django
- Gunicorn (WSGI server)
- dj-database-url (a Django configuration helper)
- dj-static (a Django static file server)

(venv)$ pip install django-toolbelt
(venv)$ cd Sample-Project

# Create a Django project name Sample_Project
# A valid Django project name can't contain dash
(venv)$ django-admin.py startproject Sample_Project .

# Create the requirements file   
(venv)$ pip freeze > requirements.txt

Deploying your code

1. Create the ProcFile
A Procfile is used to declare what command should be executed to start a web dyno. This file should be in the same folder as the manage.py. Simply create a file named ProcFile and put the line below in the file.

web: gunicorn Sample_Project.wsgi --log-file -

2. Check the short name of the remote server that you want to deploy your code to.
The sample output below shows there is only a single remote server, which short name as origin, configured. You may have configured more than a few remote server.

$ git remote -v
origin	git@heroku.com:Sample-Project.git (fetch)
origin	git@heroku.com:Sample-Project.git (push)

3. Deploy your code
Use “git push ” to deploy your code.

$ git push origin master
Initializing repository, done.
Counting objects: 11, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (9/9), done.
Writing objects: 100% (11/11), 2.64 KiB | 0 bytes/s, done.
Total 11 (delta 0), reused 0 (delta 0)

-----> Python app detected
-----> Installing runtime (python-2.7.8)
-----> Installing dependencies with pip
       Downloading/unpacking Django==1.6.6 (from -r requirements.txt (line 1))
       Downloading/unpacking dj-database-url==0.3.0 (from -r requirements.txt (line 2))
         Downloading dj_database_url-0.3.0-py2.py3-none-any.whl
       Downloading/unpacking dj-static==0.0.6 (from -r requirements.txt (line 3))
         Downloading dj-static-0.0.6.tar.gz
...
To git@heroku.com:Sample-Project.git
 * [new branch]      master -> master

4. Verify that your code has been deployed

$ heroku open

You should see the standard Django page stating “It worked! Congratulations on your first Django-powered page.”

5. Scale your app with Dynos

$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:1X.

Learning AngularJS

Posted on

I was really excited about getting to use AngularJS and the experience has been great so far. In this post, I am going to give you a glimpse of the AngularJS goodies and hopefully it will clear up your path in learning AngularJS.

First of all, why AngularJS? Since you have been looking to learning AngularJS, you probably already have your answer. Basically, AngularJS provides full support for building Single Page Applications(SPA). Everything you need to build a SPA, such as DOM manipulation, routing, history management, AngularJS has it covered. AngularJS is a MVC framework which enforces the separation of these three layers to achieve loose coupling.

There are a few new core concepts that you need to know to get a head start.

  • Directives is a function understood by HTML. It is usually defined in HTML either as a DOM node attribute, ng-app and ng-controller for example, and some of them can be defined as tag name like ng-view.
  • Controllers handle custom logic used to display data in views which is HTML.
  • Two-way data bindings is synchronizing the data between the HTML(views) and the JavaScript objects(models).
  • Filter is used for formatting data, for example, display date in different date formats.
  • Routing defines a path to a view/controller
  • Module acts as a big container for different components.
  • Factory/service are singletons and used to store re-useable business logic and data/state that is shared between controllers. While they serve the same purpose, they are constructed in different ways. A factory function has to return an object at the end and can’t be injected as early as module.config. A service function doesn’t return an object and all the properties need to be set in the “this” scope variable and can be injected in module.config.

Moving on, there are just so many great places to check out if you want to read more…

  • Online courses
  • 1. Free course “Shaping up with Angular.js” by Code School – https://www.codeschool.com/courses/shaping-up-with-angular-js.
    I love how it gives you hands-on experience of coding AngularJs and provides detailed feedback if your code misses anything.

    2. Egghead.io – https://egghead.io
    More than a hundred classes, including the ones need pro account($15/month). You can still find lots of good free courses. They have a quick guide to get started but other than that, the courses are listed in random order.

    3. AngularJS JumpStart with Dan Wahlin – https://www.udemy.com/angularjs-jumpstart/
    It’s a $149 online course but you can probably find some coupon code online. It has 80 lectures from the overview of AngularJS to using the animation. Lots of details of the core components of AnuglarJS.

  • Books
  • 1. AngularJS by Brad Green and Shyam Seshadri
    It’s a quick read of AngularJS. Good for beginners but there are some typos in the sample code.

    2. Pro AngularJS by Adam Freeman
    Advanced programming in AngularJS. My favorite is Chapter 16 – “creating complex custom directives”. Lots of diagrams to explain how the scope works.


Set up Karma/Jasmine in Webstorm

Posted on

I use Karma/Jasmine for unit testing AnuglarJS. FYI, Karma is a test runner and Jasmine is a JavaScript test framework. They are so popular that you will find lots of examples on the websites or books for AngularJS. The setup only takes 5 steps.

1. download and install Node
http://nodejs.org/download.

2. Install Karma
Run “npm install karma” and “sudo npm install -g karma-cli” from the terminal.

3. Initiate Karma for your project
Go to the directory of your project, type “karma init” from the terminal. It will prompt some configuration options which will be defined in the generated config file karma.conf.js.

4. Modify karma.conf.js
You can find more information of each option on Karma. The most important option is the files. The organization of your files doesn’t affect the test but you need to make sure the necessary files are listed correctly in this file. My config file looks like this:

karma.conf.js

karma.conf.js

5. Right click on karma.conf.js and run it.
A browser of your choice will pop up and your tests will be run.
If all tests pass. You will see “Process finished with exit code 0″ shown in the terminal.

test results

test results

I encountered two errors before I had step 4 figured out. The errors were certainly not very helpful and I was surprised that the details that I was looking for are not mentioned on the Internet or books.

1. ReferenceError: module is not defined in …(my source file)
Cause: I didn’t have angular-mocks.js defined in karma.conf.js as I wasn’t using it in my source/test files. It turned out that it where the module/inject used in the test file (beforeEach() method) defined.

2. TypeError: scope is undefined in …(my test file)
Cause: I didn’t list the module required by my custom module in karma.conf.js as I thought they will be loaded when my custom module loads. But wrong again :P