react-ssr 2.0.0

Back-end service for server-side rendering react applications through Django

React SSR (Backend)

Description

Back-end service for server-side rendering react applications through Django.

Installation

pip install react-ssr

Views

ReactView

A class based view that uses RenderMixin.

Mixins

CoreStateMixin

Attributes

• core_state_name

  The name of the core state.

• core_state_user_path

  The path to the core state for user.

• core_state_tokens_path

  The path to the core state for tokens.

• core_state_user_serializer

  The path to the user serializer class.

• core_state_user_serializer_class

  The imported user serializer class.

Methods

• load_core_state(request, core_state)

  Invokes either load_core_state_anonymous or load_core_state_authenticated.

• load_core_state_anonymous(request, core_state)

  Invoked when the current user is anonymous.

• load_core_state_authenticated(request, core_state)

  Invoked when the current user is authenticated.

• set_core_state(state_path, value, core_state)

  Used by the other set methods to apply state to specific paths.

• get_core_state_tokens()

  Should return a dictionary with the JWT to use in the core state.

• set_core_state_tokens(request, core_state)

  When implemented, should add the key/value pairs for valid tokens.

• get_core_state_user(request)

  Returns the current serialized user.

• set_core_state_user(request, core_state)

  Adds the current serialized user to the core state.

• get_core_state_user_serializer_class()

  Returns the user serializer class to use.

• get_core_state(request)

  Returns a dictionary to use as the core state.

• get_initial_state(request, *args, **kwargs)

  Adds the core state to the initial state dictionary.

DefaultStateMixin

Attributes

• default_state_timeout

  The amount of time to wait before cancelling the request.

• default_state_url

  The url to use to get the default state. (Expects the use of @alexseitsinger/react-ssr ndde package)

• default_state_headers

  The headers to use in the request to get the default state.

Methods

• get_default_state_headers()

  Returns a dictionary of headers to use in the request for getting a default state.

• get_default_state(reducer_name)

  Returns the default state of the reducer by reading the state.json file from the reducer's directory.

RenderMixin

Attributes**

• render_template_name

  The template that expects to use our context.

• render_url

  The URL to request our renders from.

• render_timeout

  The time to wait before cancelling our render request.

• render_headers

  A dictionary of headers to use when sending the render request.

Methods

• get_page_state(request, *args, **kwargs)

  Returns a dictionary to update the initial state for redux store.

• get_initial_state(request, *args, **kwargs)

  Returns a dictionary to use as the intial state for the redux store.

• get_context(response)

  Returns the dictionary to use from the rendered front-end, as a context for a django template.

• get_render_payload(request, intitial_state)

  Returns the dictionary to use in the request to render the front-end.

• get_render_headers(request)

  Returns a dictionary of headers to use in the request to render the front-end.

• render_frontend(render_payload, render_headers)

  Returns the JSON data from the rendered front-end application.

• render_backend(request, context)

  Returns a rendered django template using the context provided.

• get(request, *args, **kwargs)

  Returns a rendered django template response using the context from the render_frontend call.

SecretKeyMixin

Attributes

• secret_key_header_name

  The name to use to pass the secret key as a header. (Expects to be received by the Node server from @alexseitsinger/react-ssr)

• secret_key

  The value of the secret key.

Methods

• get_render_headers(request)

  Adds the secret-key header to the dictionary of headers used in the request from render_frontend.

• get_default_state_headers()

  Adds the secret-key header to the dictionary of headers used in the request from get_default_state.

• get_secret_key_header()

  Returns a dictionary containing the secret-key header to use for other requests.

UserAgentMixin

Attributes

• user_agent_header_name

  The name of the header to read from requests to get the user-agent. This is passed onto the render requests.

Methods

• get_render_headers(request)

  Adds the user-agent header to the dictionary of headers used in the request from render_frontend.

• get_user_agent_header()

  Returns a dictionary containing the user-agent header to use in other requests.

Example

settings.py

INSTALLED_APPS = [
    ...
    "react_ssr"
]

REACT_SSR = {
    "RENDER": {
        "URL": "https://0.0.0.0:3000/render",
        "TIMEOUT": 5.0,
        "TEMPLATE_NAME": "index.html",
    }
    "STATE": {
        "URL": "http://0.0.0.0:3000/state",
        "TIMEOUT": 5.0,
        "AUTH": {
            "NAME": "core",
            "USER_SERIALIZER": "path.to.user.serializer.UserSerializer",
            "USER_PATH": "core.authentication.user",
            "TOKENS_PATH": "core.authentication.tokens",
        }
    },
    "SECRET_KEY": {
        "HEADER_NAME": "secret-key",
        "VALUE": "THIS_IS_A_SECRET_KEY",
    }
}

index.html

{% extends "react_ssr/base.html" %}

{% load render_bundle from webpack_loader %}
{% load static %}

{% block head %}
    <script>window.__STATE__ == {{ state | safe }};</script>
{% endblock %}

{% block body %}
    <main role="main">{{ html | safe }}</main>
    {% render_bundle "runtime" %}
    {% render_bundle "vendors" %}
    {% render_bundle "client" %}
{% endblock %}

urls.py

from django.conf.urls import url
from . import views

urlpatterns = [
    ...
    url(r"^$" views.IndexPageView.as_view(), name="index"),
    ...
]

views.py

from react_ssr.views import ReactView
from react_ssr.mixins.core_state import CoreStateMixin

class ReactViewBase(CoreStateMixin, ReactView):
    context_names = ["title", "meta"]

    def get_core_state_tokens(self, request):
        refresh_token = "fdsafdsad23423"
        access_token = "fdsafsd432432fdsaf"
        return {
            "refresh": str(refresh_token),
            "access": str(access_token)
        }

    def get_context(self, response):
        # Get the default template context data.
        context = super().get_context(response)

        # For each name in context_names, find it in the response content.
        # If the data exists, add it to the template context to render with.
        for name in self.context_names:
            data = response.get(name, None)
            if data is not None:
                context.update({name: data})
        return context


class IndexPageView(ReactViewBase):
    def get_page_state(self, request, *args, **kwargs):
        # Get the default state from the reducer
        default_state = self.get_default_state("landing")

        # Get the initial page state dict to use from the base class.
        page_state = super().get_page_state(request)

        # Update the state object to use with the state for this reducer.
        page_state.update({"landing": default_state})

        # Return the state object for rendering.
        return page_state