Tutorial: Steps to add a new page to the frontend

There are several stages to adding a new page to the front end other than adding a new react file.

1. Create a new react file.

This will be the main file with the ReactDOM render method. It must be put in the uclapi/frontend/src/react/pages directory and end with the .jsx extension so it can be built by gulp.

2. Create a corresponding sass file

This file must have the same name as the react file and a .scss extension. It must be put in the uclapi/frontend/src/sass/pages directory.

3. Specify which Django app the page is for

Because each Django app has its own statics folder we need to tell gulp where to output the compiled js and css for each page. To do this edit uclapi/frontend/gulp/tasks/fileModules.json. If you have a Django app called newApp and the new page is called newPage.jsx add a new key value pair to the JSON file like so: "newPage":"newApp".

4. Create a Django template

Routing is handled by Django so we need to create a Django template for our page. The easiest thing to do is to copy uclapi/backend/uclapi/dashboard/templates/getStarted.html to the templates folder of your Django app then change the css and js imports to the name of your page.

5. Add a view to Django

Here is an example of a basic view. Add it to the views.py of your Django app then expand as needed:

@ensure_csrf_cookie
def testView(request):
  data = dict()

  initial_data = json.dumps(data, cls=DjangoJSONEncoder)

  return render(request, 'template.html', {
    'initial_data': initial_data
  })

6. Add a route to Django

Finally add a route to the Django app which runs your new view.