Wagtail Setup and Development

Table of contents

• Starting up the server

• Setting up the Wagtail CMS

• Getting started on front-end development

  • Building static files with Gulp

• Media files

Starting up the server

In the Terminal of VSCode, run the local server:

#change to the directory your project is located in
cd ubyssey.ca
python manage.py runserver

If at this step you encounter a message saying that you have x amount of unapplied migrations, please refer to the Performing Django migrations on the Docker container section on the Docker page. Come back to this page after you have applied the migrations to your Docker database.

You should now be able to develop inside the Docker container. However, before you will be able to see your development version of the site on localhost:8000, you must configure the Wagtail CMS (content management system).

Setting up the Wagtail CMS

Going to localhost:8000 without setting up Wagtail, you will see a blank site that says 'Welcome to your new Wagtail site'.

You can see Wagtail by going to http://localhost:8000/admin/. Make sure your server is running.

The username is [e-mail], password is volunteer

1. Create a new root page (other than the currently existing 'Welcome to your new Wagtail site!'). Your new page should not be a child page of the default 'Welcome' site.

2. Change the site root to your newly created page in Settings -> Sites. Wagtail Docs here.

You should now be able to see an empty site resembling the live Ubyssey site at localhost:8000.

Getting started on front-end development

To 'compile' static files such as CSS during development, run gulp buildDev in the folder where gulp is installed.

How to build static files with Gulp

Building static files with gulp is a step in front-end development which is somewhat analogous to compiling.

If you see that there is no CSS styling applied to the HTML in (http://localhost:8000/), you may need to set-up ubyssey.ca/ubyssey/static/

In the Docker container (i.e. in the VSCode workspace Terminal):

1. Install the required Node packages with npm:

   cd /workspaces/ubyssey.ca/ubyssey/static_src/
   npm install

2. Install a global version of gulp (if you don't have it already) and build the static files:

   npm install -g gulp
   gulp buildDev

_If you run into any error while installing npm or gulp, remove ubyssey.ca/ubyssey/static_src/node_modules by running rm -rf node_modules.

Media Files

Download and unzip the sample media folder to ubyssey-dev/ubyssey.ca/media/. This will make it so the images attached to the sample articles are viewable.