bryanjos
Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions for set up for phoenix projects here.
Give it a try and tell us what you think!
Where Next?
Trending in Announcing
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Courses that'll move you from confusion to "Aha, now I get it!"
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Most Liked
bryanjos
Hi, version 2.0.0 was published a few days ago, allowing to have multiple renderers. The number of renderers is configurable.
Take a look at the changelog for more details:
https://github.com/revelrylabs/elixir_react_render/blob/master/CHANGELOG.md
harmon25
I have been using a slight variant of this for full page rendering of react apps and its working great. Almost entirely replacing eex templates and relying solely on server side rendered + hydrated react on the client. This pattern is a bit against the grain, and rather than attempting to avoid javascript within Phoenix front-ends, it embraces it!
I have not really built much using eex templates, and generally find myself reaching for react when building decently complex UIs in Phoenix apps. I do have a javascript background, more specifically Meteor, so I suppose it is just what I am more familiar with.
I think for people coming from node, or react backgrounds, this pattern would help ease them into using phoenix on the back-end, and maybe help grow the community!
tme_317
Wow this is very cool, thanks for open sourcing it. I’ve been experimenting with different frontend/backend architectures for a couple of months now leveraging React and lately have been using Next.js to do SSR talking to Phoenix backend using Apollo/Absinthe. It all works (generally) but adds a heavy fast-moving dependency and some degree of complexity.
It might be cleaner/simpler to use this library instead. Two questions:
Thanks again!
Last Post!
harmon25
Started writing this in the AM, and then got busy with work…
If you are not using redux or some global state thing, the right approach would be a context in the ClientContainer.
Here is a gist of what that might look like.
Not tested, but should work.
You could combine the above with a ChannelContext that was responsible for managing and communicating the channel data/status to child components.
This should be imported on the client container, or maybe app.js, but not in components down the tree that end up on the server render. Which is the problem I think you are having… this websocket stuff will not work in the context of node without some help - like the channel logger I linked above.
It can be done for sure - but if you have an authenticated socket, that authentication would need to be considered when connected back to localhost from the server render node process..
Take a look at the kinda hoops are required for hydrating state in apollo for example:
As you point out, this is a bit challenging if you are doing stuff with sockets all over your tree..this is why i suggest very carefully locating the socket related code - and you probably will need to use something like redux to hook it up with react properly - or else you will have re-renders all over the place…