Source code for the project Classe à 12. This has been bootstraped with elm-kitchen, see after the separator for more information.

To install and tinker:

$ git clone https://github.com/betagouv/ClasseA12
$ cd ClasseA12
$ npm install
$ npm start

Check out https://classea12.beta.gouv.fr/

The backend is currently a kinto instance.

The kinto.ini and kinto.wsgi files alongside this README file are good starting points to setup a Kinto instance on a wsgi web server, with the necessary configuration (detailed below).

It needs the kinto accounts plugin.

It also needs the keep_old_files option: when publishing a video, what we actually do is create a duplicate of the video from the upcoming collection to the videos collection, then delete the video from the upcoming collection. Without the keep_old_files options the file would be deleted from the disk and not accessible anymore.

Make sure to also allow uploading video files by adding the following setting:

kinto.attachment.extensions = default+video+mov

Here's an example kinto.ini file:

# Kinto attachment
kinto.attachment.base_url = https://videos.classea12.beta.gouv.fr/
kinto.attachment.folder = {bucket_id}/{collection_id}
kinto.attachment.base_path = /path/to/folder/with/attachments
kinto.attachment.keep_old_files = true
kinto.attachment.extensions = default+video+mov

The videos.classea12.beta.gouv.fr domain name must point to a website configured as a static files server which supports the byte-range requests for the videos to be playable on Safari.

There are two users:

• no user (anonymous): the basic "user" that has read access to the /buckets/classea12/collections/videos/ collection
• classea12admin:###: the admin user that owns and has read and write access to the /buckets/classea12/ bucket

The resources metadata (data and permissions) are stored in scripts/collections_metadata.py.

/buckets/classea12/collections/upcoming/: record:create access to the system.Authenticated users. This is where videos proposed by teachers will be queued waiting to be accepted.

/buckets/classea12/collections/videos/: read access to everyone (anonymous users), write access to the classea12admin user. This is where all the accepted videos are listed.

/buckets/classea12/collections/thumbnails/: record:create access to the system.Authenticated users. This is where thumbnails for videos proposed by teachers will be uploaded.

/buckets/classea12/collections/contacts/: record:create access to the system.Authenticated users (each form submission will use a unique ID to create the contact, preventing anyone to request the list of contacts). List of people registered to the newsletter.

/buckets/classea12/collections/profiles/: record:create access to the system.Authenticated users, and read access to everyone (anonymous users). A profile will then be added to the user account record. The profile will hold any public information about a user (their name, bio...).

/buckets/classea12/collections/comments/: record:create access to the system.Authenticated users, and read access to everyone (anonymous users). A comment will link a profile ID to a video ID.

• Kinto is hosted on an alwaysdata account
• on the same account, the frontend static files are pushed to a git repository using gh-pages with npm run deploy

For this second part to work, here's the recipe:

$ cd git
$ git clone --bare https://github.com/betagouv/ClasseA12.git
$ vim ClasseA12/hooks/post-receive

Content of the post-receive hook:

#!/bin/sh
while read oldrev newrev ref
do
    if [ "$ref" = "refs/heads/gh-pages" ];
    then
        echo "Deploying 'gh-pages' branch"
        git --work-tree=/path/to/www/ClasseA12 --git-dir=/path/to/git/ClasseA12.git checkout --force gh-pages
        exit 0
    fi
done

$ git remote add deploy-prod [email protected]:~/git/ClasseA12.git

Then, to deploy, run

$ npm run deploy-prod

Additionnally you may add a different deploy remote, and use the npm run deploy command, for example to deploy to a different staging server.

As a SPA, every URL needs to be managed by the index.html file (which has the javascript generated from the elm code). This can be done using a nodejs server like expressjs, or by using some apache configuration like the following in a virtual host:

DocumentRoot "/path/to/www/ClasseA12/"

<Directory /path/to/www/ClasseA12>
    Order allow,deny
    allow from all
    Options -Indexes -Includes -ExecCGI
    Options FollowSymlinks

    # This will make sure all the URLs that don't point to a file on disc will be processed by the
    # main entry point in index.html
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</Directory>

During development, the kinto server used is https://kinto-dev.classea12.beta.gouv.fr/v1. It's automatically changed to https://kinto.classea12.beta.gouv.fr/v1 when using the npm run deploy-prod command.

This is a modest attempt at providing a simplistic yet opinionated Elm SPA application skeleton based on rtfeldman's Elm Example SPA, for Allo-Media's own needs.

Check for yourself

• Elm 0.19 ready
• Multiple pages navigation & routing
• Live development server with hot reloading
• elm-test support
• elm-css support

The application stores Elm source code in the src directory:

$ tree --dirsfirst skeleton/src
src
├── Data
│   └── Session.elm
├── Page
│   ├── Home.elm
│   └── SecondPage.elm
├── Request
│   └── Github.elm
├── Views
│   ├── Page.elm
│   └── Theme.elm
├── Main.elm
└── Route.elm

Richard Feldman explains this organization in a dedicated blog post.

$ npm install -g elm-kitchen
$ elm-kitchen my-app
$ cd my-app
$ npm install

To start the development server:

$ npm start

This will serve and recompile Elm code when source files change. Served application is available at localhost:3000.

$ npm test

Tests are located in the tests folder and are powered by elm-test.

$ npm run build

The resulting build is available in the build folder.

A convenient deploy command is provided to publish code on Github Pages.

$ npm run deploy

MIT