APCD Portal

https://txapcd.org/

Documentation

Tip

This project is built as a customization of a TACC CMS website. To manage this project's CMS, reference Core-CMS-Template Docs. To develop this project's custom code, keep reading.

Quick Start

1. Navigate to project directory:
   ^{This is a CMS that contains a Portal client application.}

   cd to acpd_cms

2. Configure the project:
   • Create a /cms/src/taccsite_cms/secrets.py with content from "Stache" secret APCD DEV CMS.
3. Start the CMS website:
   ^{This command will also first build the CMS as needed.}

   make start

4. Navigate to client app:

   cd apcd_cms/src/client

5. Install dependencies:

   npm ci

6. Start the client app:

   npm run dev

7. Change code and observe updates live in the browser.

Convert Existing Django App Page to React App Page

Backend

1. Update urls.py:

   • Make the default page return as
     TemplateView.as_view(template_name='<template_name')
   • Add API endpoints.
     These endpoints are used in Client.

2. Update views.py:

   • import JsonResponse
   • Remove Template building.
   • Adjust context to return json.
   • Send JsonResponse.

Client

1. Define hook:

   • Add method to retrieve data from server.
   • Add & Export types in index.ts.

2. Defining component:

   • Add one or more components as a .tsx file.
   • Export the component.
   • Add exports in index.ts.

3. Update apcd_cms/src/client/src/main.tsx:

   • import the component.
   • Map (via componentMap) a unique ID to the component.

Template

• Update first line:

  • from {% extends "standard.html" %}
  • to {% extends "apcd_cms/templates/standard.html" %}

• Add an element where the component will render e.g.

  <div id="list-registrations-root"></div>

  Give the element its unique id as defined in main.tsx.