Skip to content

Instantly share code, notes, and snippets.

@vilmibm
Forked from anonymous/django_girls_chromebook.md
Last active June 3, 2017 17:39
Show Gist options
  • Save vilmibm/0737e23603dc924d5c747bb5b993f5b5 to your computer and use it in GitHub Desktop.
Save vilmibm/0737e23603dc924d5c747bb5b993f5b5 to your computer and use it in GitHub Desktop.
Django Girls + Chromebooks

Chromebook + Django Girls == <3

Chromebooks are special in that you can't run your own software outside of the Chrome browser. This is fine if you're browsing the web or editing things in Google Docs, but it makes writing and running your own code slightly more challenging. It's possible to set your Chromebook to "developer mode" and use it like a traditional computer, but this is slightly advanced and also resets the computer to factory defaults.

To still get the benefits of the Django Girls tutorial, this installation guide sets you up with a tool that runs a fully fledged computer for you that you can access through your browser.

Cloud 9

First, we'll install a tool called Cloud 9 which will let us edit code, install software, and more. For the duration of the tutorial, Cloud 9 will act as your local machine. You'll still be executing commands in a terminal interface just like your classmates on OS X or Ubuntu, but the terminal will be remotely connected to a computer somewhere else that Cloud 9 sets up and runs for you.

  1. Install Cloud 9 from the Chrome Web Store
  2. Sign up with Cloud 9
  3. Go to http://c9.io
  4. Click Create a new workspace
  5. Name it "django-girls"
  6. Select the "Blank" template (second from the right on the bottom row of icons)

Cool, you have a computer to continue installing stuff now. You'll see a little window at the bottom of your new workspace that should say something like:

yourusername:~/workspace $

This is your terminal, where you'll be giving your new computer instructions. You might want to make it a bit bigger.

Create a Virtual Environment

A virtual environment (also called a virtualenv) is like a private box we can stuff useful computer code into for a project we're working on. We use them to keep the various bits of code we want for our various projects separate so things don't get mixed up between projects. Virtualenvs are explained in more detail in the full tutorial.

The following lines are commands you should type, one by one, into your terminal:

sudo apt install python3.4-venv
python3 -mvenv myvenv
source myvenv/bin/activate
pip install django==1.9.6

After the final command, you might see output like this:

Downloading/unpacking django==1.9.0
  Downloading Django-1.9-py2.py3-none-any.whl (6.6MB): 6.6MB downloaded
Installing collected packages: django
*** Error compiling '/home/ubuntu/workspace/myvenv/build/django/django/conf/app_template/apps.py'...
  File "/home/ubuntu/workspace/myvenv/build/django/django/conf/app_template/apps.py", line 4
    class {{ camel_case_app_name }}Config(AppConfig):
          ^
SyntaxError: invalid syntax

*** Error compiling '/home/ubuntu/workspace/myvenv/build/django/django/conf/app_template/models.py'...
  File "/home/ubuntu/workspace/myvenv/build/django/django/conf/app_template/models.py", line 1
    {{ unicode_literals }}from django.db import models
                             ^
SyntaxError: invalid syntax

Successfully installed django
Cleaning up...

The errors are okay and can be ignored. You might also not see them, which is fine! The important thing is the Successfully installed django.

Github

Make a Github account.

Python Anywhere

The Django Girls tutorial includes a section on what is called Deployment, which is the process of taking the code that powers your new web application and moving it to a publicly accessible computer (called a server) so other people can see your work.

This part is a little odd when doing the tutorial on a Chromebook since we're already using a computer that is on the internet (as opposed to a local machine). However, it's still useful, as we can think of our Cloud 9 workspace as a place for our "in progress" work and Python Anywhere as a place to show off our stuff as it becomes more complete.

Thus, sign up for a new Python Anywhere account at www.pythonanywhere.com.

Important Notes!

Running the Django Development Server

When you run your local Django server with runserver, you'll do it slightly differently:

python manage.py runserver 0.0.0.0:8080

You'll see a little message pop up to the right of your Cloud 9 terminal with a link you can click to interact with the server you just started. Just click the link and you should be looking at your django app!

The link should look something like:

django-girls-<your username>.c9users.io

For example, if my username is JorgeBorges, my url would be:

django-girls-JorgeBorges.c9users.io

CSRF Errors

When you start playing with the Django admin, you'll get errors about CSRF cookies. Don't worry, the fix is easy: add this to you settings.py file:

MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'

If the problem persists, try working in a new Incognito window.

Using Google Fonts

THe tutorial will have you add the Lobster font to your site. We'll want to fix it by taking the "http://" part of the Lobster font's URL and changing it to just "//". In other words, when it's time to add Lobster, you'll be adding this line to your HTML template:

<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">

Git

The computer that Cloud 9 gives you is already equipped with Git, so no need to install it :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment