Rapid Web Prototyping with Lightweight Tools

The main requirements for this course are:

Google Chrome (recent version)
Python 2.7.x
Git 1.7/1.8
virtualenv (described elsewhere)
basic UNIX shell usage (e.g. bash, zsh)
basic programming text editor usage (e.g. TextMate/SublimeText, emacs/vim, Komodo)
a UNIX-like operating system (OS X, Linux VM, or Linux on raw hardware)
optionally, MongoDB installed

For Programming Newbies

If you aren't familiar with the command-line, programming text editors, UNIX, and/or don't have a good comfort level with basic usage of Python/Git already, then you can take the "beginner track" in this course.

Rather than setting up your local computer, you will simply follow along what I'm doing on the screen, and optionally connect to a server I have set up where you can experiment with an IPython Notebook and CodeMirror HTML Editor.

You can download the code to follow along:

http://pixelmonkey.org/pub/rapid-web-code.zip

Some good background reading for this course is the presenter's blog post, "Build a web app fast: Python, HTML & JavaScript resources".

For Experienced Hackers

You'll likely have the pre-reqs, but let's make sure you have some good versions. Open a terminal.

Run python -V and make sure you're on Python 2.7.x.

Run git --version to make sure you have git 1.7/1.8 installed.

Python / Git Setup

A recent Python version (2.7.3) can be installed from http://python.org.

A recent Git version (1.8.1) can be downloaded from http://git-scm.com.

UNIX basics

This course assumes you can walk around the command line a bit.

A quick cheat sheet:

ls: list files in current directory
pwd: print working directory path
cd <path>: change directory
mkdir <path>: create a directory
cat <file>: show contents of file
nano <file>: open file in nano text editor

Repo setup

Make a work area::

mkdir ~/repos

Clone the code respository::

git clone git://github.com/amontalenti/rapid-web.git
cd rapid-web

Inspect the tags::

git tag -l

Look at Github web interface:

https://github.com/amontalenti/rapid-web/

Feel free to fork!

Browse all the additions

All the changes from the initial check-in to the last on Github.

https://github.com/amontalenti/rapid-web/compare/v0.2-static...v2.0-fin

virtualenv pre-reqs

easy_install command may not be available in some borked Python versions on Linux and OS X.

Try easy_install --version to check.

If not available, use this script::

curl -O http://python-distribute.org/distribute_setup.py
python distribute_setup.py

Set up virtualenv

Run this virtualenv setup::

$ sudo easy_install pip
$ sudo pip install virtualenv

Then::

$ cd rapid-web
$ virtualenv rapid-env

This will create a self-contained Python installation for use with this tutorial.

IPython

One of the first Python development tools I'll use in hour 2 is IPython.

It lets us test code at the command-line easily.

Prototyping code at the command-line is one of the core ways to do effective prototyping beyond the HTML / CSS / JavaScript phase.

IPython Setup

You should now have a virtualenv folder called rapid-env. For convenience, let's make it easy to activate::

$ ln -s rapid-env/bin/activate

Activate it with the "magic incantation"::

$ source activate

And then, install IPython::

(rapid-env)$ pip install ipython
... lots of output ...
(rapid-env)$ ipython -V
0.13.1

IPython and Flask installation

$ cat requirements.txt
ipython
Flask
$ pip install -r requirements.txt
...

Then, confirm that you can import all the libraries.

$ ipython
>>> import flask
>>> import jinja2
>>> import werkzeug
>>> <CTRL+D>
Do you really want to exit ([y]/n)? y
$

Advanced Prototyping

If you install some optional requirements, you can get:

IPython Notebook: browser-based Python editor and prototyping environment
LiveReload: browser plugin and server for auto reloading on page changes

IPython Notebook and LiveReload Installation

$ cat dev-requirements.txt
# for live code updates
livereload
# for ipython notebook
tornado
pyzmq
$ pip install -r dev-requirements.txt
...
$ ipython notebook
<CTRL+C to quit>
$ livereload -p 8000
<CTRL+C to quit>

LiveReload Chrome Plugin

To actually use LiveReload, you need a browser extension for chrome which can be downloaded here:

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

SSH Config

We're going to ssh into a remote server in the final hour of the course for deployment.

To do this, we're going to need to add your public key to the server's list of "authorized keys".

If you are already a Github user or remotely manage servers with SSH, then you probably don't need to generate a new public key, but I've included these instructions here for those of you who don't already have public keys.

Do I have a public key?

Try::

cat ~/.ssh/id_*.pub

Do you get output like::

ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQE...

If so, you do already have a public key.

SSH Public Key Setup

SSH has a small configuration file at ~/.ssh/config that allows you to specify hostnames that ssh will use.

Upon connecting to a server, ssh looks for an identity file for public key authentication. This is typically ~/.ssh/id_rsa.

This private key has a matching public key, which is typically ~/.ssh/id_rsa.pub and must be listed in the remote host's ~/.ssh/authorized_keys file.

ssh-keygen can create the public/private key for you. Then you need to share the public key with me.

ssh-keygen

At the terminal::

$ ssh-keygen 
Generating public/private rsa key pair.
Enter file in which to save the key (/home/user1/.ssh/id_rsa): 
Your identification has been saved in /home/user1/.ssh/id_rsa.
Your public key has been saved in /home/user1/.ssh/id_rsa.pub.
The key fingerprint is:
43:55:f0:cc:1a:9f:ff:2e:3a:a8:94:8c:f1:62:d3:b1 user1@hacknode
...

.ssh/config example

Edit the file::

$ nano ~/.ssh/config

And insert contents::

Host hacknode
    User shared
    HostName hacknode.alephpoint.com

Then::

$ ssh hacknode

It'll prompt you for a password right now, but that's OK -- just CTRL+C to abort.

Share Your Public Key for HackNode Access

To get access to the server, submit your public key via this Google Form:

https://docs.google.com/forms/d/1RI13bmppgmFAzgtDOJwaNx_QfGV2_I5Thnc3UhXS4pg/viewform

Install MongoDB (optional)

There are pretty straightforward instructions for every operating system at:

http://mongodb.org/downloads

But I have also pre-installed it on our hacknode server to save us some time, if you don't want to load up your machine with it.

Read about the slides

The slides will be web-based and downloadable. You can find information about them here:

https://github.com/amontalenti/rapid-web-slides/blob/master/README.md

Questions?

Contact the instructor directly at pixelmonkey@pixelmonkey.org.

PyCon 2013

Rapid Web Prototyping with Lightweight Tools