The Frontend

The Frontend of the application is separated from the backend and located in the frontend directory. This allows us to create a Single Page Application (SPA) using popular frameworks such as VueJs, ReactJS, and React Native. For this project, VueJs was used.

The frontend directory contains the following structure:

frontend/
└── src
    ├── Components
    │   ├── Forms
    │   ├── Layouts
    │   └── Utils
    ├── Pages
    │   ├── 2FA
    │   ├── Auth
    │   ├── Dashboard
    │   ├── Errors
    │   ├── IPAuth
    │   ├── Management
    │   ├── Settings
    │   ├── System
    │   └── pages.js
    ├── index.js
    └── utils

src: The source directory of the frontend.
- Components: Directory containing reusable components.
  
  Forms: Contains input and form components used in the frontend of the project.
  
  Layouts: Directory with layouts for different sections of the frontend.
  
  Utils: Directory containing utility components such as Notifications, Messages, Search, Pagination, among others.
- Pages: Contains the system pages related to the component names rendered from the backend.
  
  2FA: Screen for two-factor authentication.
  
  Auth: Pages for authentication modules.
  
  Dashboard: Index page of the application for customer and administrative users.
  
  Errors: Screens for error pages.
  
  IpAuth: Pages for IP authorization modules.
  
  Management: Directory containing pages for administrative panel sections.
  
  Settings: Screen for account configuration sections.
  
  System: Sections for global configurations.
  
  pages.js: File containing an object with the Component Name (key): Directory where to locate it.
- index.js: Entry point of the application. Here the integration of InertiaJs with the VueJs framework is configured, which allows a monolithic backend like Django to render components like an SPA.
- utils: Utilities in JavaScript used in the frontend.

How to link the backend with the frontend

The pages.js file serves as a link between the component that the backend needs to render and its location. Let’s see an example:

Backend

def index(request):
    props = {}
    component_key = "IndexCustomer"

    # Do something

    return render_inertia(request, component_key, props)

Frontend

In the pages.js file, there must be an object that contains a key IndexCustomer and the path of the component to display:

const pages = {
    // ....
    "IndexCustomer": "Dashboard/Index.vue"
    // ...
}

Note

Note that it is important that the value of the component_key matches a key in the pages object, which indicates the path of the component to be rendered.