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 [email protected], 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/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.

Docker Instructions

Getting Started

Last modified 7mo ago