<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="319696" data-post-id="319696">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fullofcaffeine" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fullofcaffeine/120/33842_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fullofcaffeine
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="cvkmohan" data-post="10" data-topic="62008">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cvkmohan/48/39944_2.png" class="avatar"> cvkmohan:</div>
<blockquote>
<p>What I understood from your post is you are looking for goodness of both worlds</p>
</blockquote>
</aside>
<p>Yeah, precisely - React for (SSR/CSR) UI and Elixir for everything else. I think I was too broad, and I could also have been more concise, but I wanted to add some background info as well! <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20">.</p>
<p>I know I could have something along those lines with a BFF (backend-for-frontend) approach, i.e., Remix on top of an Elixir backend, but that would be a bit more complex and arguably also require more maintenance/resources. It would also shift the cognitive focus over to JS more, I think. It just feels that an Elixir-first approach would be more enjoyable, too, and allow me to keep JS to a minimum while still leveraging it when needed.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319696" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-elixir-phoenix-as-a-super-charged-process-manager-framework-around-nodejs-processes/62008/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-319696" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319696"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="319697" data-post-id="319697">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fullofcaffeine" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fullofcaffeine/120/33842_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fullofcaffeine
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Good points! I know I could just use a BFF approach (see my other reply about using Remix ontop of an Elixir backend) if I want to focus on React UIs that are SSRed, but that would mean managing another repo and potentially another deployment process as well. That can be fine, but the approach I’m trying to explore here is to effectively abstract that as an implementation detail (part of the view layer) of the Elixir/Phoenix app, which could simplify things, I guess (or not!). I’m sure I’m missing other aspects, like logging, etc, it might not be too feasible in practice, that’s why I also wanted to ask around <img src="https://forum.elixirforum.com/images/emoji/apple/smiley.png?v=15" title=":smiley:" class="emoji" alt=":smiley:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319697" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-elixir-phoenix-as-a-super-charged-process-manager-framework-around-nodejs-processes/62008/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-319697" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319697"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="319700" data-post-id="319700">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fullofcaffeine" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fullofcaffeine/120/33842_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fullofcaffeine
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group quote-modified" data-username="hubertlepicki" data-post="4" data-topic="62008">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hubertlepicki/48/6822_2.png" class="avatar"> hubertlepicki:</div>
<blockquote>
<p>There’s a tiny library which I was going to try, but never did, that integrates LiveView with React: <a href="https://github.com/fidr/phoenix_live_react?tab=readme-ov-file" rel="noopener nofollow ugc">GitHub - fidr/phoenix_live_react: Render React.js components in Phoenix LiveView views</a></p>
</blockquote>
</aside>
<p>Yeah, I saw that, but it looks abandoned, and I couldn’t get much info on how well it scales/runs when compared to a regular cluster of nodes managed by PM2, for example.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319700" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-elixir-phoenix-as-a-super-charged-process-manager-framework-around-nodejs-processes/62008/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-319700" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319700"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="319702" data-post-id="319702">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fullofcaffeine" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fullofcaffeine/120/33842_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fullofcaffeine
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I see your point. I’m sure Liveview is more than enough, but being able to tap into SSRed React in a more integrated way for Phoenix views (and reuse existing skills) without having to have a separate app would be interesting!</p>
<p>EDIT: Another advantage of this approach, is that you can freely mix and match regular Elixir views with the augmented SSRed React ones, use the Phoenix routes or delegate tot the React routes as needed. The orchestrator here would be the Phoenix app, and not the nodejs app, which I think in theory would be easier to scale and isolate JS to the minimum necessary.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319702" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-elixir-phoenix-as-a-super-charged-process-manager-framework-around-nodejs-processes/62008/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-319702" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319702"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="319713" data-post-id="319713">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="superchris" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/superchris/120/23484_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  superchris
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I think you might have an easier time checking out the <a href="https://github.com/launchscout/use-live-state" rel="noopener nofollow ugc">use-live-state</a> react hook. I built as a POC for a prospective client, didn’t end up using it in anger, but it’s also only 30 lines of code or so.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319713" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-elixir-phoenix-as-a-super-charged-process-manager-framework-around-nodejs-processes/62008/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-319713" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319713"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="319715" data-post-id="319715">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fullofcaffeine" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fullofcaffeine/120/33842_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fullofcaffeine
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Cool, will have a look!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319715" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-elixir-phoenix-as-a-super-charged-process-manager-framework-around-nodejs-processes/62008/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-319715" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319715"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="319721" data-post-id="319721">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fullofcaffeine" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fullofcaffeine/120/33842_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fullofcaffeine
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="hubertlepicki" data-post="4" data-topic="62008">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hubertlepicki/48/6822_2.png" class="avatar"> hubertlepicki:</div>
<blockquote>
<p>I experimented with something like that, by putting a Next.js server behind a Phoenix reverse-proxy. So basically a web request hits Phoenix, I use Ecto to load up the data, then use POST to send that data to Next.js handler, and stream the Next.js-generated response back to the client browser connected to Phoenix. This works and is pretty simple, in fact I was surprised how simple it is. But this is still running a Next.js server with all it’s bugs and issues it has, eventually I decided against actually pushing this forward in any way.</p>
</blockquote>
</aside>
<p>Yeah, that’s more or less what I have in mind, but I was wondering if it would be feasible not to use express and just connect at the process level (stdout). Not sure if it would be easier or more performant, still a newbie when it comes to BEAM. Probably it’d be more complex and not worth it? Also not sure if it’d support suspense in a straightforward way.</p>
<p>I think your approach could also align with what I want to do as long as Elixir manages it. Did your Elixir app spawned the Next.JS process? Did you have a pool and did you have any logic to “auto-scale” if needed? Any caching?</p>
<p>If you have the code somewhere, I’d love to take a peek at it!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319721" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-elixir-phoenix-as-a-super-charged-process-manager-framework-around-nodejs-processes/62008/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-319721" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319721"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="319779" data-post-id="319779">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="gregvaughn" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/gregvaughn/120/954_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  gregvaughn
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Firstly, yes Elixir is capable of what you wish. I’m not sure if it’s still true, but Heroku used (still does?) Erlang’s supervision feature to manage its dynos. All those features are available in Elixir too.</p>
<aside class="quote no-group" data-username="fullofcaffeine" data-post="15" data-topic="62008">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fullofcaffeine/48/33842_2.png" class="avatar"> fullofcaffeine:</div>
<blockquote>
<p>I’m sure Liveview is more than enough, but being able to tap into SSRed React in a more integrated way for Phoenix views (and reuse existing skills) without having to have a separate app would be interesting!</p>
</blockquote>
</aside>
<p>This brings to mind an interesting perspective on skill level. In order to build what you want, one would develop considerable Elixir skills, perhaps even to the point of losing interest in their React skills. That sort of “catch 22” could be why no one has done it yet <img src="https://forum.elixirforum.com/images/emoji/apple/person_shrugging.png?v=15" title=":person_shrugging:" class="emoji" alt=":person_shrugging:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="319779" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-elixir-phoenix-as-a-super-charged-process-manager-framework-around-nodejs-processes/62008/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-319779" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="319779"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>