FirstByte

FirstByte provides educators with the materials, curricula, and support to teach computer science and engineering in their classrooms, regardless of budget or technical background.

FirstByte’s Website

Reachable at https://teachfirstbyte.org/. The FirstByte Website uses the Django framework, Jinja templates, Bootstrap CSS, and a little JQuery.

Setup

Software & Dependencies:

1. Install Python 3, Node and NPM.

Start by downloading the repository

$ git clone git@github.com:lukesanantonio/firstbyte.git
$ cd firstbyte

Then set up virtual environment / install python dependencies with poetry:

$ poetry install --no-root

Django is primarily configured via the settings.py file. The file checked into the repo is ready for production (sans a few private values that are deferred to environment variables), so you’ll need to change settings for development. Create a new file in the same directory as the settings.py file called dev_settings.py and make it contain the following:

import os

# Show debug info
DEBUG = True
CRISPY_FAIL_SILENTLY = False
# "Send" email text to the terminal used to start server
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
# Upload files to the local directory
DEFAULT_FILE_STORAGE = 'django.core.files.storage.FileSystemStorage'

# Disable forcing SSL
SECURE_PROXY_SSL_HEADER = None
SECURE_SSL_REDIRECT = False

# Personal / dev API keys go here
GOOGLE_PICKER_API_KEY = 'XXX'

In order to view custom error pages such as the 404 page, you need to set DEBUG to False. With DEBUG set to False, you will need to run the server with the --insecure flag to serve static files through Django. Django normally doesn’t serve static files when not in debugging mode as static files should be handled through a production web server when deployed.

This project also uses webpack for preparing Javascript assets for ES6 support, minification, etc. Use this command to install all required Node dependencies.

$ npm install

I like to use NPX to launch webpack:

$ npm install -g npx
$ npx webpack # Run this once
$ npx webpack --watch # Run this if you're actively developed JS files.

You can also call the script directly:

$ node node_modules/webpack/bin/webpack.js
$ node node_modules/webpack/bin/webpack.js --watch

Once you’ve run webpack in some form, you can move on.

I like to start a shell with poetry so I can run manage.py without a prefix

$ poetry shell

Now initialize a local SQLite database:

$ python manage.py migrate

Create an admin user to play around with:

$ python manage.py createsuperuser

And finally run the server and test:

$ python manage.py runserver

Point your browser to http://localhost:8000/ and have fun!