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.
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.
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.
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"
.
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.
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
})
Finally add a route to the Django app which runs your new view.