Phoenix.React (Phoenix.React v0.2.1)
View SourceRun a react
render server to render react component in Phoenix
html.
Features
- [x] Render to static markup
- [x] Render to html
- [x] Hydrate at client side
See the docs for more information.
Install this package
Add deps in mix.exs
{:phoenix_react_server, "~> 0.2.0"},
Configuration
Set config, runtime, react components, etc.
import Config
config :phoenix_react_server, Phoenix.React,
# react runtime, default to `bun`
runtime: Phoenix.React.Runtime.Bun,
# react component base path
component_base: Path.expand("../assets/component", __DIR__),
# cache ttl, default to 60 seconds
cache_ttl: 60
Supported runtime
- [x]
Phoenix.React.Runtime.Bun
- [ ]
Phoenix.React.Runtime.Deno
- [ ]
Phoenix.React.Runtime.Node
- [ ]
Phoenix.React.Runtime.Lambda
Add Render Server in your application Supervisor tree.
def start(_type, _args) do
children = [
ReactDemoWeb.Telemetry,
{DNSCluster, query: Application.get_env(:react_demo, :dns_cluster_query) || :ignore},
{Phoenix.PubSub, name: ReactDemo.PubSub},
# React render service
Phoenix.React,
ReactDemoWeb.Endpoint
]
opts = [strategy: :one_for_one, name: ReactDemo.Supervisor]
Supervisor.start_link(children, opts)
end
Write Phoenix Component use react_component
defmodule ReactDemoWeb.ReactComponents do
use Phoenix.Component
import Phoenix.React.Helper
def react_markdown(assigns) do
{static, props} = Map.pop(assigns, :static, true)
react_component(%{
component: "markdown",
props: props,
static: static
})
end
end
Import in html helpers in react_demo_web.ex
defp html_helpers do
quote do
# Translation
use Gettext, backend: ReactDemoWeb.Gettext
# HTML escaping functionality
import Phoenix.HTML
# Core UI components
import ReactDemoWeb.CoreComponents
import ReactDemoWeb.ReactComponents
...
end
end
Use in otp release
Transcompile react component in release.
bun build --outdir=priv/react/component ./assets/component/**
Config runtime
to Phoenix.React.Runtime.Bun
in runtime.exs
config :phoenix_react_server, Phoenix.React,
# Change `component_base` to `priv/react/component`
component_base: :code.priv(:react_demo, "react/component")
config :phoenix_react_server, Phoenix.React.Runtime.Bun,
# include `react-dom/server` and `jsx-runtime`
cd: "/path/to/dir/include/node_modules/and/bunfig.toml",
cmd: "/path/to/bun",
env: :prod
Hydrate at client side
Hydrate react component at client side.
<script type="importmap">
{
"imports": {
"react-dom": "https://esm.run/react-dom@19",
"app": "https://my.web.site/app.js"
}
}
</script>
<script type="module">
import { hydrateRoot } from 'react-dom/client';
import { Component } from 'app';
hydrateRoot(
document.getElementById('app-wrapper'),
<App />
);
</script>
Summary
Types
React component file name
Must export a Component
function
React component props Must be a json serializable map
Functions
Returns a specification to start this module under a supervisor.
Render a React component to a string by call renderToStaticMarkup
in react-dom/server
Render a React component to a string by call renderToString
in react-dom/server
Types
Functions
Returns a specification to start this module under a supervisor.
See Supervisor
.
Render a React component to a string by call renderToStaticMarkup
in react-dom/server
Render a React component to a string by call renderToString
in react-dom/server