DOCSEARCHbyAlgolia
Submit Docs

Reactivated

repository·main·Indexed 20 days ago

https://github.com/silviogutierrez/reactivated

A zero-configuration integration layer for using Django and React together. It provides a pre-configured environment to remove the friction of setting up build tools like webpack, allowing Django to handle the backend while React handles rendering. The ecosystem includes a JavaScript client, webpack configuration, and tools for server-side integration.

Tokens
32.9K
Snippets
115
Records
151
Agent score
72%

What's inside Reactivated

  1. Overview of the reactivated package

    main

    The reactivated package contains the JavaScript-side components of the Django Reactivated ecosystem. It provides the necessary infrastructure to integrate React into a Django project, including:

    • Webpack configuration: Pre-configured build settings for bundling React assets.
    • The Client: The core JavaScript client used to interface with the Django backend.
    • Utils: Helper functions for managing the React/Django integration.
    • The Server: Logic for handling the JavaScript/React side of the server-side integration.

  2. Overview of Reactivated

    main
    Reactivated is a framework designed to integrate Django and React with zero configuration. It allows developers to use the full power of Django while rendering the frontend with React, eliminating the need for manual webpack configuration, complex tooling, or custom build setups. The goal is to provide a seamless experience where Django and React work together out of the box.

  4. Use sessions and cookies instead of JWT

    main

    For authentication and state management, use standard Django sessions and cookies. Avoid the complexity of JSON Web Tokens (JWT) unless you are building a platform for millions of users requiring statelessness.

    PostgreSQL is sufficient for session storage for most use cases. If you encounter performance bottlenecks at scale, consider using Redis as a session backend before moving to JWTs.

  5. Use Nix for project dependency management

    main

    Reactivated uses Nix to manage both language-level dependencies (like Python and Node.js) and system-level binaries (like PostgreSQL or ffmpeg). This approach ensures that every developer on a specific branch uses the exact same runtimes and tools, avoiding the need for version managers like pyenv or nvm.

    Key benefits include:

    • Reproducibility: Declaratively stating every requirement (e.g., python 3.9, jdk 11) so the environment is identical across machines.
    • Isolation: Different projects or even different branches of the same project can use different versions of the same tool without conflict.
    • Native Performance: Unlike Docker, Nix runs dependencies natively on your host OS, avoiding virtualization overhead and filesystem sync issues (especially on macOS).

  7. Recommended Project Structure

    main

    Reactivated suggests a structure that separates the Django server and the React client:

    - BASE_DIR
    - manage.py
    - client
        - index.tsx
        - components/
        - templates/ (React components matching Django templates)
    - server
        - settings/
        - <app_name>/
            - views.py
            - models.py
            - forms.py
            - templates.py (Django @template definitions)
            - interfaces.py (@interface definitions)

  8. Use Pick to select model fields for React

    main

    You cannot pass entire Django model instances directly to a React template because React needs to know exactly which fields are being sent. Use Pick[Model, Literal["field1", "field2"]] to act as a lightweight serializer. This tells Reactivated exactly which fields to include in the JSON payload sent to the client.

    from reactivated import Pick
from typing import Literal

# Only 'name' will be sent to the React component
book: Pick[models.Book, Literal["name"]]

  11. Prefer page-based data fetching over RESTful resources

    main

    Reactivated discourages a strict RESTful approach where every resource has its own endpoint (e.g., /widgets/, /orders/). Instead, think in terms of pages and features.

    When building a view, identify the specific data requirements for that page and gather them into a single endpoint. This avoids the complexity of managing multiple endpoints and the mismatch between input (creation/mutation) and output (retrieval) data shapes.

    Example Pattern: Instead of multiple calls, define a single data structure representing the page's needs and fulfill it in one place.

    # Define the shape of the page data
class HomePage(NamedTuple):
    orders: List[Order]
    profile: User
    widgets: List[Widget]

# Fulfill the interface in your view/endpoint
HomePage(
    orders=models.Objects.filter(created__gt=thirty_days_ago),
    profile=request.user,
    widgets=models.Widgets.filter(feature_on_home_page=True),
)

  12. Live editing of vendored Reactivated

    main

    Changes made to the vendored source are picked up automatically without reinstallation:

    • Python: Because of the editable install, changes to upstream/reactivated/reactivated/*.py are immediately visible.
    • Node: npm creates a symlink from node_modules/reactivated to the subtree. You only need to rebuild the TypeScript files to see changes.

    Use --watch mode to automatically rebuild TypeScript on save.

    # One-off build:
npx tsc -p upstream/reactivated/packages/reactivated/tsconfig.json

# Watch mode (auto-rebuilds on save):
npx tsc -p upstream/reactivated/packages/reactivated/tsconfig.json --watch